Filters Group¶
The <filters-group> webcomponent is used to manage rendering of filters.
Attributes¶
| Attribute name | Type | Default | Description |
|---|---|---|---|
filter-parent |
string | null | Id of the parent filters-aggregator webcomponent |
DOM events¶
This webcomponent listens to the following DOM events:
Example¶
In this example we render a filters aggregator with a single filter group for producers filter.
{% from "@macros/multiple_filters.twig" import multiple_filters %}
{% from "@macros/filter_horizontal_action.twig" import filter_horizontal_action %}
{% set filters = ObjectApi.getFilters() %}
{% 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 id="filters-{{ moduleInstance }}" active-filters="{{ activeFilters|json_encode }}" base-url="{{ filters.baseUrl }}">
<filters-group filter-parent="filters-{{ moduleInstance }}">
<div class="filters-horizontal__dropdown-content">
<filter-multiple class="filters-vertical__filter">
{{ multiple_filter(filters.producersFilter, {
shouldHideEmptyFilters: true,
instanceId: moduleInstance,
showCounters: false
}) }}
</filter-multiple>
</div>
{{
filter_horizontal_action({
dropdownName: 'producers-filter-' ~ moduleInstance
})
}}
</filters-group>
</filters-aggregator>
<filters-aggregator id="filters-123">
<filters-group>
<div class="filters-horizontal__dropdown-content">
<filter-multiple class="filters-vertical__filter">
<div class="filter-control">
<div>
<div class="control">
<div class="checkbox">
<div class="checkbox__control">
<input
type="checkbox"
id="2-4-123"
name="producer-filter"
value="1"
autocomplete="off"
class="checkbox__input"
data-is-available="1"
/>
<label class="checkbox__label" for="2-4-123"></label>
</div>
<div class="checkbox__content">
<label class="label label_vcenter" for="2-4-123">Sony</label>
</div>
</div>
</div>
</div>
</div>
</filter-multiple>
</div>
</filters-group>
<filter-actions class="filters-horizontal__dropdown-actions">
<h-dropdown-close name="producers-filter-123">
<span class="btn btn_outline btn_xs">Cancel</span>
</h-dropdown-close>
<filters-apply>
<a class="btn btn_primary btn_xs">Apply filters</a>
</filters-apply>
</filter-actions>
</filters-aggregator>