Filter Multiple

The <filter-multiple> webcomponent is used to manage multiple filters.

DOM events

This webcomponent dispatches the following DOM events:

• addFilter
• removeFilter

Example

sourceoutput

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

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

    <filter-multiple class="filters-vertical__filter">
        {{ multiple_filter(filters.producersFilter, {
            shouldHideEmptyFilters: true,
            instanceId: moduleInstance,
            showCounters: false
        }) }}
    </filter-multiple>

    <filter-multiple class="filters-vertical__filter">
        <div class="filter-control">
            <div>
                <div class="control">
                    <div class="checkbox">
                        <div class="checkbox__control">
                            <input
                                type="checkbox"
                                id="2-4-123"
                                name="producer-filter"
                                value="1"
                                autocomplete="off"
                                class="checkbox__input"
                                data-is-available="1"
                            />
                            <label class="checkbox__label" for="2-4-123"></label>
                        </div>
                        <div class="checkbox__content">
                            <label class="label label_vcenter" for="2-4-123">Sony</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </filter-multiple>

Macros reference

• multiple_filter

DOM events reference

• addFilter
• removeFilter