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 %}

<s-filters lazy>
    <filters-vertical id="filters-{{ moduleInstance }}">
        {% 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">
                        <filters-vertical-opener id="filters-{{ moduleInstance }}" class="btn btn_secondary btn_xs">
                            <span class="indicator indicator_static indicator_secondary" data-value="{{ filters.activeFiltersCount }}"></span>

                            {{ translate('Filters') }}
                        </filters-vertical-opener>
                    </div>

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

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

                    {{ translate('Filters') }}
                </filters-vertical-opener>
            {% endif %}

            {{
                filter_options(filters, currency, moduleConfig|merge({
                    instanceId: moduleInstance,
                    categoryId: category_id,
                    title,
                    hasFilters,
                    hasFiltersAndSubcategories,
                    hasOnlySubcategories,
                    hasOnlyFilter
                }))
            }}
        {% endif %}
    </filters-vertical>
</s-filters>

Macros reference

• icon
• filter_options

Used Object Api methods

• getFilters()
• getShopCurrency()

Used styles

• Buttons
• Indicators
• Icons
• Button Icons
• Grid
• Responsiveness

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": "shouldHideEmptyFilters",
                "label": "Hide empty options in the filter",
                "defaultValue": 0
            },
            {
                "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."
            }
        ]
    }
]