Voraussetzung

• Damit die Komponente funktioniert, müssen Produktdatenfelder im Such-Modul als Filter definiert werden

• Sind keine entsprechenden Felder konfiguriert, wird die Komponente leer oder nicht angezeigt

• Namen / technischen Feldnamen, die im Datenfeed so enthalten sind - geschrieben sind Filterkomponente korrekt funktioniert, muss das Attribut name="" den technischen Spaltennamen aus dem Datenfeed enthalten. 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.

Komponente

Die Komponente kann wie folgt auf der Kategorie und Suchergebnisseite eingebunden werden:

<!-- Komponente für Filter als Checkbox -->
<ws-filter type="checkbox" filter-msg="Kein Filter vorhanden" multiple="true" name="catids"></ws-filter>

<!-- Komponente für Filter als Checkbox als Ausschlussfilter -->
<ws-filter type="checkbox" name="ingredients" negate></ws-filter>

<!-- Komponente für Filter als Slider / Range -->
<ws-filter type="slider" name="price" tag="€"></ws-filter>
<ws-filter type="number-range-min" name="price"></ws-filter>
<ws-filter type="number-range-max" name="price"></ws-filter>

• 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

    • slider: Schieberegler für Wertebereiche (z. B. Preis).negate: Negativer Filter Jennifer Pusch

    • number-range-min / number-range-max: Eingabefelder für minimale bzw. maximale Werte eines Bereichs. Markus Geist funktioniert Slider ohne number-range-min / number-range-max

  • filter-msg: Nachricht, die angezeigt wird, wenn keine Filteroptionen verfügbar sind (z. B. "Kein Filter vorhanden").

  • multiple="true": Erlaubt die Mehrfachauswahl (nur für Checkboxen).

  • name: Definiert das Produktdatenfeld, auf das der Filter angewendet wird, z.B.

    • catids für Kategorien

    • price für Preis

...

Für die Range-Slider wird noUiSlider verwendet – eine JavaScript-Bibliothek, die benutzerfreundliche Schieberegler bereitstellt:

<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.5.0/nouislider.min.js"></script> 

Funktionen von noUiSlider:

• Dynamische Bereichsauswahl mit zwei Griffen (z. B. Preisfilter von 0 bis 259 €)

• Anzeige von Tooltips mit den aktuellen Werten

• Anpassbares Styling über CSS

...

Die noUiSlider-Bibliothek ist bereits im JavaScript-Bundle wsSearchComponent.js enthalten.Die folgenden Klassen werden in der Ausgabe erzeugt und können für individuelles Styling verwendet werden:

• noUi-base: Basis-Container des Sliders

• noUi-connect: Bereich zwischen den beiden Griffen des Sliders (zeigt den ausgewählten Bereich)

• noUi-origin: Position des jeweiligen Slider-Griffs

• noUi-tooltip: Tooltip, der den aktuellen Wert des Griffs anzeigt

• noUi-handle: Der tatsächliche Griff, der bewegt werden kann

Die noUiSlider-Bibliothek sollte heruntergeladen werden und kann dann entweder direkt oder über das WEBSALE PageSpeed Tool eingebunden werden.