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

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

Object Api methods reference

Object Api objects reference

Used macros

Used styles