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 %}
    {% from "@macros/filter_counter.twig" import filter_counter %}
    {% from "@macros/filter_counter_attributes.twig" import filter_counter_attributes %}

    {% set isCountersLoadedAsync = options.isCountersLoadedAsync %}

    {% set showCounters = options.showCounters and (isCountersLoadedAsync or filter.hasCounters) %}

    {% set filterValues = filter.values %}
    {% if options.shouldHideEmptyFilters and not isCountersLoadedAsync %}
        {% 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 (isCountersLoadedAsync or 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 not isCountersLoadedAsync and filterOption.counter <= 0 }) }}" {{ filter_counter_attributes(filterOption, options, options.shouldHideEmptyFilters) }}>
            <div>
                <div class="control">
                    {{
                        radio({
                            id: filterId,
                            label: filterOption.name,
                            name: filterOption.urlKey,
                            value: filterOption.urlValue,
                            checked: filterOption.isActive,
                            ariaLabel: isCountersLoadedAsync and options.showCounters ? filterOption.name : "#{filterOption.name}, #{showCounters ? translate('Number of products: %s', filterOption.counter) : ''}"
                        })
                    }}
                </div>
            </div>

            {% if showCounters %}
                {{ filter_counter(filterOption.counter, options) }}
            {% endif %}
        </div>
    {% endfor %}
{% endmacro %}