Zum Hauptinhalt springen
Die WebComponent <ws-filter> ermöglicht die Filterung der Suchergebnisse oder Kategorien basierend auf verschiedenen Produkteigenschaften. Sie unterstützt verschiedene Filtertypen wie Checkboxen, Wertebereiche (Range) und Schieberegler (Slider). Es werden dynamisch generierte Filter (z. B. Farben) sowie individuell definierte Custom-Filter (z. B. Topseller, Verfügbarkeit) unterstützt.

​
Voraussetzung

  • Die Komponente muss innerhalb von <ws-filters> eingebunden werden
  • Damit die Filterkomponente korrekt funktioniert, muss das Attribut name="" den technischen Spaltennamen aus dem Datenfeed enthalten, dieser muss zwingend lowercase (kleingeschrieben) sein. Dieser Spaltenname gibt an, auf welches Produktdatenfeld sich der Filter beziehen soll. Beispiele für mögliche Spaltennamen sind:
    • price: Für Preisfilter.
    • color: Für Farbauswahlfilter.
    • brand: Für Markenfilter.
  • Die Spaltennamen im Datenfeed werden über die Datenfelder definiert, die in der Konfiguration des Such-Moduls aktiviert und für Filter, Sortierung oder Suche verwendet werden.

​
Dynamische und Custom-Filter

Die Komponente <ws-filter> unterstützt zwei Arten von Filtern: dynamische Filter und Custom-Filter. Beide Filterarten können im Frontend gleich aussehen (z. B. als Checkbox).

​
Dynamische Filter

Dynamische Filter basieren direkt auf den Produktdaten – also auf Informationen, die im Datenfeed zu jedem einzelnen Produkt verfügbar sind. Typische Beispiele sind Farbe, Größe oder Marke. Typische Einsatzbereiche für dynamische Filter:
  • Farbe (color)
  • Größe (size)
  • Marke (brand)
  • Preis (price)
  • Zutaten (ingredients)

​
Custom-Filter

Custom-Filter basieren nicht auf den einzelnen Werten im Feed, sondern auf technisch definierten Filterbedingungen (z. B. „Lagerbestand ≥ 1”). Custom-Filter sind somit vordefinierte Filter, bei denen Sie entscheiden, was genau gefiltert werden soll. Typische Anwendungsfälle:
  • Nur verfügbare Produkte (z. B. Lagerbestand > 0)
  • „Neuheiten” basierend auf dem Creation Date
  • Sale-Produkte (z. B. is_reduced = true)
  • Bewertung (z. B. rating >= 4)

​
Komponente für Filter

Die einzelnen <ws-filter> für die Filter-Elemente müssen immer innerhalb von <ws-filters> liegen. Ist <ws-filters> bereits vorhanden, können die weiteren Filter einfach dort ergänzt werden.

​
Komponente für dynamische Filter

Die Komponente kann wie folgt auf der Kategorie- und Suchergebnisseite 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-filter type="checkbox" multiple="true" name="brand"></ws-filter>
  ...

  <ws-filter type="range" display-type="slider-fields" name="price"></ws-filter>
  ...

  <ws-filter type="checkbox" multiple="true" name="ingredients" negate></ws-filter>
  ...

  <ws-filter type="checkbox" multiple="true" name="ingredients" negate></ws-filter>
  <ws-filter type="checkbox" multiple="true" name="neq_ingredients" negate></ws-filter>
  ...
</ws-filters>
  • Attribute
    • type: Gibt den Filtertyp an.
      • checkbox: Auswahl über Checkboxen (z. B. Kategorien oder Farben)
        • negate: Aktiviert den Ausschluss-Filter. Produkte, die die gewählten Filterwerte enthalten, werden nicht angezeigt. Nur bei type="checkbox" verfügbar
      • range: Schieberegler für Wertebereiche (z. B. Preis).
        • display-type: Darstellungstyp des Range-Filters
          • slider: Stellt den Range-Filter nur als einen Slider dar
          • fields: Stellt den Range-Filter nur als Number-Input-Felder dar (2 Input-Felder)
          • slider-fields: Stellt den Range-Filter als Slider und Number-Input-Felder dar
    • multiple="true": Erlaubt die Mehrfachauswahl (nur für Checkboxen).