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">
        <h3
            class="sr-only"
            tabindex="-1"
            {% if options.activeFiltersHeaderId %}id="{{ options.activeFiltersHeaderId }}"{% endif %}
        >
            {{ translate('Active filters') }}
        </h3>

        {% for activeFilter in activeFilters %}
            {% if activeFilter.name == 'pricefrom' %}
                {% set activeFilterLabel = "#{translate('Price from')}:" %}
            {% elseif activeFilter.name == 'priceto' %}
                {% set activeFilterLabel = "#{translate('Price up to')}:" %}
            {% else %}
                {% set activeFilterLabel = "#{activeFilter.label}:" %}
            {% endif %}

            {% set currency = activeFilter.name == 'pricefrom' or activeFilter.name == 'priceto' ? options.currency.symbol : '' %}

            {% set fullFilterName = "#{activeFilterLabel} #{activeFilter.userValue} #{currency}" %}

            <a
                href="{{ activeFilter.urlWithFilterValueRemoved }}"
                class="tag tag_info link link_no-underline"
                aria-label="{{ translate('Applied filter %s, clear filter', fullFilterName) }}"
                {% if options.contextId %}
                    context-target-id="{{ options.contextId }}"
                    context-keeper
                {% endif %}
            >
                <span class="color_secondary" aria-hidden="true">{{ activeFilterLabel }}</span>

                {{ activeFilter.userValue }}

                {{ currency }}

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

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

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

Object Api methods reference¶

Object Api objects reference¶

Used macros¶

icon

Used styles¶