ws-filter-chip

The <ws-filter-chip> component displays the currently applied filters in the frontend. It is updated automatically as soon as filters are added or removed. Clicking one of the displayed filters removes it again.

Requirement

The component is used in combination with <ws-filter>.
If no filters are defined, there are no active filters to display or remove.

Component

The component can be embedded as follows on the category and search result page:

<ws-filter-chip></ws-filter-chip>

The component generates HTML elements for displaying the active filters. Each filter is rendered as a so-called “chip” component that can be removed.

<ws-filter-chip>
        <button class="closebtn">blue</button>
        <button class="closebtn">Equilibre</button>
        <button class="closebtn">36</button>
        <button class="closebtn">38</button>
        <button class="closebtn">39€ - 50€</button>
</ws-filter-chip>

Optional attribute `neq-label`

Via the neq-label attribute you can control how negative filters (i.e. filters with negate) are displayed. For a negative filter, the value is displayed with a 🚫 symbol, e.g. 🚫 blue. If a different prefix is desired or the symbol should be suppressed entirely, the neq-label attribute can be adjusted accordingly:

<ws-filter-chip neq-label=""></ws-filter-chip>
<ws-filter-chip neq-label="not "></ws-filter-chip>

Result: not blue instead of 🚫 blue.

Optional attribute `btn-class`

The btn-class attribute controls which class is assigned to the generated button.

<ws-filter-chip btn-class="btn btn-secondary"></ws-filter-chip>

CSS & styling

This component generates the following CSS classes for styling:

chip-container: Container for the whole list of applied filters.
chip: Individual applied filter.
closebtn: Button that removes the filter. (Only when no individual class is provided via btn-class.)

The styling can be adjusted through these classes. However, the component itself cannot be extended with additional HTML or CSS inside its container.

URL filter parameters

Filters can be passed directly to the search module via the URL – e.g. for campaigns, preselections, or direct links with active filters. More about this in the documentation on URL filter parameters.

ws-filter ws-filter-reset

⌘I

WS-Search

Setup

Integration into templates (Storefront)

Web components – Template placeholders

Web components – UI components

Requirement

Component

Optional attribute `neq-label`

Optional attribute `btn-class`

CSS & styling

URL filter parameters

​Requirement

​Component

​Optional attribute neq-label

​Optional attribute btn-class

​CSS & styling

​URL filter parameters

Requirement

Component

Optional attribute `neq-label`

Optional attribute `btn-class`

CSS & styling

URL filter parameters