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.

Javascript

Zum Rendern der Filter wird zusätzlich folgendes Javascript benötigt:

<script>
	document.addEventListener('DOMContentLoaded', () => {
		const url = new URL(window.location.href);
		const searchParams = new URLSearchParams(url.search);
		
		// Extract the category filter from the pathname
		const categoryFilter = url.pathname.slice(1).replace(/\//g, '%2f');
		
		// Extract the filters from the search parameters
		const appliedFilters = {};
		for (const [key, value] of searchParams.entries()) {
			if (key.startsWith('filter_eq[')) {
				const filterKey = key.slice(10, -1); // Extract the key inside filter_eq[]
				appliedFilters[filterKey] = appliedFilters[filterKey] || [];
				appliedFilters[filterKey].push({
				op_type: 'eq',
				value: [value],
				field: filterKey
				});
			}
		}
		
		if (Object.keys(appliedFilters).length > 0) {
			// Dispatch an event for wsSearchBox.js
			const filterUpdateEvent = new CustomEvent('filterUpdate', {
				detail: {
				applied_filters: appliedFilters,
				category_filter: categoryFilter
				},
				bubbles: true,
				composed: true
			});
			document.dispatchEvent(filterUpdateEvent);
		}
	});
</script>

Komponente für Filter von Produktdatenfeldern

Die einzelnen <ws-filter> für die Filter-Elemente müssen immer innerhalb von <ws-filters> liegen:

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

<ws-filters>
  <!-- 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>
</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
  - 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>

Komponente für Custom-Filter

Ebenfalls innerhalb von <ws-filters> können die folgenden Custom-Filter zusätzlich integriert werden:

Topseller
Sale / Reduziert
Bewertung
Neuste Produkte
Verfügbarkeit

<ws-filters>
  ...
    <ws-filter type="checkbox" multiple="true" display-style="hide" name="salesrank" filter-msg="Kein Filter für Topseller vorhanden"></ws-filter>
    <ws-filter type="checkbox" multiple="true" display-style="hide" name="rating" filter-msg="Kein Filter für Bewertung vorhanden"></ws-filter>
    <ws-filter type="checkbox" multiple="true" display-style="hide" name="new_field" filter-msg="Kein Filter für Neue Produkte vorhanden"></ws-filter>
    <ws-filter type="checkbox" multiple="true" display-style="hide" name="inventory" filter-msg="Kein Filter für Lagerbestand vorhanden"></ws-filter>
    <ws-filter type="checkbox" multiple="true" display-style="hide" name="reduced_field" filter-msg="Kein Filter für Sales vorhanden"></ws-filter>
  ...
</ws-filters>

Zusätzliche Attribute für Custom-Filter
- disable-style: Dieses Attribut sollte bei jedem statischen Filter gesetzt sein, um deren Verhalten bei möglichen “0 Results” zu steuern. Folgende Optionen stehen zur Verfügung:
  - hide: Filter verschwindet grafisch
  - inactive: Filter ist einfach nur inaktiv → reagiert nicht
  - gray-out: Filter wird ausgegraut und ist inaktiv
  - line-through: Filter wird durchgestrichen und ist inaktiv
  - blur: Filter wird geblurred (2px) und ist inaktiv
- Abseits der vordefinierten Styles, kann man auch disable-style="disable-style" festlegen, woraufhin eine CSS class mit selbigem Namen benutzt wird, die dann frei verwendet werden kann.

Hinweis: Ist die Komponente <ws-filters> bereits vorhanden, dann können die Custom-Filter innerhalb der bestehenden <ws-filters> - Komponente ergänzt werden.

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.

Dokumentation

ws-filter