Zum Hauptinhalt springen
<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. 
<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: 
<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): 
<ws-filters>
  ...
  <div filter-container>
    ...
    <ws-filter> ... </ws-filter>
    <ws-filter> ... </ws-filter>
    <ws-filter> ... </ws-filter>
    ...
  </div>
  ...
</ws-filters>
✅ Richtig (Wrapper pro Filter): 
<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.