Skip to content

filter_horizontal_toggler

The filter_horizontal_toggler macro is used to render a toggler for horizontal filters.

Definition

{% filter_horizontal_toggler(options) %}

Input parameters

options

object represents an object of filter horizontal toggler options attributes

Option key Type Default Required
options.name number - yes Name of the filter
options.isActive boolean - yes If a filter is active this variable should be set to true, otherwise false
options.activeFilterCount number - yes A number of currently active filters

Example

We want to render a toggler for producers filter. To get filters, we use a method from Object Api - getFilters(). Then we check if producers filter is available. We get a number of active filters and pass necessary variables to a macro.

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

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

{% if filters.producersFilter %}
    {% set producersActiveFilters = filters.producersFilter.values|filter(filter => filter.isActive == 1) %}

    {{
        filter_horizontal_toggler({
            name: filters.producersFilter.name,
            isActive: filters.producersFilter.isActive,
            activeFilterCount: producersActiveFilters|length
        })
    }}
{% endif %}

Macro source code

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

    <span class="btn btn_xs btn_outline">
        <span class="filters-horizontal__filter-header font_normal{% if options.isActive %} filters-horizontal__filter-header_active{% endif %}">{{ options.name }}</span>

        <span class="indicator indicator_static indicator_secondary ml-xs-1{% if not options.isActive %} visible-hidden{% endif %}" data-value="{{ options.activeFilterCount }}"></span>

        {{ icon('icon-chevron-down', {
            classNames: ['btn__icon', 'btn__icon_right']
        }) }}
    </span>
{% endmacro %}

Used macros

Used styles