Versions Compared

Version Old Version 1 New Version 2
Changes made by

Jennifer Pusch

Jennifer Pusch

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Excerpt
namefilter

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

...

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

...

  • Attribute

    • type: Gibt den Filtertyp an.

      • checkbox: Auswahl über Checkboxen (z. B. Kategorien oder Farben).

      • slider: Schieberegler für Wertebereiche (z. B. Preis).

      • 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 type="slider" wird zum Beispiel folgenden folgender Quellcode erzeugt:

Code Block
<!-- 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>

...

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

  • Anzeige von Tooltips mit den aktuellen Werten

  • Anpassbares Styling über CSS

Binde ein Script ein für die noUiSlider - hier kannst du runterladen: Jennifer Pusch

Die noUiSlider-Bibliothek ist bereits im JavaScript-Bundle wsSearchComponent.js enthalten.

...