Skip to content

Filter Options

Use filter_options to render a list of available filters for a list.

Configuration parameters

showCounters

number either 1 or 0. If set to 1 the counters of the filters will be shown.

title

string a title of the module. If not specified no title will be displayed.

Module source code

{% from "@macros/filter_options.twig" import filter_options %}
{% from "@macros/icon.twig" import icon %}
{% from "@macros/filter_subcategories_slider.twig" import filter_subcategories_slider %}

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

{% set hasFilters = false %}
{% if filters.priceFilter or filters.producersFilter or filters.collectionsFilter or filters.optionsFilter|length > 0 or filters.attributesFilter|length > 0 or filters.availabilitiesFilter or filters.deliveriesFilter or filters.ratesFilter or filters.newsFilter or filters.promotionsFilter %}
    {% set hasFilters = true %}
{% endif %}

{% if filters.categoriesFilter and hasFilters  %}
    {% set hasFiltersAndSubcategories = true %}
{% elseif filters.categoriesFilter and not hasFilters %}
    {% set hasOnlySubcategories = true %}
{% else %}
    {% set hasOnlyFilter = true %}
{% endif %}

{% if hasFiltersAndSubcategories  %}
    {% set title = translate('Subcategories and filters') %}
{% elseif hasOnlySubcategories %}
    {% set title = translate('Subcategories') %}
{% else %}
    {% set title = translate('Filters') %}
{% endif %}

{% if hasFilters or filters.categoriesFilter %}
    <div class="filter-subcategories">
        {{
            filter_subcategories_slider(filters, moduleConfig|merge({
                instanceId: moduleInstance,
            }))
        }}
    </div>

    {% if filters.activeFiltersCount > 0 %}
        <div class="grid__row grid__row_xs-vcenter visible-xs-only">
            <div class="grid__col">
                <filter-options-opener id="filter-options-{{ moduleInstance }}" class="btn btn_secondary btn_xs">
                    <span class="indicator indicator_static indicator_secondary" data-value="{{ filters.activeFiltersCount }}"></span>

                    {{ translate('Filters') }}
                </filter-options-opener>
            </div>

            <div class="grid__col">
                <a href="{{ filters.baseUrl }}" class="filter-options__clear-filter">
                    {{ icon('icon-x', {
                        size: 'm',
                        classNames: 'icon_link'
                    }) }}

                    {{ translate('Clear filters') }}
                </a>
            </div>
        </div>
    {% else %}
        <filter-options-opener id="filter-options-{{ moduleInstance }}" class="btn btn_outline btn_xs visible-xs-only">
            {{ icon('icon-sliders', {
                classNames: ['btn__icon', 'btn__icon_left']
            }) }}

            {{ translate('Filters') }}
        </filter-options-opener>
    {% endif %}

    {{
        filter_options(filters, currency, moduleConfig|merge({
            instanceId: moduleInstance,
            categoryId: category_id,
            title,
            hasFilters,
            hasFiltersAndSubcategories,
            hasOnlySubcategories,
            hasOnlyFilter
        }))
    }}
{% endif %}

Macros reference

Used Object Api methods

Used styles

Module configuration schema

[
    {
        "state": "unfolded",
        "label": "General settings",
        "elements": [
            {
                "type": "infobox",
                "name": "infobox",
                "options": {
                    "type": "blank",
                    "message": "%s Related settings in the admin panel%s- selection of displayed filters in [the filter settings](%s)%s- changing phrases in [translations](%s)",
                    "placeholderValues": [
                        "####",
                        "\n",
                        "\/admin\/configFilters",
                        "\n",
                        "\/admin\/configLanguages"
                    ]
                }
            }
        ]
    },
    {
        "state": "unfolded",
        "label": "Subcategories",
        "elements": [
            {
                "type": "infobox",
                "name": "infobox-subcategories",
                "options": {
                    "type": "warning",
                    "message": "In the [filter settings](%s) the display of subcategories and the \"Count how many products subcategories have\" option must be enabled.",
                    "placeholderValues": [
                        "\/admin\/configFilters"
                    ]
                }
            },
            {
                "type": "checkbox",
                "name": "shouldHideEmptySubcategories",
                "label": "Hide empty subcategories",
                "defaultValue": 1
            },
            {
                "type": "checkbox",
                "name": "showSubcategoryCounters",
                "label": "Display the number of matches for each subcategory",
                "defaultValue": 1
            }
        ]
    },
    {
        "state": "unfolded",
        "label": "Filters",
        "elements": [
            {
                "type": "infobox",
                "name": "infobox-filters",
                "options": {
                    "type": "warning",
                    "message": "In the [filter settings](%s) option %sCount how many products match each option in the filter%s must be enabled.",
                    "placeholderValues": [
                        "\/admin\/configFilters",
                        "\"", 
                        "\""
                    ]
                }
            },
            {
                "type": "checkbox",
                "name": "showCounters",
                "label": "Display the number of matches for each option in the filter",
                "defaultValue": 1,
                "hint": "Available for selected filters: collections, producers, attributes, variants."
            }
        ]
    }
]