custom/plugins/LoyxxAdditionalListingFilters/src/Resources/views/storefront/component/listing/filter/filter-additional-range.html.twig line 1

Open in your IDE?
  1. {% set filterItemId = 'filter-' ~ name ~ '-' ~ random() %}
  4. {% if symbol is not defined %}
  5.     {% set symbol = 'kg' %}
  6. {% endif %}
  8. {% if filterRangeActiveMinLabel is not defined %}
  9.     {% set filterRangeActiveMinLabel = 'loyxx.additional-filters.width.active-min'|trans|sw_sanitize %}
  10. {% endif %}
  12. {% if filterRangeActiveMaxLabel is not defined %}
  13.     {% set filterRangeActiveMaxLabel = 'loyxx.additional-filters.width.active-max'|trans|sw_sanitize %}
  14. {% endif %}
  16. {% if filterRangeErrorMessage is not defined %}
  17.     {% set filterRangeErrorMessage = 'loyxx.additional-filters.width.error'|trans|sw_sanitize %}
  18. {% endif %}
  20. {% set filterRangeOptions = {
  21.     name: name,
  22.     minKey: minKey,
  23.     maxKey: maxKey,
  24.     currencySymbol: symbol,
  25.     isInGrams: config('LoyxxAdditionalListingFilters.config.isInGrams'),
  26.     snippets: {
  27.         filterRangeActiveMinLabel: filterRangeActiveMinLabel,
  28.         filterRangeActiveMaxLabel: filterRangeActiveMaxLabel,
  29.         filterRangeErrorMessage: filterRangeErrorMessage
  30.     }
  31. } %}
  33. {% block component_filter_range %}
  34.     <div class="filter-range filter-panel-item{% if not sidebar %} dropdown{% endif %}"
  35.          data-filter-range="true"
  36.          data-filter-range-options='{{ filterRangeOptions|json_encode }}'>
  38.         {% block component_filter_range_toggle %}
  39.             <button class="filter-panel-item-toggle btn{% if sidebar %} btn-block{% endif %}"
  40.                     aria-expanded="false"
  41.                     {% if sidebar %}
  42.                 data-toggle="collapse"
  43.                 data-target="#{{ filterItemId }}"
  44.             {% else %}
  45.                 data-toggle="dropdown"
  46.                 data-boundary="viewport"
  47.                 data-offset="0,8"
  48.                 aria-haspopup="true"
  49.                     {% endif %}>
  51.                 {% block component_filter_range_display_name %}
  52.                     {{ displayName }}
  53.                 {% endblock %}
  55.                 {% block component_filter_range_toggle_icon %}
  56.                     {% sw_icon 'arrow-medium-down' style {'pack': 'solid', 'size': 'xs', 'class': 'filter-panel-item-toggle'} %}
  57.                 {% endblock %}
  58.             </button>
  59.         {% endblock %}
  61.         {% block component_filter_range_dropdown %}
  62.             <div class="filter-range-dropdown filter-panel-item-dropdown{% if sidebar %} collapse{% else %} dropdown-menu{% endif %}"
  63.                  id="{{ filterItemId }}">
  65.                 {% block component_filter_range_container %}
  66.                     <div class="filter-range-container">
  68.                         {% block component_filter_range_min %}
  69.                             <label class="filter-range-min">
  71.                                 {% block component_filter_range_min_label %}
  72.                                     {{ filterRangeMinLabel }}
  73.                                 {% endblock %}
  75.                                 {% block component_filter_range_min_input %}
  76.                                     <input class="form-control min-input"
  77.                                            type="number"
  78.                                            name="{{ minKey }}"
  79.                                            min="0"
  80.                                            max="{{ filter.max }}">
  81.                                 {% endblock %}
  83.                                 {% block component_filter_range_min_currency_symbol %}
  84.                                     <span class="filter-range-currency-symbol">
  85.                                         {{ symbol }}
  86.                                     </span>
  87.                                 {% endblock %}
  88.                             </label>
  89.                         {% endblock %}
  91.                         {% block component_filter_range_divider %}
  92.                             <div class="filter-range-divider">
  93.                                 &ndash;
  94.                             </div>
  95.                         {% endblock %}
  97.                         {% block component_filter_range_max %}
  98.                             <label class="filter-range-max">
  100.                                 {% block component_filter_range_max_label %}
  101.                                     {{ filterRangeMaxLabel }}
  102.                                 {% endblock %}
  104.                                 {% block component_filter_range_max_input %}
  105.                                     <input class="form-control max-input"
  106.                                            type="number"
  107.                                            name="{{ maxKey }}"
  108.                                            min="0"
  109.                                            max="{{ max.max }}">
  110.                                 {% endblock %}
  112.                                 {% block component_filter_range_max_currency_symbol %}
  113.                                     <span class="filter-range-currency-symbol">
  114.                                         {{ symbol }}
  115.                                     </span>
  116.                                 {% endblock %}
  117.                             </label>
  118.                         {% endblock %}
  119.                     </div>
  120.                 {% endblock %}
  121.             </div>
  122.         {% endblock %}
  123.     </div>
  124. {% endblock %}