> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# ws-filter-chip

> ws-filter-chip stellt aktive Filterwerte als entfernbare Chips dar, sodass Kunden Filter im Suchergebnis schnell überblicken und einzeln zurücksetzen können.

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:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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](/ws-search/integration-in-die-templates-storefront/webcomponents/url-filterparameter-query-parameter).