Zum Hauptinhalt springen
Die Komponente <ws-filter-chip> 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-filter-chip></ws-filter-chip>
Die Komponente erzeugt HTML-Elemente zur Anzeige der aktivierten Filter. Jeder Filter wird als sogenannte “Chip”-Komponente dargestellt, die entfernt werden kann. 
<ws-filter-chip>
        <button class="closebtn">blau</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>

​
Optionales Attribut neq-label

Über das Attribut neq-label kann gesteuert werden, wie negative Filter (also Filter mit negate) angezeigt werden. Bei einem negativen Filter wird der Wert mit einem 🚫-Symbol dargestellt, z. B. 🚫 blau. Wenn ein anderes Präfix gewünscht ist oder das Symbol ganz unterdrückt werden soll, kann das Attribut neq-label entsprechend angepasst werden: 
<ws-filter-chip neq-label=""></ws-filter-chip>
<ws-filter-chip neq-label="nicht "></ws-filter-chip>
Ergebnis: nicht blau statt 🚫 blau.

​
Optionales Attribut btn-class

Über das Attribut btn-class kann gesteuert werden, welche Klasse dem generierten Button zugewiesen wird. 
<ws-filter-chip btn-class="btn btn-secondary"></ws-filter-chip>

​
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. (Nur wenn keine individuelle Klasse über btn-class hinterlegt wird)
Das Styling kann durch diese Klassen angepasst werden. Die Komponente selbst kann jedoch nicht um weiteres HTML oder CSS innerhalb ihres Containers erweitert werden.

​
URL-Filterparameter

Filter können über die URL direkt an das Suchmodul übergeben werden – z. B. für Kampagnen, Vorauswahlen oder direkte Verlinkungen mit aktivierten Filtern. Mehr dazu in der Dokumentation zu URL-Filterparameter.