> ## 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-filters

> ws-filters bündelt alle dynamisch generierten und Custom-Filter einer Such- oder Kategorieseite und steuert deren Layout, Reihenfolge und Sichtbarkeit.

`<ws-filters>` ist die zentrale Steuerkomponente für die Filterdarstellung in der Storefront. In dieser Komponente werden alle `ws-filter`-Instanzen integriert, die für Suchergebnis oder Kategorie zur Auswahl stehen.

***

## Voraussetzung

* Die Komponente muss vorhanden sein, wenn `<ws-filter>` genutzt wird
* `ws-filters` enthält alle Filter (`ws-filter`).
* `ws-filters` darf pro Seite/Ansicht nur **einmal** vorkommen.

***

## Komponente

`<ws-filters>` ist die zentrale Container-Komponente, in der alle `ws-filter`-Instanzen eingebunden werden.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-filters>
  ...

  <ws-filter type="checkbox" multiple="true" name="color"></ws-filter>
  <ws-filter type="checkbox" multiple="true" name="size"></ws-filter>

  ...
</ws-filters>
```

### Filteroptionen ausblenden (`hide-universal-options`)

Das Feature `hide-universal-options` blendet Filteroptionen aus, die auf alle Produkte im aktuellen Ergebnissatz zutreffen. Solche Optionen haben faktisch keine Filterwirkung, da sie keine Einschränkung des Ergebnisses bewirken. Durch das Ausblenden wird die Übersichtlichkeit in der Filterliste erhöht.

**Funktionsweise**

Eine Filteroption wird ausgeblendet, wenn ihre Trefferanzahl der Gesamtanzahl aller Produkte im Ergebnissatz entspricht. Beispiel: In der Kategorie „Tierfutter" befinden sich 100 Produkte. Alle 100 Produkte sind für Hunde geeignet. Wird der Filter „Tierart" ausgewählt, wird die Option „Hund" ausgeblendet, da sie keinen Filtereffekt hat - alle Produkte treffen ohnehin zu.

Das Feature ist standardmäßig ausgeschaltet und muss wie folgt erst aktiviert werden:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-filters hide-universal-options="true">
  ...
</ws-filters>
```

***

## Sichtbarkeit von Filtern (Ausblenden)

Die Steuerung, ob ein Filter sichtbar ist, erfolgt nicht über `<ws-filters>` selbst, sondern über HTML-Elemente innerhalb von `<ws-filters>`, die das Attribut `filter-container` tragen.

Über HTML-Elemente innerhalb von `ws-filters` mit dem Attribut `filter-container` wird gesteuert, ob Filter ausgeblendet werden, wenn sie

* keine Werte liefern und/oder
* für das aktuelle Suchergebnis bzw. die aktuelle Kategorie nicht zutreffend sind.

### Hinweis zur korrekten HTML-Struktur

Damit das Ausblenden **pro Filter** funktioniert, muss jeder `ws-filter` in einem eigenen Wrapper mit `filter-container` liegen.

Wird `filter-container` nur einmal um alle Filter gelegt, kann die komplette Filtergruppe verschwinden, sobald ein einzelner Filter keine Werte liefert oder nicht zutrifft.

**❌ Falsch (ein Wrapper für alle Filter):**

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-filters>
  ...
  <div filter-container>
    ...
    <ws-filter> ... </ws-filter>
    <ws-filter> ... </ws-filter>
    <ws-filter> ... </ws-filter>
    ...
  </div>
  ...
</ws-filters>
```

**✅ Richtig (Wrapper pro Filter):**

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-filters>
  ...
  <div filter-container>
    <ws-filter></ws-filter>
  </div>

  <div filter-container>
    <ws-filter></ws-filter>
  </div>

  <div filter-container>
    <ws-filter></ws-filter>
  </div>
  ...
</ws-filters>
```

***

## HTML & CSS

`<ws-filters>` liefert keine eigenen Styles für das Layout. Struktur (Wrapper/Container) und Styling werden im Template umgesetzt.

Zusätzlicher HTML-Code (z. B. Überschriften, Dropdown-Struktur) kann innerhalb von `<ws-filters>` eingefügt werden.

***

## Filterkomponente `ws-filter`

Für die Integration und Konfiguration der einzelnen Filter (z. B. Filtertypen, Attribute und Einbindung im Template) lesen Sie bitte die Dokumentation zur [WebComponent ws-filter](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-filter).