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.isEmptyFiltersFixEnabled %}
        {% set showCounters = options.showCounters and filter.hasCounters %}
    {% else %}
        {% set showCounters = options.showCounters %}
    {% endif %}

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