filter_horizontal_action¶

The filter_horizontal_action macro is used to render a set of action buttons for horizontal filters.

Definition¶

{% filter_horizontal_action(options) %}

Input parameters¶

options¶

object represents an object of Filter Horizontal Action options attributes

Option key	Type	Default	Required
options.dropdownName	`string`	-	yes	The name of the filters dropdown we want to link with the actions set

Example¶

We want to render a horizontal promotions filter. To get filters, we use a method from Object Api - getFilters(). Then we check if producers filter is available. We render the rest of the code the same as in filters_horizontal macro using the special module variable moduleInstance where necessary. The filter_horizontal_action macro is used inside the h-dropdown-content element and besides allowing to apply filters, provides a way to close a dropdown.

{% from "@macros/filter_horizontal_toggler.twig" import filter_horizontal_toggler %}
{% from "@macros/single_filter.twig" import single_filter %}
{% from "@macros/filter_horizontal_action.twig" import filter_horizontal_action %}

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

{% if filters.promotionsFilter %}
    <div class="filters-horizontal__filter">
        <h-dropdown name="promotions-filter-{{ moduleInstance }}" direction="bottom-left">
            <h-dropdown-toggler name="promotions-filter-{{ moduleInstance }}">
                {{
                    filter_horizontal_toggler({
                        name: filters.promotionsFilter.name,
                        isActive: filters.promotionsFilter.isActive,
                        activeFilterCount: 1
                    })
                }}
            </h-dropdown-toggler>

            <h-dropdown-content class="dropdown__content_no-padding" name="promotions-filter-{{ moduleInstance }}">
                <filters-group filter-parent="filters-{{ moduleInstance }}">
                    <div class="filters-horizontal__dropdown-content">
                        <filter-single class="filters-vertical__filter">
                            {{ single_filter(filters.promotionsFilter, options) }}
                        </filter-single>
                    </div>

                    {{
                        filter_horizontal_action({
                            dropdownName: 'promotions-filter-' ~ moduleInstance
                        })
                    }}
                </filters-group>
            </h-dropdown-content>
        </h-dropdown>
    </div>
{% endif %}

Macro source code¶

{% macro filter_horizontal_action(options) %}
    <filter-actions class="filters-horizontal__dropdown-actions">
        <h-dropdown-close name="{{ options.dropdownName }}">
            <span class="btn btn_outline btn_xs">{{ translate('Cancel') }}</span>
        </h-dropdown-close>

        <filters-apply>
            <a class="btn btn_primary btn_xs">{{ translate('Apply filters') }}</a>
        </filters-apply>
    </filter-actions>
{% endmacro %}