multiple_filter

The multiple_filter macro is used to render a set of list filters.

Definition

{% multiple_filter(filter, options) %}

Input parameters

filter

Filter Filter object representing a filter to render.

options

object represents an object of 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 filter based on a collections 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/multiple_filter.twig" import multiple_filter %}

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

{{ multiple_filter(filters.collectionsFilter, {
    instanceId: moduleInstance
}) }}

Macro source code

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

    {% set nonZeroCounters = filter.values|filter(obj => obj.counter != 0) %}
    {% set zeroCounters = filter.values|filter(obj => obj.counter == 0) %}
    {% set preFilters = nonZeroCounters | merge(zeroCounters) %}

    {% set activeFilters = preFilters|filter(filter => filter.isActive == 1) %}
    {% set notActiveFilters = preFilters|filter(filter => filter.isActive != 1) %}
    {% set filters = activeFilters|merge(notActiveFilters) %}

    {% if filter.getLimit %}
        {% set limit = filter.getLimit %}
    {% else %}
        {% set limit = 0 %}
    {% endif %}

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

        {% if loop.index <= limit or filter.isActive %}
            <div class="{{ html_classes('filter-control', { 'filter-control_empty': options.showCounters and filter.counter is defined and filter.counter <= 0 }) }}">
                <div>
                    <div class="control">
                        <div class="checkbox">
                            {{ checkbox_control({
                                    id: filterId,
                                    label: filter.name,
                                    name: filter.urlKey,
                                    value: filter.urlValue,
                                    checked: filter.isActive,
                                    dataAttributes: {
                                        'is-available': filter.isAvailable
                                    }
                                }) 
                            }}

                            <div class="checkbox__content">
                                <label class="label label_vcenter" for={{ filterId }}>
                                    {% if filter.color %}
                                        <div style="background-color: {{ filter.color }}" class="color-item color-item_xs"></div>
                                    {% endif %}

                                    {{ filter.name }}
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                {% if options.showCounters and filter.counter is defined %}
                    <span class="filter-control__counter">{{ filter.counter }}</span>
                {% endif %}
            </div>
        {% else %}
            {% if isMoreFilters != 1 %}
                {% set filtersLeft = loop.length - loop.index0 %}
                <h-toggle class="filter-options__more-filters">
                    <template>
            {% endif %}
                        {% set isMoreFilters = 1 %}

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

                                        <div class="checkbox__content">
                                            <label class="label label_vcenter" for={{ filterId }}>
                                                {% if filter.color %}
                                                    <div style="background-color: {{ filter.color }}" class="color-item color-item_xs"></div>
                                                {% endif %}

                                                {{ filter.name }}
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {% if options.showCounters and filter.counter is defined %}
                                <span class="filter-control__counter">{{ filter.counter }}</span>
                            {% endif %}
                        </div>

            {% if loop.index == loop.length %}   
                    </template>

                    <h-toggle-btn class="filter-options__expand-btn" action="expand">{{ translate('More options') }} ({{ filtersLeft }})</h-toggle-btn>
                    <h-toggle-btn class="filter-options__collapse-btn"  action="collapse" hidden>{{ translate('Collapse') }}</h-toggle-btn>
                </h-toggle>
            {% endif %}
        {% endif %}
    {% endfor %}
{% endmacro %}