Zum Hauptinhalt springen
Die Komponente <ws-filter-toggle> stellt einen Toggle-Switch bereit, der einen Filter zwischen dem Modus Include (eq - Produkte mit den gewählten Werten anzeigen) und Exclude (neq - Produkte mit den gewählten Werten ausschließen) umschaltet. Die Komponente verknüpft sich automatisch über das name-Attribut mit dem passenden <ws-filter>.

​
Voraussetzung

  • Ein <ws-filter> mit demselben name-Attribut muss vorhanden sein.
  • JavaScript-Bundle ws-search-component-<Versionsnummer>.js ab Version 1.9.1

​
Komponente

Die Komponente kann wie folgt auf der Kategorie- und Suchergebnisseite eingebunden werden:
  • Attribute
    • name: Filter-Name; muss mit dem name-Attribut des zugehörigen <ws-filter> übereinstimmen.
    • label-on: Label-Text, wenn der Switch ON ist. Default: Include
    • label-off: Label-Text, wenn der Switch OFF ist. Default: Exclude
    • default-checked: Initial-Status des Switches; true = Switch ON. Default: true
    • invert: Invertiert die Logik des Switches. Default: false
      • false: Switch ON = Include (eq), Switch OFF = Exclude (neq)
      • true: Switch ON = Exclude (neq), Switch OFF = Include (eq)
    • container-class: CSS-Klasse für den Container.
    • switch-class: CSS-Klasse für den Switch.
    • label-class: CSS-Klasse für das Label.
Das Umschalten des Switches setzt die ausgewählten Optionen des zugehörigen Filters zurück.

​
CSS & Styling

Das Styling erfolgt über die Attribute container-class, switch-class und label-class, mit denen den erzeugten Elementen eigene CSS-Klassen (z.B. Bootstrap-Klassen wie im Beispiel) zugewiesen werden können.