Skip to content

Shoper Storefront - Official technical documentation

Macros - Macros reference - active_filter_tags

active_filter_tags¶

The active_filter_tags macro is used to render a set of action buttons for horizontal filters.

Definition¶

{% active_filter_tags(options) %}

Input parameters¶

activeFilters¶

object represents an array of currently active filters consisting of following properties:

Option key	Type	Default	Required
activeFilters[index].label	`string`	-	yes	Name of the filter
activeFilters[index].userValue	`string`	-	yes	The `price from` or `price to` value of a filter
activeFilters[index].value	`string`	-	yes	The `price from` or `price to` value of a filter
activeFilters[index].name	`string`	-	yes	The url key of `price from` or `price to` value of a filter
activeFilters[index].urlWithFilterValueRemoved	`string`	-	yes	Url of a link with filter value removed

options¶

object represents an object of active filter tags options attributes

Option key	Type	Default	Required
options.currency	`string`	-	yes	The Current object
options.baseUrl	`string`	-	yes	The `baseUrl` property of the Filters

Example¶

We want to render active tags for all available filters. To get filters and currency, we use methods from Object Api - getFilters() and getShopCurrency(). Then we check all the filters and add a new object to the activeFilters list if a given filter exists. If some active filters are available we render then with the help of a macro.

{% from "@macros/active_filter_tags.twig" import active_filter_tags %}

{% set filters = ObjectApi.getFilters() %}
{% set currency = ObjectApi.getShopCurrency() %}

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

{% if activeFilters|length > 0 %}
    {{
        active_filter_tags(activeFilters, {
            baseUrl: filters.baseUrl,
            currency: currency
        })
    }}
{% endif %}

Macro source code¶

{% macro active_filter_tags(activeFilters, options) %}
    {% from "@macros/icon.twig" import icon %}

    <div class="filters-horizontal__active-filters tag__group">
        {% for activeFilter in activeFilters %}
            <a href="{{ activeFilter.urlWithFilterValueRemoved }}" class="tag tag_info link link_no-underline">
                <span class="color_secondary">
                    {% if activeFilter.name == 'pricefrom' %}
                        {{ translate('Price from') }}:
                    {% elseif activeFilter.name == 'priceto' %}
                        {{ translate('Price up to') }}:
                    {% else %}
                        {{ activeFilter.label }}:
                    {% endif %}
                </span>

                {{ activeFilter.userValue }}

                {% if activeFilter.name == 'pricefrom' or activeFilter.name == 'priceto' %}
                    {{ options.currency.symbol }}
                {% endif %}

                {{ icon('icon-x', {
                    size: 'm',
                    classNames: ''
                }) }}
            </a>
        {% endfor %}

        <a class="filters__clear-link" href="{{ options.baseUrl }}">
            {{ icon('icon-x', {
                size: 'm',
                classNames: 'icon_link'
            }) }}

            {{ translate('Clear filters') }}
        </a>
    </div>
{% endmacro %}

Object Api methods reference¶

Object Api objects reference¶

Used macros¶

icon

Used styles¶