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 <ws-communication>-Komponente muss eingebunden sein, um die angewendeten Filter mit der Such-API synchron zu halten.
Das JavaScript-Bundle wsSearchComponent.js muss integriert sein.
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.