Skip to content

Shoper Storefront - Official technical documentation

Webcomponents - Filters Aggregator

Filters Aggregator¶

The <filters-aggregator> webcomponent is used to manage functionality of filters.

Attributes¶

Attribute name	Type	Default	Description
`id`	string	null	Unique identifier of a webcomponent, necessary for filters-group webcomponent for further reference
`base-url`	string	null	The `baseUrl` property of the Filters
`active-filters`	TActiveFilters	null	Array of currently active filters

DOM events¶

This webcomponent listens to the following DOM events:

Example¶

In this example, code for filters has not been provided. Please refer to filters_horizontal macro or filter_options macro for further information on how to set up filters.

sourceoutput

{% 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 }}">
    // all html for filters management goes here
</filters-aggregator>

    <filters-aggregator id="filters-123">
        // all html for filters management goes here
    </filters-aggregator>

JS Objects reference¶

TActiveFilters

Object Api objects reference¶

Filters

DOM events reference¶

Macros reference¶