Skip to content

filters_subcategories

The filters_subcategories macro is used to render subcategories filters for given categories.

Definition

{% filters_subcategories(categoriesFilter, options) %}

Input parameters

categoriesFilter

CategoriesFilter object representing a set of categories filter we want to render the subcategories for.

options

object represents an object of filter subcategories options attributes

Option key Type Default Required Description
options.shouldHideEmptySubcategories boolean - yes If set to true empty subcategories will not be displayed
options.hasFiltersAndSubcategories boolean - yes If there are other filters displayed besides categories filter this should be set to true
options.showSubcategoryCounters boolean - yes If set to true the counters for subcategories will be displayed

Example

To get filters, we use a method from Object Api - getFilters(). Then we check if any filters besides categories filter are available to finally set up a hasFiltersAndSubcategories variable. Then we render a macro of filters subcategories.

{% from "@macros/filters_subcategories.twig" import filters_subcategories %}

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

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

{{
    filters_subcategories(filters.categoriesFilter, {
        shouldHideEmptySubcategories: true,
        hasFiltersAndSubcategories,
        showSubcategoryCounters: true
    })
}}

Macro source code

{% macro filters_subcategories(categoriesFilter, options) %}
    {% from "@macros/icon.twig" import icon %}

    {% if categoriesFilter  %}
        {% set categories = categoriesFilter.values|filter(category => category.name != categoriesFilter.current.name) %}

        {% if options.shouldHideEmptySubcategories %}
            {% set categories = categories|filter(category => category.counter != 0) %}
        {% endif %}

        {% if options.isFiltersSubcategoriesWcagFlagEnabled  %}
            <nav
                class="{{ html_classes('filters-subcategories', { 'mb-xs-2': options.hasFiltersAndSubcategories }) }}"
                aria-label="{{ translate('Menu') }} {{ translate('Subcategories') }}"
            >
                <h2 class="secondary-header secondary-header_m">
                    {{ translate('Subcategories') }}
                </h2>

                <ul class="filters-subcategories__list">
                    {% if categoriesFilter.parent %}
                        <li class="filters-subcategories__category">
                            <a
                                class="btn btn_secondary btn_xs"
                                href="{{ categoriesFilter.parent.urlWithFilters }}"
                                aria-label="{{ translate('Back to category: %s', categoriesFilter.parent.name) }}"
                            >
                                {{
                                icon('icon-chevron-left', {
                                    size: 'm',
                                    classNames: ['btn__icon', 'btn__icon_left']
                                })
                                }}

                                {{ categoriesFilter.parent.name }}
                            </a>
                        </li>
                    {% endif %}

                    {% for category in categories %}
                        {% set ariaLabel = translate('Subcategory: %s', category.name) %}

                        {% set showCounters = categoriesFilter.hasCounters and category.counter and options.showSubcategoryCounters %}
                        {% if showCounters %}
                            {% set ariaLabel = "#{ariaLabel}, #{translate('Number of products: %s', category.counter)}" %}
                        {% endif %}

                        <li class="filters-subcategories__category">
                            <a
                                class="btn btn_outline btn_xs"
                                href="{{ category.urlWithFilters }}"
                                aria-label="{{ ariaLabel }}"
                            >
                                {{ category.name }}

                                {% if showCounters %}
                                    <span class="filters-subcategories__category-link-counter ml-xs-1">{{ category.counter }}</span>
                                {% endif %}
                            </a>
                        </li>
                    {% endfor %}
                </ul>
            </nav>
        {% else %}
            <nav class="{{ html_classes('filters-subcategories', { 'mb-xs-2': options.hasFiltersAndSubcategories }) }}">
                <header class="secondary-header secondary-header_m">
                    {{ translate('Subcategories') }}
                </header>

                <ul class="filters-subcategories__list">
                    {% if categoriesFilter.parent %}
                        <li class="filters-subcategories__category">
                            <a class="btn btn_secondary btn_xs" href="{{ categoriesFilter.parent.urlWithFilters }}">
                                {{
                                icon('icon-chevron-left', {
                                    size: 'm',
                                    classNames: ['btn__icon', 'btn__icon_left']
                                })
                                }}

                                {{ categoriesFilter.parent.name }}
                            </a>
                        </li>
                    {% endif %}

                    {% for category in categories %}
                        <li class="filters-subcategories__category">
                            <a class="btn btn_outline btn_xs" href="{{ category.urlWithFilters }}">
                                {{ category.name }}

                                {% if categoriesFilter.hasCounters and category.counter and options.showSubcategoryCounters %}
                                    <span class="filters-subcategories__category-link-counter ml-xs-1">{{ category.counter }}</span>
                                {% endif %}
                            </a>
                        </li>
                    {% endfor %}
                </ul>
            </nav>
        {% endif %}
    {% endif %}
{% endmacro %}

Object Api methods reference

Object Api objects reference

Used macros

Used styles