Voraussetzung

• Damit die Komponente funktioniert, müssen Produktdatenfelder im Such-Modul als Filter definiert werdenSind keine entsprechenden Felder konfiguriert, wird die Komponente leer oder nicht angezeigtFilterkomponente 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

...

Für type="slider" wird zum Beispiel folgenden 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>

...

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.