Filter Single

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

DOM events

This webcomponent dispatches the following DOM events:

• updateFilter
• removeFilter

Example

In this example we render a promotions filter.

sourceoutput

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

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

    <filter-single class="filters-vertical__filter">
        {{ single_filter(filters.promotionsFilter, {
            shouldHideEmptyFilters: true,
            instanceId: moduleInstance,
            showCounters: false
        }) }}
    </filter-single>

    <filter-single class="filters-vertical__filter">
        <div class="filter-control">
            <div>
                <div class="control">
                    <div class="radio">
                        <div class="radio__control">
                            <input
                                type="radio"
                                id="123"
                                name="1"
                                value="1"
                                class="radio__input"
                                aria-checked="true"
                                checked
                            />
                            <label class="radio__label" for="123"></label>
                        </div>
                        <div class="radio__content">
                            <label class="label" for="123">
                                Do not use this filter
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="filter-control">
            <div>
                <div class="control">
                    <div class="radio">
                        <div class="radio__control">
                            <input
                                type="radio"
                                id="124"
                                name="2"
                                value="11"
                                class="radio__input"
                            />
                            <label class="radio__label" for="124"></label>
                        </div>
                        <div class="radio__content">
                            <label class="label" for="124">
                                Yes
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="filter-control">
            <div>
                <div class="control">
                    <div class="radio">
                        <div class="radio__control">
                            <input
                                type="radio"
                                id="125"
                                name="3"
                                value="33"
                                class="radio__input"
                                aria-checked="true"
                                checked
                            />
                            <label class="radio__label" for="125"></label>
                        </div>
                        <div class="radio__content">
                            <label class="label" for="125">
                                No
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </filter-single>

Macros reference

• single_filter

DOM events reference

• addFilter
• removeFilter