Die Komponente <ws-applied-filters> zeigt die aktuell angewendeten Filter im Frontend an. Sie wird automatisch aktualisiert, sobald Filter hinzugefügt oder entfernt werden. Ein Klick auf einen der angezeigten Filter entfernt diesen wieder.

Voraussetzung

Die Komponente wird in Verbindung mit <ws-filter> verwendet.
Sind keine Filter definiert, gibt es keine aktivierten Filter zum Anzeigen oder Entfernen.

Komponente

Die Komponente kann wie folgt auf der Kategorie und Suchergebnisseite eingebunden werden:

<ws-applied-filters></ws-applied-filters>

Die Komponente erzeugt HTML-Elemente zur Anzeige der aktivierten Filter. Jeder Filter wird als sogenannte "Chip"-Komponente dargestellt, die entfernt werden kann.

<ws-applied-filters>
    <div class="chip-container">
        <div class="chip"><button class="closebtn">blau</button></div>
        <div class="chip"><button class="closebtn">Equilibre</button></div>
        <div class="chip"><button class="closebtn">36</button></div>
        <div class="chip"><button class="closebtn">38</button></div>
        <div class="chip"><button class="closebtn">39€ - 50€</button></div>
    </div>
</ws-applied-filters>

CSS & Styling

Diese Komponente generiert die folgenden CSS-Klassen für das Styling:

chip-container: Container für die gesamte Liste der angewendeten Filter.
chip: Einzelner angewendeter Filter.
closebtn: Button, der den Filter entfernt.

Das Styling kann durch diese Klassen angepasst werden.

Die Komponente selbst kann jedoch nicht um weiteres HTML oder CSS innerhalb ihres Containers erweitert werden.