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).

Voraussetzung

Damit die 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).
  - number-range-min / number-range-max: Eingabefelder für minimale bzw. maximale Werte eines Bereichs.
- 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

Die Komponente erzeugt zum Beispiel für type="checkbox" den folgenden Quellcode:

<div>
    <input type="checkbox" value="blau" id="farbgrp-blau" name="farbgrp">
    <label for="farbgrp-blau">blau</label>
</div>
<div>
    <input type="checkbox" value="rot" id="farbgrp-rot" name="farbgrp">
    <label for="farbgrp-rot">rot</label>
</div>

Für type="slider" wird zum Beispiel folgender Quellcode erzeugt:

<!-- Eingabefeld für den minimalen Wert -->
<div class="col">
	<ws-filter type="number-range-min" name="price">
		<input type="number" name="price-min" min="0" max="259" step="1" value="0">
	</ws-filter>
</div>

<!-- Trennzeichen zwischen den Werten -->
<div class="col-auto my-auto">-</div>

<!-- Eingabefeld für den maximalen Wert -->
<div class="col">
	<ws-filter type="number-range-max" name="price">
		<input type="number" name="price-max" min="0" max="259" step="1" value="259">
	</ws-filter>
</div>

<!-- Schieberegler (Slider) -->
<div class="col-12 mt-3 mb-2 px-3">
	<ws-filter type="slider" name="price" tag="€" combined="true" show-labels="true" filter-msg="Kein Filter vorhanden">
		<div class="slider-container noUi-target noUi-ltr noUi-horizontal noUi-txt-dir-ltr" name="price">
			<div class="noUi-base">
				<div class="noUi-connects">
					<div class="noUi-connect noUi-draggable" style="transform: translate(0%) scale(1);"></div>
				</div>
				<div class="noUi-origin" style="transform: translate(-100%); z-index: 5;">
					<div class="noUi-handle noUi-handle-lower" data-handle="0" tabindex="0" role="slider"
						aria-orientation="horizontal" aria-valuemin="0.0" aria-valuemax="259.0" aria-valuenow="0.0" aria-valuetext="0">
						<div class="noUi-touch-area"></div>
						<div class="noUi-tooltip">0</div>
					</div>
				</div>
				<div class="noUi-origin" style="transform: translate(0%); z-index: 4;">
					<div class="noUi-handle noUi-handle-upper" data-handle="1" tabindex="0" role="slider"
						aria-orientation="horizontal" aria-valuemin="1.0" aria-valuemax="259.0" aria-valuenow="259.0" aria-valuetext="259">
						<div class="noUi-touch-area"></div>
						<div class="noUi-tooltip">259</div>
					</div>
				</div>
			</div>
		</div>
	</ws-filter>
</div>

CSS & Styling für Checkboxen

Die Komponente mit dem Attribut type="checkbox" generiert keine spezifischen CSS-Klassen.

Innerhalb der Komponente können keine zusätzlichen CSS-Anweisungen oder HTML-Elemente eingebunden werden.

HTML-Elemente und zusätzliche CSS-Stile können jedoch um die Komponente herum ergänzt werden, um das Layout flexibel anzupassen.

CSS & Styling für Range-Slider

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

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 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.