filters_horizontal¶
The filters_horizontal macro is used to render filters in a horizontal orientation.
Definition¶
Input parameters¶
filters¶
Filters object representing a set of filters we want to render.
currency¶
Currency object representing a currency currently used in the shop.
options¶
object represents an object of filter horizontal options attributes
| Option key | Type | Default | Required | Description |
|---|---|---|---|---|
| options.instanceId | number |
- | yes | Unique module identifier - commonly provided by special module variable moduleInstance |
| options.categoryId | number |
- | yes | Unique category identifier - commonly provided by special category variable category_id |
Example¶
To get filters and currency, we use methods from Object Api - getFilters() and getShopCurrency(). If using this macro inside a module, we can pass a moduleInstance as an instanceId parameter, otherwise you can provide and unique identifier. We finish it off with providing a category_id variable available on contexts where this module is available.
{% from "@macros/filters_horizontal.twig" import filters_horizontal %}
{% set filters = ObjectApi.getFilters() %}
{% set currency = ObjectApi.getShopCurrency() %}
{{
filters_horizontal(filters, currency, moduleConfig|merge({
instanceId: moduleInstance,
categoryId: category_id,
}))
}}
Macro source code¶
{% macro filters_horizontal(filters, currency, options) %}
{% from "@macros/icon.twig" import icon %}
{% from "@macros/multiple_filter.twig" import multiple_filter %}
{% from "@macros/single_filter.twig" import single_filter %}
{% from "@macros/rates_filter.twig" import rates_filter %}
{% from "@macros/filter_horizontal_toggler.twig" import filter_horizontal_toggler %}
{% from "@macros/filter_horizontal_action.twig" import filter_horizontal_action %}
{% from "@macros/active_filter_tags.twig" import active_filter_tags %}
{% from "@macros/separator.twig" import separator %}
{% set activeFilters = [] %}
{% if filters.priceFilter %}
{% if filters.priceFilter.priceFrom %}
{% set activeFilters = activeFilters|merge([{
label: filters.priceFilter.name,
userValue: filters.priceFilter.priceFrom,
name: filters.priceFilter.priceFromUrlKey,
value: filters.priceFilter.priceFrom,
urlWithFilterValueRemoved: filters.priceFilter.urlWithPriceFromFilterValueRemoved.relative
}]) %}
{% endif %}
{% if filters.priceFilter.priceTo %}
{% set activeFilters = activeFilters|merge([{
label: filters.priceFilter.name,
userValue: filters.priceFilter.priceTo,
name: filters.priceFilter.priceToUrlKey,
value: filters.priceFilter.priceTo,
urlWithFilterValueRemoved: filters.priceFilter.urlWithPriceToFilterValueRemoved.relative
}]) %}
{% endif %}
{% endif %}
{% if filters.producersFilter %}
{% set producersActiveFilters = filters.producersFilter.values|filter(filter => filter.isActive == 1) %}
{% for filter in producersActiveFilters %}
{% set activeFilters = activeFilters|merge([{
label: filters.producersFilter.name,
userValue: filter.name,
name: filter.urlKey,
value: filter.urlValue,
urlWithFilterValueRemoved: filter.urlWithFilterValueRemoved.relative
}]) %}
{% endfor %}
{% endif %}
{% if filters.collectionsFilter %}
{% set collectionsActiveFilters = filters.collectionsFilter.values|filter(filter => filter.isActive == 1) %}
{% for filter in collectionsActiveFilters %}
{% set activeFilters = activeFilters|merge([{
label: filters.collectionsFilter.name,
userValue: filter.name,
name: filter.urlKey,
value: filter.urlValue,
urlWithFilterValueRemoved: filter.urlWithFilterValueRemoved.relative
}]) %}
{% endfor %}
{% endif %}
{% if filters.optionsFilter %}
{% for optionGroupFilter in filters.optionsFilter %}
{% set optionGroupActiveFilters = optionGroupFilter.values|filter(filter => filter.isActive == 1) %}
{% for filter in optionGroupActiveFilters %}
{% set activeFilters = activeFilters|merge([{
label: optionGroupFilter.name,
userValue: filter.name,
name: filter.urlKey,
value: filter.urlValue,
urlWithFilterValueRemoved: filter.urlWithFilterValueRemoved
}]) %}
{% endfor %}
{% endfor %}
{% endif %}
{% if filters.attributesFilter %}
{% for attributesGroupFilter in filters.attributesFilter %}
{% set attributesGroupActiveFilters = attributesGroupFilter.values|filter(filter => filter.isActive == 1) %}
{% for filter in attributesGroupActiveFilters %}
{% set activeFilters = activeFilters|merge([{
label: attributesGroupFilter.name,
userValue: filter.name,
name: filter.urlKey,
value: filter.urlValue,
urlWithFilterValueRemoved: filter.urlWithFilterValueRemoved.relative
}]) %}
{% endfor %}
{% endfor %}
{% endif %}
{% if filters.availabilitiesFilter %}
{% set availabilitiesActiveFilters = filters.availabilitiesFilter.values|filter(filter => filter.isActive == 1) %}
{% for filter in availabilitiesActiveFilters %}
{% set activeFilters = activeFilters|merge([{
label: filters.availabilitiesFilter.name,
userValue: filter.name,
name: filter.urlKey,
value: filter.urlValue,
urlWithFilterValueRemoved: filter.urlWithFilterValueRemoved.relative
}]) %}
{% endfor %}
{% endif %}
{% if filters.deliveriesFilter %}
{% set deliveriesActiveFilters = filters.deliveriesFilter.values|filter(filter => filter.isActive == 1) %}
{% for filter in deliveriesActiveFilters %}
{% set activeFilters = activeFilters|merge([{
label: filters.deliveriesFilter.name,
userValue: filter.name,
name: filter.urlKey,
value: filter.urlValue,
urlWithFilterValueRemoved: filter.urlWithFilterValueRemoved.relative
}]) %}
{% endfor %}
{% endif %}
{% if filters.ratesFilter %}
{% set ratesActiveFilters = filters.ratesFilter.values|filter(filter => filter.isActive == 1) %}
{% for filter in ratesActiveFilters %}
{% set activeFilters = activeFilters|merge([{
label: filters.ratesFilter.name,
userValue: filter.name,
name: filter.urlKey,
value: filter.urlValue,
urlWithFilterValueRemoved: filter.urlWithFilterValueRemoved.relative
}]) %}
{% endfor %}
{% endif %}
{% if filters.newsFilter %}
{% set newsActiveFilters = filters.newsFilter.values|filter(filter => filter.isActive == 1) %}
{% for filter in newsActiveFilters %}
{% set activeFilters = activeFilters|merge([{
label: filters.newsFilter.name,
userValue: filter.name,
name: filter.urlKey,
value: filter.urlValue,
urlWithFilterValueRemoved: filter.urlWithFilterValueRemoved.relative
}]) %}
{% endfor %}
{% endif %}
{% if filters.promotionsFilter %}
{% set promotionsActiveFilters = filters.promotionsFilter.values|filter(filter => filter.isActive == 1) %}
{% for filter in promotionsActiveFilters %}
{% set activeFilters = activeFilters|merge([{
label: filters.promotionsFilter.name,
userValue: filter.name,
name: filter.urlKey,
value: filter.urlValue,
urlWithFilterValueRemoved: filter.urlWithFilterValueRemoved.relative
}]) %}
{% endfor %}
{% endif %}
{% set filtersHeaderId = "filters-header-#{options.instanceId}" %}
{% set activeFiltersHeaderId = "filters-active-header-#{options.instanceId}" %}
{% if options.isFiltersSubcategoriesWcagFlagEnabled %}
<filters-aggregator class="filters filters-horizontal mb-xs-2" id="filters-{{ options.instanceId }}" active-filters="{{ activeFilters|json_encode }}" base-url="{{ filters.baseUrl }}">
<h2 id="{{ filtersHeaderId }}" class="secondary-header secondary-header_m" tabindex="-1">
{{ translate('Filters') }}
</h2>
<div class="filters-horizontal__content">
{% if filters.priceFilter %}
{% set isActive = filters.priceFilter.priceFrom or filters.priceFilter.priceTo %}
{% set ariaLabel = isActive ?
translate('%s, selected filter options: %s, Set filter', [filters.priceFilter.name, 1]) :
translate('Set filter: %s', filters.priceFilter.name)
%}
<div class="filters-horizontal__filter">
<h-dropdown name="price-filter-{{ options.instanceId }}" direction="bottom-left">
<h-dropdown-toggler
name="price-filter-{{ options.instanceId }}"
aria-label="{{ ariaLabel }}"
id="price-filter-{{ options.instanceId }}"
>
{{
filter_horizontal_toggler({
name: filters.priceFilter.name,
isActive,
activeFilterCount: 1
})
}}
</h-dropdown-toggler>
<h-dropdown-content class="dropdown__content_no-padding" name="price-filter-{{ options.instanceId }}">
<header class="filters-horizontal__mobile-header visible-xs-only">
<h-dropdown-close
class="mb-xs-1"
name="price-filter-{{ options.instanceId }}"
>
<span class="filters-horizontal__mobile-header-close-btn">
<span class="sr-only">{{ translate('Close %s filter settings', filters.priceFilter.name) }}</span>
{{ icon('icon-x', {
size: 'l',
classNames: ['d-block'],
ariaHidden: 'true'
}) }}
</span>
</h-dropdown-close>
{{ separator({ size: 's', noMargin: true }) }}
</header>
<filters-group filter-parent="filters-{{ options.instanceId }}">
<div class="filters-horizontal__dropdown-content">
<filter-price is-active="{{ filters.priceFilter.isActive }}">
<div class="grid__row">
<div class="grid__col grid__col_xs-grow">
<div class="control">
<div class="control__label">
<label class="label" for="{{ filters.priceFilter.priceFromUrlKey }}-{{ options.instanceId }}">
{{ translate('Price from') }}
</label>
</div>
<div class="control__content">
<div class="control__element">
<label class="input">
<input
name="{{ filters.priceFilter.priceFromUrlKey }}"
id="{{ filters.priceFilter.priceFromUrlKey }}-{{ options.instanceId }}"
type="text"
class="input__control"
value="{{ filters.priceFilter.priceFrom }}">
<span class="input__unit">{{ currency.symbol }}</span>
</label>
</div>
</div>
</div>
</div>
<div class="grid__col grid__col_xs-grow">
<div class="control">
<div class="control__label">
<label class="label" for="{{ filters.priceFilter.priceToUrlKey }}-{{ options.instanceId }}">
{{ translate('Price up to') }}
</label>
</div>
<div class="control__content">
<div class="control__element">
<label class="input">
<input
name="{{ filters.priceFilter.priceToUrlKey }}"
id="{{ filters.priceFilter.priceToUrlKey }}-{{ options.instanceId }}"
type="text"
class="input__control"
value="{{ filters.priceFilter.priceTo }}">
<span class="input__unit">{{ currency.symbol }}</span>
</label>
</div>
</div>
</div>
</div>
</div>
</filter-price>
</div>
<div class="filters-horizontal__dropdown-actions">
<h-dropdown-close name="price-filter-{{ options.instanceId }}">
<span class="btn btn_outline btn_xs">{{ translate('Cancel') }}</span>
</h-dropdown-close>
<filters-apply>
<a
class="btn btn_primary btn_xs"
context-target-id="price-filter-{{ options.instanceId }}"
context-keeper
>{{ translate('Apply filters') }}</a>
</filters-apply>
</div>
</filters-group>
</h-dropdown-content>
</h-dropdown>
</div>
{% endif %}
{% if filters.producersFilter %}
{% set isActive = filters.producersFilter.isActive %}
{% set ariaLabel = isActive ?
translate('%s, selected filter options: %s, Set filter', [filters.producersFilter.name, producersActiveFilters|length]) :
translate('Set filter: %s', filters.producersFilter.name)
%}
<div class="filters-horizontal__filter">
<h-dropdown name="producers-filter-{{ options.instanceId }}" direction="bottom-left">
<h-dropdown-toggler
id="producers-filter-{{ options.instanceId }}"
name="producers-filter-{{ options.instanceId }}"
aria-label="{{ ariaLabel }}"
>
{{
filter_horizontal_toggler({
name: filters.producersFilter.name,
isActive,
activeFilterCount: producersActiveFilters|length
})
}}
</h-dropdown-toggler>
<h-dropdown-content class="dropdown__content_no-padding" name="producers-filter-{{ options.instanceId }}">
<header class="filters-horizontal__mobile-header visible-xs-only">
<h-dropdown-close
class="mb-xs-1"
name="producers-filter-{{ options.instanceId }}"
>
<span class="filters-horizontal__mobile-header-close-btn">
<span class="sr-only">{{ translate('Close %s filter settings', filters.producersFilter.name) }}</span>
{{ icon('icon-x', {
size: 'l',
classNames: ['d-block'],
ariaHidden: 'true'
}) }}
</span>
</h-dropdown-close>
{{ separator({ size: 's', noMargin: true }) }}
</header>
<filters-group filter-parent="filters-{{ options.instanceId }}">
<div class="filters-horizontal__dropdown-content">
<filter-multiple class="filters-vertical__filter">
{{ multiple_filter(filters.producersFilter, options) }}
</filter-multiple>
</div>
{{
filter_horizontal_action({
dropdownName: 'producers-filter-' ~ options.instanceId,
dropdownId: 'producers-filter-' ~ options.instanceId
})
}}
</filters-group>
</h-dropdown-content>
</h-dropdown>
</div>
{% endif %}
{% if filters.collectionsFilter %}
{% set isActive = filters.collectionsFilter.isActive %}
{% set ariaLabel = isActive ?
translate('%s, selected filter options: %s, Set filter', [filters.collectionsFilter.name, collectionsActiveFilters|length]) :
translate('Set filter: %s', filters.collectionsFilter.name)
%}
<div class="filters-horizontal__filter">
<h-dropdown name="collections-filter-{{ options.instanceId }}" direction="bottom-left">
<h-dropdown-toggler
id="collections-filter-{{ options.instanceId }}"
name="collections-filter-{{ options.instanceId }}"
aria-label="{{ ariaLabel }}"
>
{{
filter_horizontal_toggler({
name: filters.collectionsFilter.name,
isActive,
activeFilterCount: collectionsActiveFilters|length
})
}}
</h-dropdown-toggler>
<h-dropdown-content class="dropdown__content_no-padding" name="collections-filter-{{ options.instanceId }}">
<header class="filters-horizontal__mobile-header visible-xs-only">
<h-dropdown-close
class="mb-xs-1"
name="collections-filter-{{ options.instanceId }}"
>
<span class="filters-horizontal__mobile-header-close-btn">
<span class="sr-only">{{ translate('Close %s filter settings', filters.collectionsFilter.name) }}</span>
{{ icon('icon-x', {
size: 'l',
classNames: ['d-block'],
ariaHidden: 'true'
}) }}
</span>
</h-dropdown-close>
{{ separator({ size: 's', noMargin: true }) }}
</header>
<filters-group filter-parent="filters-{{ options.instanceId }}">
<div class="filters-horizontal__dropdown-content">
<filter-multiple class="filters-vertical__filter">
{{ multiple_filter(filters.collectionsFilter, options) }}
</filter-multiple>
</div>
{{
filter_horizontal_action({
dropdownName: 'collections-filter-' ~ options.instanceId,
dropdownId: 'collections-filter-' ~ options.instanceId
})
}}
</filters-group>
</h-dropdown-content>
</h-dropdown>
</div>
{% endif %}
{% if filters.optionsFilter %}
{% for optionGroupFilter in filters.optionsFilter %}
{% set optionGroupActiveFilters = optionGroupFilter.values|filter(filter => filter.isActive == 1) %}
{% set isActive = optionGroupFilter.isActive %}
{% set ariaLabel = isActive ?
translate('%s, selected filter options: %s, Set filter', [optionGroupFilter.name, optionGroupActiveFilters|length]) :
translate('Set filter: %s', optionGroupFilter.name)
%}
<div class="filters-horizontal__filter">
<h-dropdown name="options-filter-{{ optionGroupFilter.optionId }}-{{ options.instanceId }}" direction="bottom-left">
<h-dropdown-toggler
id="options-filter-{{ optionGroupFilter.optionId }}-{{ options.instanceId }}"
name="options-filter-{{ optionGroupFilter.optionId }}-{{ options.instanceId }}"
aria-label="{{ ariaLabel }}"
>
{{
filter_horizontal_toggler({
name: optionGroupFilter.name,
isActive,
activeFilterCount: optionGroupActiveFilters|length
})
}}
</h-dropdown-toggler>
<h-dropdown-content class="dropdown__content_no-padding" name="options-filter-{{ optionGroupFilter.optionId }}-{{ options.instanceId }}">
<header class="filters-horizontal__mobile-header visible-xs-only">
<h-dropdown-close
class="mb-xs-1"
name="options-filter-{{ optionGroupFilter.optionId }}-{{ options.instanceId }}"
>
<span class="filters-horizontal__mobile-header-close-btn">
<span class="sr-only">{{ translate('Close %s filter settings', optionGroupFilter.name) }}</span>
{{ icon('icon-x', {
size: 'l',
classNames: ['d-block'],
ariaHidden: 'true'
}) }}
</span>
</h-dropdown-close>
{{ separator({ size: 's', noMargin: true }) }}
</header>
<filters-group filter-parent="filters-{{ options.instanceId }}">
<div class="filters-horizontal__dropdown-content">
<filter-multiple class="filters-vertical__filter">
{{ multiple_filter(optionGroupFilter, options) }}
</filter-multiple>
</div>
{{
filter_horizontal_action({
dropdownName: 'options-filter-' ~ optionGroupFilter.optionId ~ '-' ~ options.instanceId,
dropdownId: 'options-filter-' ~ optionGroupFilter.optionId ~ '-' ~ options.instanceId
})
}}
</filters-group>
</h-dropdown-content>
</h-dropdown>
</div>
{% endfor %}
{% endif %}
{% if filters.attributesFilter %}
{% for attributesGroupFilter in filters.attributesFilter %}
{% set attributesGroupActiveFilters = attributesGroupFilter.values|filter(filter => filter.isActive == 1) %}
{% set isActive = attributesGroupFilter.isActive %}
{% set ariaLabel = isActive ?
translate('%s, selected filter options: %s, Set filter', [attributesGroupFilter.name, attributesGroupActiveFilters|length]) :
translate('Set filter: %s', attributesGroupFilter.name)
%}
<div class="filters-horizontal__filter">
<h-dropdown name="options-filter-{{ attributesGroupFilter.attributeId }}-{{ options.instanceId }}" direction="bottom-left">
<h-dropdown-toggler
id="options-filter-{{ attributesGroupFilter.attributeId }}-{{ options.instanceId }}"
name="options-filter-{{ attributesGroupFilter.attributeId }}-{{ options.instanceId }}"
aria-label="{{ ariaLabel }}"
>
{{
filter_horizontal_toggler({
name: attributesGroupFilter.name,
isActive,
activeFilterCount: attributesGroupActiveFilters|length
})
}}
</h-dropdown-toggler>
<h-dropdown-content class="dropdown__content_no-padding" name="options-filter-{{ attributesGroupFilter.attributeId }}-{{ options.instanceId }}">
<header class="filters-horizontal__mobile-header visible-xs-only">
<h-dropdown-close
class="mb-xs-1"
name="options-filter-{{ attributesGroupFilter.attributeId }}-{{ options.instanceId }}"
>
<span class="filters-horizontal__mobile-header-close-btn">
<span class="sr-only">{{ translate('Close %s filter settings', attributesGroupFilter.name) }}</span>
{{ icon('icon-x', {
size: 'l',
classNames: ['d-block'],
ariaHidden: 'true'
}) }}
</span>
</h-dropdown-close>
{{ separator({ size: 's', noMargin: true }) }}
</header>
<filters-group filter-parent="filters-{{ options.instanceId }}">
<div class="filters-horizontal__dropdown-content">
{% if attributesGroupFilter.isSingleChoiceOnly %}
<filter-single class="filters-vertical__filter">
{{ single_filter(attributesGroupFilter, options) }}
</filter-single>
{% else %}
<filter-multiple class="filters-vertical__filter">
{{ multiple_filter(attributesGroupFilter, options) }}
</filter-multiple>
{% endif %}
</div>
{{
filter_horizontal_action({
dropdownName: 'options-filter-' ~ attributesGroupFilter.attributeId ~ '-' ~ options.instanceId,
dropdownId: 'options-filter-' ~ attributesGroupFilter.attributeId ~ '-' ~ options.instanceId
})
}}
</filters-group>
</h-dropdown-content>
</h-dropdown>
</div>
{% endfor %}
{% endif %}
{% if filters.availabilitiesFilter %}
{% set isActive = filters.availabilitiesFilter.isActive %}
{% set ariaLabel = isActive ?
translate('%s, selected filter options: %s, Set filter', [filters.availabilitiesFilter.name, availabilitiesActiveFilters|length]) :
translate('Set filter: %s', filters.availabilitiesFilter.name)
%}
<div class="filters-horizontal__filter">
<h-dropdown name="availabilities-filter-{{ options.instanceId }}" direction="bottom-left">
<h-dropdown-toggler
id="availabilities-filter-{{ options.instanceId }}"
name="availabilities-filter-{{ options.instanceId }}"
aria-label="{{ ariaLabel }}"
>
{{
filter_horizontal_toggler({
name: filters.availabilitiesFilter.name,
isActive,
activeFilterCount: availabilitiesActiveFilters|length
})
}}
</h-dropdown-toggler>
<h-dropdown-content class="dropdown__content_no-padding" name="availabilities-filter-{{ options.instanceId }}">
<header class="filters-horizontal__mobile-header visible-xs-only">
<h-dropdown-close
class="mb-xs-1"
name="availabilities-filter-{{ options.instanceId }}"
>
<span class="filters-horizontal__mobile-header-close-btn">
<span class="sr-only">{{ translate('Close %s filter settings', filters.availabilitiesFilter.name) }}</span>
{{ icon('icon-x', {
size: 'l',
classNames: ['d-block'],
ariaHidden: 'true'
}) }}
</span>
</h-dropdown-close>
{{ separator({ size: 's', noMargin: true }) }}
</header>
<filters-group filter-parent="filters-{{ options.instanceId }}">
<div class="filters-horizontal__dropdown-content">
<filter-multiple class="filters-vertical__filter">
{{ multiple_filter(filters.availabilitiesFilter, options) }}
</filter-multiple>
</div>
{{
filter_horizontal_action({
dropdownName: 'availabilities-filter-' ~ options.instanceId,
dropdownId: 'availabilities-filter-' ~ options.instanceId
})
}}
</filters-group>
</h-dropdown-content>
</h-dropdown>
</div>
{% endif %}
{% if filters.deliveriesFilter %}
{% set isActive = filters.deliveriesFilter.isActive %}
{% set ariaLabel = isActive ?
translate('%s, selected filter options: %s, Set filter', [filters.deliveriesFilter.name, deliveriesActiveFilters|length]) :
translate('Set filter: %s', filters.deliveriesFilter.name)
%}
<div class="filters-horizontal__filter">
<h-dropdown name="deliveries-filter-{{ options.instanceId }}" direction="bottom-left">
<h-dropdown-toggler
id="deliveries-filter-{{ options.instanceId }}"
name="deliveries-filter-{{ options.instanceId }}"
aria-label="{{ ariaLabel }}"
>
{{
filter_horizontal_toggler({
name: filters.deliveriesFilter.name,
isActive,
activeFilterCount: deliveriesActiveFilters|length
})
}}
</h-dropdown-toggler>
<h-dropdown-content class="dropdown__content_no-padding" name="deliveries-filter-{{ options.instanceId }}">
<header class="filters-horizontal__mobile-header visible-xs-only">
<h-dropdown-close
class="mb-xs-1"
name="deliveries-filter-{{ options.instanceId }}"
>
<span class="filters-horizontal__mobile-header-close-btn">
<span class="sr-only">{{ translate('Close %s filter settings', filters.deliveriesFilter.name) }}</span>
{{ icon('icon-x', {
size: 'l',
classNames: ['d-block'],
ariaHidden: 'true'
}) }}
</span>
</h-dropdown-close>
{{ separator({ size: 's', noMargin: true }) }}
</header>
<filters-group filter-parent="filters-{{ options.instanceId }}">
<div class="filters-horizontal__dropdown-content">
<filter-multiple class="filters-vertical__filter">
{{ multiple_filter(filters.deliveriesFilter, options) }}
</filter-multiple>
</div>
{{
filter_horizontal_action({
dropdownName: 'deliveries-filter-' ~ options.instanceId,
dropdownId: 'deliveries-filter-' ~ options.instanceId
})
}}
</filters-group>
</h-dropdown-content>
</h-dropdown>
</div>
{% endif %}
{% if filters.ratesFilter %}
{% set isActive = filters.ratesFilter.isActive %}
{% set ariaLabel = isActive ?
translate('%s, selected filter options: %s, Set filter', [filters.ratesFilter.name, 1]) :
translate('Set filter: %s', filters.ratesFilter.name)
%}
<div class="filters-horizontal__filter">
<h-dropdown name="rates-filter-{{ options.instanceId }}" direction="bottom-left">
<h-dropdown-toggler
id="rates-filter-{{ options.instanceId }}"
name="rates-filter-{{ options.instanceId }}"
aria-label="{{ ariaLabel }}"
>
{{
filter_horizontal_toggler({
name: filters.ratesFilter.name,
isActive,
activeFilterCount: 1
})
}}
</h-dropdown-toggler>
<h-dropdown-content class="dropdown__content_no-padding" name="rates-filter-{{ options.instanceId }}">
<header class="filters-horizontal__mobile-header visible-xs-only">
<h-dropdown-close
class="mb-xs-1"
name="rates-filter-{{ options.instanceId }}"
>
<span class="filters-horizontal__mobile-header-close-btn">
<span class="sr-only">{{ translate('Close %s filter settings', filters.ratesFilter.name) }}</span>
{{ icon('icon-x', {
size: 'l',
classNames: ['d-block'],
ariaHidden: 'true'
}) }}
</span>
</h-dropdown-close>
{{ separator({ size: 's', noMargin: true }) }}
</header>
<filters-group filter-parent="filters-{{ options.instanceId }}">
<div class="filters-horizontal__dropdown-content">
<filter-single class="filters-vertical__filter">
{{ rates_filter(filters.ratesFilter.values, options) }}
</filter-single>
</div>
{{
filter_horizontal_action({
dropdownName: 'rates-filter-' ~ options.instanceId,
dropdownId: 'rates-filter-' ~ options.instanceId
})
}}
</filters-group>
</h-dropdown-content>
</h-dropdown>
</div>
{% endif %}
{% if filters.newsFilter %}
{% set isActive = filters.newsFilter.isActive %}
{% set ariaLabel = isActive ?
translate('%s, selected filter options: %s, Set filter', [filters.newsFilter.name, 1]) :
translate('Set filter: %s', filters.newsFilter.name)
%}
<div class="filters-horizontal__filter">
<h-dropdown name="news-filter-{{ options.instanceId }}" direction="bottom-left">
<h-dropdown-toggler
id="news-filter-{{ options.instanceId }}"
name="news-filter-{{ options.instanceId }}"
aria-label="{{ ariaLabel }}"
>
{{
filter_horizontal_toggler({
name: filters.newsFilter.name,
isActive,
activeFilterCount: 1
})
}}
</h-dropdown-toggler>
<h-dropdown-content class="dropdown__content_no-padding" name="news-filter-{{ options.instanceId }}">
<header class="filters-horizontal__mobile-header visible-xs-only">
<h-dropdown-close
class="mb-xs-1"
name="news-filter-{{ options.instanceId }}"
>
<span class="filters-horizontal__mobile-header-close-btn">
<span class="sr-only">{{ translate('Close %s filter settings', filters.newsFilter.name) }}</span>
{{ icon('icon-x', {
size: 'l',
classNames: ['d-block'],
ariaHidden: 'true'
}) }}
</span>
</h-dropdown-close>
{{ separator({ size: 's', noMargin: true }) }}
</header>
<filters-group filter-parent="filters-{{ options.instanceId }}">
<div class="filters-horizontal__dropdown-content">
<filter-single class="filters-vertical__filter">
{{ single_filter(filters.newsFilter, options) }}
</filter-single>
</div>
{{
filter_horizontal_action({
dropdownName: 'news-filter-' ~ options.instanceId,
dropdownId: 'news-filter-' ~ options.instanceId
})
}}
</filters-group>
</h-dropdown-content>
</h-dropdown>
</div>
{% endif %}
{% if filters.promotionsFilter %}
{% set isActive = filters.promotionsFilter.isActive %}
{% set ariaLabel = isActive ?
translate('%s, selected filter options: %s, Set filter', [filters.promotionsFilter.name, 1]) :
translate('Set filter: %s', filters.promotionsFilter.name)
%}
<div class="filters-horizontal__filter">
<h-dropdown name="promotions-filter-{{ options.instanceId }}" direction="bottom-left">
<h-dropdown-toggler
id="promotions-filter-{{ options.instanceId }}"
name="promotions-filter-{{ options.instanceId }}"
aria-label="{{ ariaLabel }}"
>
{{
filter_horizontal_toggler({
name: filters.promotionsFilter.name,
isActive,
activeFilterCount: 1
})
}}
</h-dropdown-toggler>
<h-dropdown-content class="dropdown__content_no-padding" name="promotions-filter-{{ options.instanceId }}">
<header class="filters-horizontal__mobile-header visible-xs-only">
<h-dropdown-close
class="mb-xs-1"
name="promotions-filter-{{ options.instanceId }}"
>
<span class="filters-horizontal__mobile-header-close-btn">
<span class="sr-only">{{ translate('Close %s filter settings', filters.promotionsFilter.name) }}</span>
{{ icon('icon-x', {
size: 'l',
classNames: ['d-block'],
ariaHidden: 'true'
}) }}
</span>
</h-dropdown-close>
{{ separator({ size: 's', noMargin: true }) }}
</header>
<filters-group filter-parent="filters-{{ options.instanceId }}">
<div class="filters-horizontal__dropdown-content">
<filter-single class="filters-vertical__filter">
{{ single_filter(filters.promotionsFilter, options) }}
</filter-single>
</div>
{{
filter_horizontal_action({
dropdownName: 'promotions-filter-' ~ options.instanceId,
dropdownId: 'promotions-filter-' ~ options.instanceId
})
}}
</filters-group>
</h-dropdown-content>
</h-dropdown>
</div>
{% endif %}
</div>
{% if activeFilters|length > 0 %}
{{
active_filter_tags(activeFilters, {
baseUrl: filters.baseUrl,
currency: currency,
isFiltersSubcategoriesWcagFlagEnabled: options.isFiltersSubcategoriesWcagFlagEnabled,
activeFiltersHeaderId,
contextId: activeFilters|length == 1 ? filtersHeaderId : activeFiltersHeaderId,
})
}}
{% endif %}
</filters-aggregator>
{% else %}
<filters-aggregator class="filters filters-horizontal mb-xs-2" id="filters-{{ options.instanceId }}" active-filters="{{ activeFilters|json_encode }}" base-url="{{ filters.baseUrl }}">
<header class="secondary-header secondary-header_m">
{{ translate('Filters') }}
</header>
<div class="filters-horizontal__content">
{% if filters.priceFilter %}
<div class="filters-horizontal__filter">
<h-dropdown name="price-filter-{{ options.instanceId }}" direction="bottom-left">
<h-dropdown-toggler name="price-filter-{{ options.instanceId }}">
{{
filter_horizontal_toggler({
name: filters.priceFilter.name,
isActive: filters.priceFilter.priceFrom or filters.priceFilter.priceTo,
activeFilterCount: 1
})
}}
</h-dropdown-toggler>
<h-dropdown-content class="dropdown__content_no-padding" name="price-filter-{{ options.instanceId }}">
<filters-group filter-parent="filters-{{ options.instanceId }}">
<div class="filters-horizontal__dropdown-content">
<filter-price is-active="{{ filters.priceFilter.isActive }}">
<div class="grid__row">
<div class="grid__col grid__col_xs-grow">
<div class="control">
<div class="control__label">
<label class="label" for="{{ filters.priceFilter.priceFromUrlKey }}-{{ options.instanceId }}">
{{ translate('Price from') }}
</label>
</div>
<div class="control__content">
<div class="control__element">
<label class="input">
<input
name="{{ filters.priceFilter.priceFromUrlKey }}"
id="{{ filters.priceFilter.priceFromUrlKey }}-{{ options.instanceId }}"
type="text"
class="input__control"
value="{{ filters.priceFilter.priceFrom }}">
<span class="input__unit">{{ currency.symbol }}</span>
</label>
</div>
</div>
</div>
</div>
<div class="grid__col grid__col_xs-grow">
<div class="control">
<div class="control__label">
<label class="label" for="{{ filters.priceFilter.priceToUrlKey }}-{{ options.instanceId }}">
{{ translate('Price up to') }}
</label>
</div>
<div class="control__content">
<div class="control__element">
<label class="input">
<input
name="{{ filters.priceFilter.priceToUrlKey }}"
id="{{ filters.priceFilter.priceToUrlKey }}-{{ options.instanceId }}"
type="text"
class="input__control"
value="{{ filters.priceFilter.priceTo }}">
<span class="input__unit">{{ currency.symbol }}</span>
</label>
</div>
</div>
</div>
</div>
</div>
</filter-price>
</div>
<div class="filters-horizontal__dropdown-actions">
<h-dropdown-close name="price-filter-{{ options.instanceId }}">
<span class="btn btn_outline btn_xs">{{ translate('Cancel') }}</span>
</h-dropdown-close>
<filters-apply>
<a class="btn btn_primary btn_xs">{{ translate('Apply filters') }}</a>
</filters-apply>
</div>
</filters-group>
</h-dropdown-content>
</h-dropdown>
</div>
{% endif %}
{% if filters.producersFilter %}
<div class="filters-horizontal__filter">
<h-dropdown name="producers-filter-{{ options.instanceId }}" direction="bottom-left">
<h-dropdown-toggler name="producers-filter-{{ options.instanceId }}">
{{
filter_horizontal_toggler({
name: filters.producersFilter.name,
isActive: filters.producersFilter.isActive,
activeFilterCount: producersActiveFilters|length
})
}}
</h-dropdown-toggler>
<h-dropdown-content class="dropdown__content_no-padding" name="producers-filter-{{ options.instanceId }}">
<filters-group filter-parent="filters-{{ options.instanceId }}">
<div class="filters-horizontal__dropdown-content">
<filter-multiple class="filters-vertical__filter">
{{ multiple_filter(filters.producersFilter, options) }}
</filter-multiple>
</div>
{{
filter_horizontal_action({
dropdownName: 'producers-filter-' ~ options.instanceId
})
}}
</filters-group>
</h-dropdown-content>
</h-dropdown>
</div>
{% endif %}
{% if filters.collectionsFilter %}
<div class="filters-horizontal__filter">
<h-dropdown name="collections-filter-{{ options.instanceId }}" direction="bottom-left">
<h-dropdown-toggler name="collections-filter-{{ options.instanceId }}">
{{
filter_horizontal_toggler({
name: filters.collectionsFilter.name,
isActive: filters.collectionsFilter.isActive,
activeFilterCount: collectionsActiveFilters|length
})
}}
</h-dropdown-toggler>
<h-dropdown-content class="dropdown__content_no-padding" name="collections-filter-{{ options.instanceId }}">
<filters-group filter-parent="filters-{{ options.instanceId }}">
<div class="filters-horizontal__dropdown-content">
<filter-multiple class="filters-vertical__filter">
{{ multiple_filter(filters.collectionsFilter, options) }}
</filter-multiple>
</div>
{{
filter_horizontal_action({
dropdownName: 'collections-filter-' ~ options.instanceId
})
}}
</filters-group>
</h-dropdown-content>
</h-dropdown>
</div>
{% endif %}
{% if filters.optionsFilter %}
{% for optionGroupFilter in filters.optionsFilter %}
{% set optionGroupActiveFilters = optionGroupFilter.values|filter(filter => filter.isActive == 1) %}
<div class="filters-horizontal__filter">
<h-dropdown name="options-filter-{{ optionGroupFilter.optionId }}-{{ options.instanceId }}" direction="bottom-left">
<h-dropdown-toggler name="options-filter-{{ optionGroupFilter.optionId }}-{{ options.instanceId }}">
{{
filter_horizontal_toggler({
name: optionGroupFilter.name,
isActive: optionGroupFilter.isActive,
activeFilterCount: optionGroupActiveFilters|length
})
}}
</h-dropdown-toggler>
<h-dropdown-content class="dropdown__content_no-padding" name="options-filter-{{ optionGroupFilter.optionId }}-{{ options.instanceId }}">
<filters-group filter-parent="filters-{{ options.instanceId }}">
<div class="filters-horizontal__dropdown-content">
<filter-multiple class="filters-vertical__filter">
{{ multiple_filter(optionGroupFilter, options) }}
</filter-multiple>
</div>
{{
filter_horizontal_action({
dropdownName: 'options-filter-' ~ optionGroupFilter.optionId ~ '- ' ~ options.instanceId
})
}}
</filters-group>
</h-dropdown-content>
</h-dropdown>
</div>
{% endfor %}
{% endif %}
{% if filters.attributesFilter %}
{% for attributesGroupFilter in filters.attributesFilter %}
{% set attributesGroupActiveFilters = attributesGroupFilter.values|filter(filter => filter.isActive == 1) %}
<div class="filters-horizontal__filter">
<h-dropdown name="options-filter-{{ attributesGroupFilter.attributeId }}-{{ options.instanceId }}" direction="bottom-left">
<h-dropdown-toggler name="options-filter-{{ attributesGroupFilter.attributeId }}-{{ options.instanceId }}">
{{
filter_horizontal_toggler({
name: attributesGroupFilter.name,
isActive: attributesGroupFilter.isActive,
activeFilterCount: attributesGroupActiveFilters|length
})
}}
</h-dropdown-toggler>
<h-dropdown-content class="dropdown__content_no-padding" name="options-filter-{{ attributesGroupFilter.attributeId }}-{{ options.instanceId }}">
<filters-group filter-parent="filters-{{ options.instanceId }}">
<div class="filters-horizontal__dropdown-content">
{% if attributesGroupFilter.isSingleChoiceOnly %}
<filter-single class="filters-vertical__filter">
{{ single_filter(attributesGroupFilter, options) }}
</filter-single>
{% else %}
<filter-multiple class="filters-vertical__filter">
{{ multiple_filter(attributesGroupFilter, options) }}
</filter-multiple>
{% endif %}
</div>
{{
filter_horizontal_action({
dropdownName: 'options-filter-' ~ attributesGroupFilter.attributeId ~ '- ' ~ options.instanceId
})
}}
</filters-group>
</h-dropdown-content>
</h-dropdown>
</div>
{% endfor %}
{% endif %}
{% if filters.availabilitiesFilter %}
<div class="filters-horizontal__filter">
<h-dropdown name="availabilities-filter-{{ options.instanceId }}" direction="bottom-left">
<h-dropdown-toggler name="availabilities-filter-{{ options.instanceId }}">
{{
filter_horizontal_toggler({
name: filters.availabilitiesFilter.name,
isActive: filters.availabilitiesFilter.isActive,
activeFilterCount: availabilitiesActiveFilters|length
})
}}
</h-dropdown-toggler>
<h-dropdown-content class="dropdown__content_no-padding" name="availabilities-filter-{{ options.instanceId }}">
<filters-group filter-parent="filters-{{ options.instanceId }}">
<div class="filters-horizontal__dropdown-content">
<filter-multiple class="filters-vertical__filter">
{{ multiple_filter(filters.availabilitiesFilter, options) }}
</filter-multiple>
</div>
{{
filter_horizontal_action({
dropdownName: 'availabilities-filter-' ~ options.instanceId
})
}}
</filters-group>
</h-dropdown-content>
</h-dropdown>
</div>
{% endif %}
{% if filters.deliveriesFilter %}
<div class="filters-horizontal__filter">
<h-dropdown name="deliveries-filter-{{ options.instanceId }}" direction="bottom-left">
<h-dropdown-toggler name="deliveries-filter-{{ options.instanceId }}">
{{
filter_horizontal_toggler({
name: filters.deliveriesFilter.name,
isActive: filters.deliveriesFilter.isActive,
activeFilterCount: deliveriesActiveFilters|length
})
}}
</h-dropdown-toggler>
<h-dropdown-content class="dropdown__content_no-padding" name="deliveries-filter-{{ options.instanceId }}">
<filters-group filter-parent="filters-{{ options.instanceId }}">
<div class="filters-horizontal__dropdown-content">
<filter-multiple class="filters-vertical__filter">
{{ multiple_filter(filters.deliveriesFilter, options) }}
</filter-multiple>
</div>
{{
filter_horizontal_action({
dropdownName: 'deliveries-filter-' ~ options.instanceId
})
}}
</filters-group>
</h-dropdown-content>
</h-dropdown>
</div>
{% endif %}
{% if filters.ratesFilter %}
<div class="filters-horizontal__filter">
<h-dropdown name="rates-filter-{{ options.instanceId }}" direction="bottom-left">
<h-dropdown-toggler name="rates-filter-{{ options.instanceId }}">
{{
filter_horizontal_toggler({
name: filters.ratesFilter.name,
isActive: filters.ratesFilter.isActive,
activeFilterCount: 1
})
}}
</h-dropdown-toggler>
<h-dropdown-content class="dropdown__content_no-padding" name="rates-filter-{{ options.instanceId }}">
<filters-group filter-parent="filters-{{ options.instanceId }}">
<div class="filters-horizontal__dropdown-content">
<filter-single class="filters-vertical__filter">
{{ rates_filter(filters.ratesFilter.values, options) }}
</filter-single>
</div>
{{
filter_horizontal_action({
dropdownName: 'rates-filter-' ~ options.instanceId
})
}}
</filters-group>
</h-dropdown-content>
</h-dropdown>
</div>
{% endif %}
{% if filters.newsFilter %}
<div class="filters-horizontal__filter">
<h-dropdown name="news-filter-{{ options.instanceId }}" direction="bottom-left">
<h-dropdown-toggler name="news-filter-{{ options.instanceId }}">
{{
filter_horizontal_toggler({
name: filters.newsFilter.name,
isActive: filters.newsFilter.isActive,
activeFilterCount: 1
})
}}
</h-dropdown-toggler>
<h-dropdown-content class="dropdown__content_no-padding" name="news-filter-{{ options.instanceId }}">
<filters-group filter-parent="filters-{{ options.instanceId }}">
<div class="filters-horizontal__dropdown-content">
<filter-single class="filters-vertical__filter">
{{ single_filter(filters.newsFilter, options) }}
</filter-single>
</div>
{{
filter_horizontal_action({
dropdownName: 'news-filter-' ~ options.instanceId
})
}}
</filters-group>
</h-dropdown-content>
</h-dropdown>
</div>
{% endif %}
{% if filters.promotionsFilter %}
<div class="filters-horizontal__filter">
<h-dropdown name="promotions-filter-{{ options.instanceId }}" direction="bottom-left">
<h-dropdown-toggler name="promotions-filter-{{ options.instanceId }}">
{{
filter_horizontal_toggler({
name: filters.promotionsFilter.name,
isActive: filters.promotionsFilter.isActive,
activeFilterCount: 1
})
}}
</h-dropdown-toggler>
<h-dropdown-content class="dropdown__content_no-padding" name="promotions-filter-{{ options.instanceId }}">
<filters-group filter-parent="filters-{{ options.instanceId }}">
<div class="filters-horizontal__dropdown-content">
<filter-single class="filters-vertical__filter">
{{ single_filter(filters.promotionsFilter, options) }}
</filter-single>
</div>
{{
filter_horizontal_action({
dropdownName: 'promotions-filter-' ~ options.instanceId
})
}}
</filters-group>
</h-dropdown-content>
</h-dropdown>
</div>
{% endif %}
</div>
{% if activeFilters|length > 0 %}
{{
active_filter_tags(activeFilters, {
baseUrl: filters.baseUrl,
currency: currency
})
}}
{% endif %}
</filters-aggregator>
{% endif %}
{% endmacro %}
Object Api methods reference¶
Object Api objects reference¶
Used macros¶
- icon
- multiple_filter
- single_filter
- rates_filter
- filter_horizontal_toggler
- filter_horizontal_action
- active_filter_tags
Used webcomponents¶
- filters-aggregator
- h-dropdown
- filters-group
- filter-price
- filters-apply
- filter-multiple
- filter-single