multiple_filter¶
The multiple_filter macro is used to render a set of list filters.
Definition¶
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 hasCounters = filter.hasCounters %}
{% if options.isEmptyFiltersFixEnabled %}
{% set shouldHideEmptyFilters = options.shouldHideEmptyFilters and options.showCounters and hasCounters %}
{% else %}
{% set shouldHideEmptyFilters = options.shouldHideEmptyFilters %}
{% endif %}
{% set nonZeroCounters = filter.values|default({})|filter(obj => obj.counter != 0) %}
{% set zeroCounters = filter.values|default({})|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 totalFilters = activeFilters|merge(notActiveFilters) %}
{% if shouldHideEmptyFilters %}
{% set totalFilters = totalFilters|filter(filter => filter.counter is defined and filter.counter is not empty and filter.counter > 0) %}
{% endif %}
{% if filter.getLimit %}
{% set limit = filter.getLimit %}
{% else %}
{% set limit = 0 %}
{% endif %}
<fieldset>
<legend class="sr-only">{{ filter.name }}</legend>
{% for filterOption in totalFilters %}
{% set filterId = filterOption.urlKey ~ filterOption.urlValue ~ options.instanceId %}
{% if loop.index <= limit or filterOption.isActive %}
{% if options.isEmptyFiltersFixEnabled %}
{% set showCounters = options.showCounters and filterOption.counter is defined and hasCounters %}
{% else %}
{% set showCounters = options.showCounters and filterOption.counter is defined %}
{% endif %}
<div class="{{ html_classes('filter-control', { 'filter-control_empty': showCounters and filterOption.counter <= 0 }) }}">
<div>
<div class="control">
<div class="checkbox">
{{ checkbox_control({
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) : ''}",
dataAttributes: {
'is-available': filterOption.isAvailable
}
})
}}
<div class="checkbox__content">
<label class="label label_vcenter" for={{ filterId }}>
{% if filterOption.color %}
<div style="background-color: {{ filterOption.color }}" class="color-item color-item_xs"></div>
{% endif %}
{{ filterOption.name }}
</label>
</div>
</div>
</div>
</div>
{% if showCounters %}
<span aria-hidden="true" class="filter-control__counter">{{ filterOption.counter }}</span>
{% endif %}
</div>
{% else %}
{% if isMoreFilters != 1 %}
{% set filtersLeft = loop.length - loop.index0 %}
<h-toggle class="filters__more-filters">
<template>
{% endif %}
{% set isMoreFilters = 1 %}
<div class="{{ html_classes('filter-control', { 'filter-control_empty': showCounters and filterOption.counter <= 0 }) }}">
<div>
<div class="control">
<div class="checkbox">
{{ checkbox_control({
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) : ''}",
dataAttributes: {
'is-available': filterOption.isAvailable
}
})
}}
<div class="checkbox__content">
<label class="label label_vcenter" for={{ filterId }}>
{% if filterOption.color %}
<div style="background-color: {{ filterOption.color }}" class="color-item color-item_xs"></div>
{% endif %}
{{ filterOption.name }}
</label>
</div>
</div>
</div>
</div>
{% if showCounters %}
<span aria-hidden="true" class="filter-control__counter">{{ filterOption.counter }}</span>
{% endif %}
</div>
{% if loop.index == loop.length %}
</template>
<h-toggle-btn
class="filters__expand-btn"
action="expand"
aria-label="{{ translate('Show %s more filter option', filtersLeft) }}"
>
{{ translate('More options') }} ({{ filtersLeft }})
</h-toggle-btn>
<h-toggle-btn
class="filters__collapse-btn"
action="collapse"
aria-label="{{ translate('Collapse filter options') }}"
hidden
>
{{ translate('Collapse') }}
</h-toggle-btn>
</h-toggle>
{% endif %}
{% endif %}
{% endfor %}
{% for filterOptionMobile in filters %}
{% set filterId = filterOptionMobile.urlKey ~ filterOptionMobile.urlValue ~ options.instanceId ~ "-mobile" %}
{% if loop.index > limit %}
{% if options.isEmptyFiltersFixEnabled %}
{% set showCounters = options.showCounters and filterOptionMobile.counter is defined and hasCounters %}
{% else %}
{% set showCounters = options.showCounters and filterOptionMobile.counter is defined %}
{% endif %}
<div class="{{ html_classes('visible-xs-only filter-control', { 'filter-control_empty': showCounters and filterOptionMobile.counter <= 0 }) }}">
<div>
<div class="control">
<div class="checkbox">
{{ checkbox_control({
id: filterId,
label: filterOptionMobile.name,
name: filterOptionMobile.urlKey,
value: filterOptionMobile.urlValue,
checked: filterOptionMobile.isActive,
ariaLabel: "#{filterOptionMobile.name}, #{showCounters ? translate('Number of products: %s', filterOptionMobile.counter) : ''}",
dataAttributes: {
'is-available': filterOptionMobile.isAvailable
}
})
}}
<div class="checkbox__content">
<label class="label label_vcenter" for={{ filterId }}>
{% if filterOptionMobile.color %}
<div style="background-color: {{ filterOptionMobile.color }}" class="color-item color-item_xs"></div>
{% endif %}
{{ filterOptionMobile.name }}
</label>
</div>
</div>
</div>
</div>
{% if showCounters %}
<span aria-hidden="true" class="filter-control__counter">{{ filterOptionMobile.counter }}</span>
{% endif %}
</div>
{% endif %}
{% endfor %}
</fieldset>
{% endmacro %}