vendor/shopware/storefront/Resources/views/storefront/component/listing/filter/filter-range.html.twig line 1

Open in your IDE?
  1. {% set filterItemId = 'filter-' ~ name ~ '-' ~ random() %}
  3. {% if filterRangeActiveMinLabel is not defined %}
  4.     {% set filterRangeActiveMinLabel = 'listing.filterRangeActiveMinLabel'|trans({'%displayName%': displayName})|sw_sanitize %}
  5. {% endif %}
  7. {% if filterRangeActiveMaxLabel is not defined %}
  8.     {% set filterRangeActiveMaxLabel = 'listing.filterRangeActiveMaxLabel'|trans({'%displayName%': displayName})|sw_sanitize %}
  9. {% endif %}
  11. {% if filterRangeErrorMessage is not defined %}
  12.     {% set filterRangeErrorMessage = 'listing.filterRangeErrorMessage'|trans|sw_sanitize %}
  13. {% endif %}
  15. {% if filterRangeLowerBoundErrorMessage is not defined %}
  16.     {% set filterRangeLowerBoundErrorMessage = 'listing.filterRangeLowerBoundErrorMessage'|trans({'%lowerBound%': lowerBound})|sw_sanitize %}
  17. {% endif %}
  19. {% if minKey is not defined %}
  20.     {% set minKey = 'min-price' %}
  21. {% endif %}
  23. {% if maxKey is not defined %}
  24.     {% set minKey = 'max-price' %}
  25. {% endif %}
  27. {% if unit is not defined %}
  28.     {% set unit = page.header.activeCurrency.symbol %}
  29. {% endif %}
  31. {# @deprecated tag:v6.5.0 - `currencySymbol` will be removed use `unit` instead #}
  32. {% if currencySymbol is defined %}
  33.     {% set unit = currencySymbol %}
  34. {% endif %}
  36. {% if minInputValue is not defined %}
  37.     {% set minInputValue = 0 %}
  38. {% endif %}
  40. {% if maxInputValue is not defined %}
  41.     {# @deprecated tag:v6.5.0 - use maxInputValue instead of price #}
  42.     {% set maxInputValue = price.max %}
  43. {% endif %}
  45. {% set filterRangeOptions = {
  46.     name,
  47.     minKey,
  48.     maxKey,
  49.     lowerBound,
  50.     unit,
  51.     currencySymbol,
  52.     snippets: {
  53.         filterRangeActiveMinLabel,
  54.         filterRangeActiveMaxLabel,
  55.         filterRangeErrorMessage,
  56.         filterRangeLowerBoundErrorMessage
  57.     }
  58. } %}
  60. {% block component_filter_range %}
  61.     {# @deprecated tag:v6.5.0 - Bootstrap v5 removes `btn-block` class, use `d-grid` wrapper instead #}
  62.     <div class="filter-range filter-panel-item{% if not sidebar %} dropdown{% endif %}{% if feature('v6.5.0.0') %} d-grid{% endif %}"
  63.          data-filter-range="true"
  64.          data-filter-range-options='{{ filterRangeOptions|json_encode }}'>
  66.         {% block component_filter_range_toggle %}
  67.             {# @deprecated tag:v6.5.0 - Bootstrap v5 removes `btn-block` class, use `d-grid` wrapper instead #}
  68.             <button class="filter-panel-item-toggle btn{% if sidebar and not feature('v6.5.0.0') %} btn-block{% endif %}"
  69.                     aria-expanded="false"
  70.                     {% if sidebar %}
  71.                     {{ dataBsToggleAttr }}="collapse"
  72.                     {{ dataBsTargetAttr }}="#{{ filterItemId }}"
  73.                     {% else %}
  74.                     {{ dataBsToggleAttr }}="dropdown"
  75.                     data-boundary="viewport"
  76.                     {{ dataBsOffsetAttr }}="0,8"
  77.                     aria-haspopup="true"
  78.                     {% endif %}>
  80.                 {% block component_filter_range_display_name %}
  81.                     {{ displayName }}
  82.                 {% endblock %}
  84.                 {% block component_filter_range_toggle_icon %}
  85.                     {% sw_icon 'arrow-medium-down' style {'pack': 'solid', 'size': 'xs', 'class': 'filter-panel-item-toggle'} %}
  86.                 {% endblock %}
  87.             </button>
  88.         {% endblock %}
  90.         {% block component_filter_range_dropdown %}
  91.             <div class="filter-range-dropdown filter-panel-item-dropdown{% if sidebar %} collapse{% else %} dropdown-menu{% endif %}"
  92.                  id="{{ filterItemId }}">
  94.                 {% block component_filter_range_container %}
  95.                     <div class="filter-range-container">
  97.                         {% block component_filter_range_min %}
  98.                             <label class="filter-range-min">
  100.                                 {% block component_filter_range_min_label %}
  101.                                     {{ 'listing.filterRangeMinLabel'|trans|sw_sanitize }}
  102.                                 {% endblock %}
  104.                                 {% block component_filter_range_min_input %}
  105.                                     <input class="form-control min-input"
  106.                                            type="number"
  107.                                            name="{{ minKey }}"
  108.                                            min="{{ minInputValue }}"
  109.                                            max="{{ maxInputValue }}">
  110.                                 {% endblock %}
  112.                                 {% block component_filter_range_min_unit %}
  113.                                     {# @deprecated tag:v6.5.0 - The block `component_filter_range_min_currency_symbol` will be renamed, use block `component_filter_range_min_unit` instead #}
  114.                                     {% block component_filter_range_min_currency_symbol %}
  115.                                         {# @deprecated tag:v6.5.0 - `filter-range-currency-symbol` will be removed, use `filter-range-unit` instead #}
  116.                                         <span class="filter-range-unit filter-range-currency-symbol">
  117.                                             {{ unit }}
  118.                                         </span>
  119.                                     {% endblock %}
  120.                                 {% endblock %}
  121.                             </label>
  122.                         {% endblock %}
  124.                         {% block component_filter_range_divider %}
  125.                             <div class="filter-range-divider">
  126.                                 &ndash;
  127.                             </div>
  128.                         {% endblock %}
  130.                         {% block component_filter_range_max %}
  131.                             <label class="filter-range-max">
  133.                                 {% block component_filter_range_max_label %}
  134.                                     {{ 'listing.filterRangeMaxLabel'|trans|sw_sanitize }}
  135.                                 {% endblock %}
  137.                                 {% block component_filter_range_max_input %}
  138.                                     <input class="form-control max-input"
  139.                                            type="number"
  140.                                            name="{{ maxKey }}"
  141.                                            min="{{ minInputValue }}"
  142.                                            max="{{ maxInputValue }}">
  143.                                 {% endblock %}
  145.                                 {% block component_filter_range_max_unit %}
  146.                                     {# @deprecated tag:v6.5.0 - The block `component_filter_range_max_currency_symbol` will be renamed, use block `component_filter_range_min_unit` instead #}
  147.                                     {% block component_filter_range_max_currency_symbol %}
  148.                                         {# @deprecated tag:v6.5.0 - `filter-range-currency-symbol` will be removed, use `filter-range-unit` instead #}
  149.                                         <span class="filter-range-unit filter-range-currency-symbol">
  150.                                             {{ unit }}
  151.                                         </span>
  152.                                     {% endblock %}
  153.                                 {% endblock %}
  154.                             </label>
  155.                         {% endblock %}
  156.                     </div>
  157.                 {% endblock %}
  158.             </div>
  159.         {% endblock %}
  160.     </div>
  161. {% endblock %}