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

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:

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