filter_options¶
The filter_options macro is used to render filter options from a specific set of filters.
Definition¶
Input parameters¶
filters¶
Filters object representing a set of filters we want to render.
currency¶
Currency object representing a currency currently used in the shop.
options¶
object represents an object of filter options attributes
| Option key | Type | Default | Required | Description |
|---|---|---|---|---|
| options.shouldHideEmptySubcategories | number |
- | no | If set to 1 filter subcategories with no items will be hidden |
| options.showSubcategoryCounters | number |
- | no | If set to 1 a number of products from subcategories meeting the filter's criteria will be displayed |
| options.showCounters | number |
- | no | If set to 1 a number of products from general categories meeting the filter's criteria will be displayed |
| options.title | object |
null | no | Object of keys representing languages in ISO format and values representing titles for those languages |
| options.instanceId | number |
- | yes | Unique identifier commonly provided by a special module variable moduleInstance |
Example¶
In this example we render basic filter options. To get a filter set as well as a shop currency we use methods from Object Api - getFilters() and getShopCurrency(). If using this macro inside a module we can pass a moduleInstance as an instanceId parameter.
{% from "@macros/filter_options.twig" import filter_options %}
{% set filters = ObjectApi.getFilters() %}
{% set currency = ObjectApi.getShopCurrency() %}
{{
filter_options(filters, currency, {
instanceId: moduleInstance
})
}}
Example¶
In this example we render filter options with custom configuration parameters
{% from "@macros/filter_options.twig" import filter_options %}
{% set filters = ObjectApi.getFilters() %}
{% set currency = ObjectApi.getShopCurrency() %}
{{
filter_options(filters, currency, {
shouldHideEmptySubcategories: 1,
showSubcategoryCounters: 1,
showCounters: 1,
instanceId: moduleInstance
})
}}
Macro source code¶
{% macro filter_options(filters, currency, options) %}
{% from "@macros/single_filter.twig" import single_filter %}
{% from "@macros/multiple_filter.twig" import multiple_filter %}
{% from "@macros/rates_filter.twig" import rates_filter %}
{% from "@macros/icon.twig" import icon %}
{% if options.categoryId %}
{% set category = ObjectApi.getCategory(options.categoryId) %}
{% if category %}
{% set currentCategoryName = category.name %}
{% endif %}
{% endif %}
<filter-options id="filter-options-{{ options.instanceId }}" class="filter-options" base-url="{{ filters.baseUrl }}" on-interaction>
<section class="filter-options__categories">
<div class="filter-options__header grid__row grid__row_xs-hbetween mb-xs-3">
<div class="grid__col grid__col_xs-grow">
<div class="filter-options_not-layer">
<header class="secondary-header secondary-header_m">{{ options.title }}</header>
</div>
<div class="filter-options_on-layer">
<header class="secondary-header secondary-header_m">{{ translate('Filters') }}</header>
</div>
{% if currentCategoryName %}
<p class="filter-options__in-category">{{ translate('in category') }}: {{ currentCategoryName }}</p>
{% endif %}
</div>
<div class="grid__col visible-xs-only">
<filter-options-close class="btn btn_icon">
{{ icon('icon-x', {
size: 'l',
classNames: ['btn__icon']
}) }}
</filter-options-close>
</div>
</div>
{% if filters.categoriesFilter %}
<div class="filter-options__subcategories">
{% if options.hasFiltersAndSubcategories %}
<header class="secondary-header secondary-header_s">{{ translate('Subcategories') }}</header>
{% endif %}
{% if filters.categoriesFilter.parent %}
<a class="filter-options__back-to-category-link" href="{{ filters.categoriesFilter.parent.urlWithFilters }}">
{{ icon('icon-corner-left-up', {
size: 'm'
})
}}
{{ translate('Back to') }}: {{ filters.categoriesFilter.parent.name }}
</a>
{% endif %}
{% if filters.categoriesFilter.getLimit %}
{% set limit = filters.categoriesFilter.getLimit %}
{% else %}
{% set limit = 0 %}
{% endif %}
{% set categories = filters.categoriesFilter.values|filter(category => category.name != filters.categoriesFilter.current.name) %}
{% if options.shouldHideEmptySubcategories %}
{% set categories = categories|filter(category => category.counter != 0) %}
{% endif %}
{% set categoriesLength = categories|length %}
<ul>
{% if categories|length == 0 and currentCategoryName %}
<li>
<span class="filter-options__category-link filter-options__category-link_active">
{{ currentCategoryName }}
</span>
</li>
{% endif %}
{% for category in categories %}
{% if loop.index <= limit or filter.isActive %}
<li>
<a class="filter-options__category-link" href="{{ category.urlWithFilters }}">
{{ category.name }}
{% if filters.categoriesFilter.hasCounters and category.counter and options.showSubcategoryCounters %}
<span class="filter-options__category-link-counter">{{ category.counter }}</span>
{% endif %}
</a>
</li>
{% else %}
{% if isMoreFilters != 1 %}
{% set filtersLeft = categoriesLength - loop.index0 %}
<li>
<h-toggle class="filter-options__more-filters">
<template>
{% endif %}
{% set isMoreFilters = 1 %}
<a class="filter-options__category-link" href="{{ category.urlWithFilters }}">
{{ category.name }}
{% if filters.categoriesFilter.hasCounters and category.counter and options.showCounters %}
<span class="filter-options__category-link-counter">{{ category.counter }}</span>
{% endif %}
</a>
{% if loop.index == categoriesLength %}
</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>
</li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
</div>
{% endif %}
</section>
{% if options.hasFilters %}
<section class="filter-options__filters">
{% if filters.activeFiltersCount <= 0 and not options.hasFiltersAndSubcategories %}
<filter-actions hidden>
{% endif %}
<div class="grid__row grid__row_xs-vcenter grid__row_xs-hbetween mb-xs-3">
<div class="grid__col">
<header class="filter-options__title">
<p class="secondary-header secondary-header_s p_no-margin mr-xs-1">
{% if options.hasOnlyFilter %}
{{ translate('Chosen') }}
{% else %}
<span class="filter-options_on-layer">{{ translate('Chosen') }}</span>
<span class="filter-options_not-layer">{{ translate('Filters') }}</span>
{% endif %}
</p>
{% if filters.activeFiltersCount > 0 %}
<span class="indicator indicator_static indicator_secondary" data-value="{{ filters.activeFiltersCount }}"></span>
{% endif %}
</header>
</div>
<div class="grid__col">
<clear-filters hidden class="filter-options__clear-filter">
{{ icon('icon-x', {
size: 'm',
classNames: 'icon_link'
}) }}
{{ translate('Clear') }}
</clear-filters>
</div>
</div>
{% if filters.activeFiltersCount <= 0 %}
</filter-actions>
{% endif %}
{% if filters.priceFilter %}
<section class="filter-options__filter-group">
<header class="overline overline_s">
{{ filters.priceFilter.name }}
</header>
<price-filter is-active="{{ filters.priceFilter.isActive }}">
<div class="grid__row">
<div class="grid__col grid__col_xs-grow">
<div class="control">
<div class="control__label">
<label class="label" for="{{ filters.priceFilter.priceFromUrlKey }}-{{ options.instanceId }}">
{{ translate('Price from') }}
</label>
</div>
<div class="control__content">
<div class="control__element">
<label class="input">
<input
name="{{ filters.priceFilter.priceFromUrlKey }}"
id="{{ filters.priceFilter.priceFromUrlKey }}-{{ options.instanceId }}"
type="text"
class="input__control"
value="{{ filters.priceFilter.priceFrom }}">
<span class="input__unit">{{ currency.symbol }}</span>
</label>
</div>
</div>
</div>
</div>
<div class="grid__col grid__col_xs-grow">
<div class="control">
<div class="control__label">
<label class="label" for="{{ filters.priceFilter.priceToUrlKey }}-{{ options.instanceId }}">
{{ translate('Price up to') }}
</label>
</div>
<div class="control__content">
<div class="control__element">
<label class="input">
<input
name="{{ filters.priceFilter.priceToUrlKey }}"
id="{{ filters.priceFilter.priceToUrlKey }}-{{ options.instanceId }}"
type="text"
class="input__control"
value="{{ filters.priceFilter.priceTo }}">
<span class="input__unit">{{ currency.symbol }}</span>
</label>
</div>
</div>
</div>
</div>
</div>
</price-filter>
</section>
{% endif %}
{% if filters.producersFilter %}
<section class="filter-options__filter-group">
<header class="overline overline_s">
{{ filters.producersFilter.name }}
</header>
<multiple-filter class="filter-options__filter">
{{ multiple_filter(filters.producersFilter, options) }}
</multiple-filter>
</section>
{% endif %}
{% if filters.collectionsFilter %}
<section class="filter-options__filter-group">
<header class="overline overline_s">
{{ filters.collectionsFilter.name }}
</header>
<multiple-filter class="filter-options__filter">
{{ multiple_filter(filters.collectionsFilter, options) }}
</multiple-filter>
</section>
{% endif %}
{% if filters.optionsFilter %}
{% for optionGroupFilter in filters.optionsFilter %}
<section class="filter-options__filter-group">
<header class="overline overline_s">
{{ optionGroupFilter.name }}
</header>
<multiple-filter class="filter-options__filter">
{{ multiple_filter(optionGroupFilter, options) }}
</multiple-filter>
</section>
{% endfor %}
{% endif %}
{% if filters.attributesFilter %}
{% for attributesGroupFilter in filters.attributesFilter %}
<section class="filter-options__filter-group">
<header class="overline overline_s">
{{ attributesGroupFilter.name }}
</header>
{% if attributesGroupFilter.isSingleChoiceOnly %}
<single-filter class="filter-options__filter">
{{ single_filter(attributesGroupFilter, options) }}
</single-filter>
{% else %}
<multiple-filter class="filter-options__filter">
{{ multiple_filter(attributesGroupFilter, options) }}
</multiple-filter>
{% endif %}
</section>
{% endfor %}
{% endif %}
{% if filters.availabilitiesFilter %}
<section class="filter-options__filter-group">
<header class="overline overline_s">
{{ filters.availabilitiesFilter.name }}
</header>
<multiple-filter class="filter-options__filter">
{{ multiple_filter(filters.availabilitiesFilter, options) }}
</multiple-filter>
</section>
{% endif %}
{% if filters.deliveriesFilter %}
<section class="filter-options__filter-group">
<header class="overline overline_s">
{{ filters.deliveriesFilter.name }}
</header>
<multiple-filter class="filter-options__filter">
{{ multiple_filter(filters.deliveriesFilter, options) }}
</multiple-filter>
</section>
{% endif %}
{% if filters.ratesFilter %}
<section class="filter-options__filter-group">
<header class="overline overline_s">
{{ filters.ratesFilter.name }}
</header>
<single-filter class="filter-options__filter">
{{ rates_filter(filters.ratesFilter.values, options) }}
</single-filter>
</section>
{% endif %}
{% if filters.newsFilter %}
<section class="filter-options__filter-group">
<header class="overline overline_s">
{{ filters.newsFilter.name }}
</header>
<single-filter class="filter-options__filter">
{{ single_filter(filters.newsFilter, options) }}
</single-filter>
</section>
{% endif %}
{% if filters.promotionsFilter %}
<section class="filter-options__filter-group">
<header class="overline overline_s">
{{ filters.promotionsFilter.name }}
</header>
<single-filter class="filter-options__filter">
{{ single_filter(filters.promotionsFilter, options) }}
</single-filter>
</section>
{% endif %}
</section>
{% endif %}
<filter-actions class="filter-options__actions" hidden>
<reset-filters>
<span class="btn btn_outline btn_xs">{{ translate('Cancel') }}</span>
</reset-filters>
<apply-filters>
<a class="btn btn_primary btn_xs">{{ translate('Apply filters') }}</a>
</apply-filters>
</filter-actions>
</filter-options>
{% endmacro %}