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 %}
{% 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 %}
<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>
{% 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