single_filter

The single_filter macro is used to render a set of single choice list filters.

Definition

{% single_filter(filter, options) %}

Input parameters

filter

Filter Filter object representing a filter to render.

options

object represents an object of single filter attributes

Option key	Type	Default	Required	Description
options.instanceId	string	""	yes	An id necessary to make a filter unique. Usually it can just be the module instance id
options.showCounters	boolean	false	no	If set to true a number of items meeting criteria of a given filter will be displayed

Example

In this example we render a simple single filter based on a news filter from Object Api on a product list view. If using the macro inside a module we can pass a moduleInstance as an instanceId parameter. As specified earlier, usually it does the job.

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

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

{{ single_filter(filters.newsFilter, {
    instanceId: moduleInstance
}) }}

Example

In this example we render a very similar single filter but this time with counters.

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

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

{{ single_filter(filters.newsFilter, {
    instanceId: moduleInstance,
    showCounters: true
}) }}

Macro source code

{% macro single_filter(filter, options) %}
    {% from "@macros/radio.twig" import radio %}

    {% if options.isFiltersSubcategoriesWcagFlagEnabled %}
        {% set filterValues = filter.values %}
        {% if options.shouldHideEmptyFilters %}
            {% set filterValues = filterValues|filter(filter => filter.counter is defined and filter.counter is not empty and filter.counter > 0) %}
        {% endif %}

        {% for filterOption in filterValues %}
            {% set showCounters = options.showCounters and filterOption.counter is defined %}

            {% if loop.first %}
                {% set clearFilterId = filterOption.urlKey ~ options.instanceId %}

                <div class="filter-control">
                    <div>
                        <div class="control">
                            {{ 
                                radio({
                                    id: clearFilterId,
                                    label: translate('Do not use this filter'),
                                    name: filterOption.urlKey,
                                    value: '',
                                    checked: not filterOption.isActive,
                                    ariaLabel: "#{translate('Do not use this filter')}, #{filter.name}"
                                }) 
                            }}
                        </div>
                    </div>
                </div>
            {% endif %}

            {% set filterId = filterOption.urlKey ~ filterOption.urlValue ~ options.instanceId %}

            <div class="{{ html_classes('filter-control', { 'filter-control_empty': showCounters and filterOption.counter <= 0 }) }}">
                <div>
                    <div class="control">
                        {{ 
                            radio({
                                id: filterId,
                                label: filterOption.name,
                                name: filterOption.urlKey,
                                value: filterOption.urlValue,
                                checked: filterOption.isActive,
                                ariaLabel: "#{filterOption.name}, #{showCounters ? translate('Number of products: %s', filterOption.counter) : ''}"
                            })
                        }}
                    </div>
                </div>

                {% if showCounters %}
                    <span aria-hidden="true" class="filter-control__counter">{{ filterOption.counter }}</span>
                {% endif %}
            </div>
        {% endfor %}
    {% else %}
        {% set filters = filter.values %}
        {% if options.shouldHideEmptyFilters %}
            {% set filters = filter.values|filter(filter => filter.counter is defined and filter.counter is not empty and filter.counter > 0) %}
        {% endif %}

        {% for filter in filters %}
            {% if loop.first %}
                {% set clearFilterId = filter.urlKey ~ options.instanceId %}

                <div class="filter-control">
                    <div>
                        <div class="control">
                            {{ 
                                radio({
                                    id: clearFilterId,
                                    label: translate('Do not use this filter'),
                                    name: filter.urlKey,
                                    value: '',
                                    checked: not filter.isActive
                                }) 
                            }}
                        </div>
                    </div>
                </div>
            {% endif %}

            {% set filterId = filter.urlKey ~ filter.urlValue ~ options.instanceId %}

            <div class="{{ html_classes('filter-control', { 'filter-control_empty': options.showCounters and filter.counter is defined and filter.counter <= 0 }) }}">
                <div>
                    <div class="control">
                        {{ 
                            radio({
                                id: filterId,
                                label: filter.name,
                                name: filter.urlKey,
                                value: filter.urlValue,
                                checked: filter.isActive
                            }) 
                        }}
                    </div>
                </div>

                {% if options.showCounters and filter.counter is defined %}
                    <span aria-label="{{ translate('Products') }} {{ filter.counter }}" class="filter-control__counter">{{ filter.counter }}</span>
                {% endif %}
            </div>
        {% endfor %}
    {% endif %}
{% endmacro %}