ws-filter

​

Voraussetzung

• Die Komponente muss innerhalb von <ws-filters> eingebunden werden
• Damit die Filterkomponente korrekt funktioniert, muss das Attribut name="" den technischen Spaltennamen aus dem Datenfeed enthalten, dieser muss zwingend lowercase (kleingeschrieben) sein. 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.

​

Dynamische und Custom-Filter

​

Dynamische Filter

• Farbe (color)
• Größe (size)
• Marke (brand)
• Preis (price)
• Zutaten (ingredients)

​

Custom-Filter

• Nur verfügbare Produkte (beispielsweise Lagerbestand > 0)
• „Neuheiten” basierend auf dem Creation Date
• Sale-Produkte (beispielsweise is_reduced = true)
• Bewertung (beispielsweise rating >= 4)

​

Komponente für Filter

​

Komponente für dynamische Filter

<ws-filters>
  ...

  <ws-filter type="checkbox" multiple="true" name="color"></ws-filter>
  <ws-filter type="checkbox" multiple="true" name="size"></ws-filter>
  <ws-filter type="checkbox" multiple="true" name="brand"></ws-filter>
  ...

  <ws-filter type="range" display-type="slider-fields" name="price"></ws-filter>
  ...

  <ws-filter type="checkbox" multiple="true" name="ingredients" negate></ws-filter>
  ...

  <ws-filter type="checkbox" multiple="true" name="ingredients" negate></ws-filter>
  <ws-filter type="checkbox" multiple="true" name="neq_ingredients" negate></ws-filter>
  ...
</ws-filters>

• Attribute
  • type: Gibt den Filtertyp an.
    • checkbox: Auswahl über Checkboxen (beispielsweise Kategorien oder Farben)
      • negate: Aktiviert den Ausschluss-Filter. Produkte, die die gewählten Filterwerte enthalten, werden nicht angezeigt. Nur bei type="checkbox" verfügbar
    • range: Schieberegler für Wertebereiche (beispielsweise Preis).
      • display-type: Darstellungstyp des Range-Filters
        • slider: Stellt den Range-Filter nur als einen Slider dar
        • fields: Stellt den Range-Filter nur als Number-Input-Felder dar (2 Input-Felder)
        • slider-fields: Stellt den Range-Filter als Slider und Number-Input-Felder dar
    • image: Bildbasierte Auswahl über anklickbare Bilder (beispielsweise Farben, Materialien, Muster). Details siehe Bildbasierte Filter.
    • label: Klickbare Label-Optionen mit verstecktem Checkbox-Input (beispielsweise Größen). Details siehe Label-Filter.
  • multiple="true": Erlaubt die Mehrfachauswahl (für type="checkbox", type="image" und type="label", Default bei image und label: false).
  • use-sort: Legt die Reihenfolge der Filterwerte fest. Details siehe Reihenfolge der Filterwerte.
    • ohne Angabe: alphabetisch aufsteigend
    • count: nach Trefferanzahl absteigend
    • numeric: numerisch aufsteigend. Ersetzt das bisherige Attribut use-numeric-sort="true".
  • data-template: Vorlage für die Beschriftung der Filterwerte mit den Platzhaltern {%value%} und {%count%}. Ohne dieses Attribut zeigt der Filter nur den Wert. Wirkt nur bei type="checkbox" und type="label". Bei type="image" wird das Attribut ignoriert. Details siehe Trefferanzahl pro Filterwert anzeigen.
  • name: Definiert das Produktdatenfeld, auf das der Filter angewendet wird, beispielsweise
    • catids für Kategorien
    • price für Preis

​

Komponente für Custom-Filter

<ws-filters>
  ...
    <ws-filter type="checkbox" disable-style="hide" name="salesrank" static-label="Nur Topseller"></ws-filter>
    <ws-filter type="checkbox" disable-style="hide" name="rating" static-label="Nur top-bewertete Produkte"></ws-filter>
    <ws-filter type="checkbox" disable-style="hide" name="new_field" static-label="Nur die neusten Produkte"></ws-filter>
    <ws-filter type="checkbox" disable-style="hide" name="inventory" static-label="Nur verfügbare Produkte"></ws-filter>
    <ws-filter type="checkbox" disable-style="hide" name="reduced_field" static-label="Nur reduzierte Produkte"></ws-filter>
  ...
</ws-filters>

• Attribute
  • type: Gibt den Filtertyp an.
    • checkbox: Auswahl über Checkboxen (beispielsweise Kategorien oder Farben)
      • negate: Aktiviert den Ausschluss-Filter. Produkte, die die gewählten Filterwerte enthalten, werden nicht angezeigt. Nur bei type="checkbox" verfügbar
  • name: Definiert das Produktdatenfeld, auf das der Filter angewendet wird, beispielsweise
    • catids für Kategorien
    • price für Preis
  • disable-style: Gibt an, wie sich der Filter verhalten soll, wenn er keine Werte enthält:
    • hide: Filter verschwindet grafisch. Nur dieser Wert blendet den Filter tatsächlich aus
    • inactive: Filter bleibt sichtbar und ist inaktiv → reagiert nicht
    • gray-out: Filter bleibt sichtbar, wird ausgegraut und ist inaktiv
    • line-through: Filter bleibt sichtbar, wird durchgestrichen und ist inaktiv
    • blur: Filter bleibt sichtbar, wird geblurred (2px) und ist inaktiv
    • disable-style="disable-style": Abseits der vordefinierten Styles kann man auch die Klasse disable-style anlegen und diese in der eigenen CSS-Datei entsprechend mit Anweisungen belegen. Der Filter bleibt dabei sichtbar
  • static-label: Optionaler Label-Text zur Anzeige eines benutzerdefinierten Textes für einen Custom-Filter

​

Bildbasierte Filter (type="image")

<ws-filter
  type="image"
  name="color"
  image-path="/images/colorpick/"
  image-format="jpg"
  label-class="color-swatch"
  multiple="true">
</ws-filter>

• Attribute
  • image-path: Pflichtfeld. Pfad zum Verzeichnis, in dem die Bilder der Filteroptionen liegen. Details siehe „Bildpfad“ weiter unten.
  • image-format: Dateiformat der Bilder. Möglich sind jpg, png und webp. Default: jpg
  • image-map: JSON-Mapping von Filterwert zu Dateiname, für Bildnamen, die von der automatischen Namens-Normalisierung abweichen.
  • label-class: CSS-Klasse für das Label-Element.
  • multiple: Erlaubt die Mehrfachauswahl. Default: false

• Kleinbuchstaben
• Leerzeichen werden zu Unterstrichen
• Alle Zeichen außer a bis z, 0 bis 9, _ und - werden entfernt. Umlaute und ß fallen dabei ersatzlos weg.

• Pfad ohne Domain wie /images/colors/ oder images/colors/: Der Pfad wird immer vom Domain-Root des Shops aus aufgelöst. Beide Schreibweisen ergeben also dieselbe URL, beispielsweise https://ihr-shop.de/images/colors/.
• Vollständige URL wie https://example.com/colors/: lädt die Bilder von der angegebenen Domain.

• Die Komponente fügt das Bild als <img>-Element in das Label der Filteroption ein.
• Ein Tooltip zeigt den ursprünglichen Wert der Option an.
• Ausgewählte Optionen erhalten die CSS-Klasse .checked am Label.
• Kann ein Bild nicht geladen werden, zeigt die Komponente automatisch den Text der Option an. Ein fehlendes Bild führt also nicht zu einer leeren Fläche.

​

Label-Filter (type="label")

<ws-filter
  type="label"
  name="size"
  label-class="size-class"
  data-template="{%value%} ({%count%})"
  multiple="true">
</ws-filter>

• Attribute
  • label-map: JSON-Mapping von Filterwert zu Anzeige-Label (beispielsweise {"xl": "Extra Large"}), für Anzeigetexte, die vom technischen Wert abweichen.
  • data-template: Vorlage für den Label-Inhalt, beispielsweise {%value%} ({%count%}) für den Wert mit Trefferanzahl. Details siehe Trefferanzahl pro Filterwert anzeigen.
  • label-class: CSS-Klasse für das Label-Element.
  • multiple: Erlaubt die Mehrfachauswahl. Default: false

• Der Checkbox-Input wird versteckt gerendert. Die Auswahl erfolgt über das klickbare Label.
• Ausgewählte Optionen erhalten die CSS-Klasse .active am Label.

​

Trefferanzahl pro Filterwert anzeigen (data-template)

• {%value%}: der Filterwert
• {%count%}: die Anzahl der Produkte mit diesem Wert

<ws-filter type="checkbox" multiple="true" name="color" data-template="{%value%} ({%count%})"></ws-filter>

<ws-filter type="label" name="size" data-template="Größe '{%value%}' → {%count%} Ergebnisse"></ws-filter>

• Gezählt werden Produkte, nicht Varianten. Ein Produkt, von dem es mehrere Varianten mit dem Wert “Rot” gibt, wird nur einmal gezählt.
• Ein Wert, den der Kunde über einen Ausschlussfilter (negate) ausgeschlossen hat, wird im positiven Filter desselben Feldes nicht mehr als Option angeboten. Im Ausschluss-Filter bleibt er stehen und behält in der Regel seine echte Anzahl, weil die Filteroptionen eines Feldes die Filter auf demselben Feld nicht berücksichtigen, auch nicht den Ausschluss. Nur wenn der ausgeschlossene Wert dort sonst fehlen würde, ergänzt das Suchmodul ihn mit der Anzahl 0.

​

Reihenfolge der Filterwerte (use-sort)

<ws-filters>
  ...
  <ws-filter type="checkbox" multiple="true" name="brand" use-sort="count" data-template="{%value%} ({%count%})"></ws-filter>
  <ws-filter type="checkbox" multiple="true" name="groesse" use-sort="numeric"></ws-filter>
  ...
</ws-filters>

​

Sortierung der Filterwerte innerhalb eines Filters (benutzerdefinierte Reihenfolge)

​

Statische Sortierliste (manuell gepflegt)

<ws-filters>
  ...
  <ws-filter type="checkbox" multiple="true" name="lebensphase"></ws-filter>
  ...
</ws-filters>

<script type="text/plain" id="sort-list-lebensphase">
  ['Junior','Adult','Senior']
</script>

• Attribute
  • sort-list- = technischer Name des Produktdatenfelds/Filters, immer lowercase (beispielsweise lebensphase)
  • Kommen neue Werte hinzu, muss die Liste manuell erweitert werden.

​

Sortierliste aus dem Import (Wawi/ERP)

<ws-filters>
  ...
  <ws-filter type="checkbox" multiple="true" name="lebensphase"></ws-filter>
  ...
</ws-filters>

• Attribute
  • WS-FilterSortList(Feldname) ist case-sensitive → Feldname muss genau wie im Original verwendet werden (beispielsweise Lebensphase).
  • In der Script-ID bleibt sort-list- trotzdem lowercase (sort-list-lebensphase)
  • Die Bereitstellung dieser Importliste muss mit Wawi/ERP abgestimmt werden.

​

Sichtbarkeit von dynamischen und Custom-Filtern (Ausblenden)

<ws-filters>
  ...
  <!-- Container wird komplett ausgeblendet, sobald der Filter nicht zutrifft -->
  <div filter-container>
    <h3>Farbe</h3>
    <ws-filter type="checkbox" multiple="true" name="color" disable-style="hide"></ws-filter>
  </div>

  <!-- Container bleibt sichtbar, der Filter wird nur durchgestrichen dargestellt -->
  <div filter-container>
    <h3>Größe</h3>
    <ws-filter type="checkbox" multiple="true" name="size" disable-style="line-through"></ws-filter>
  </div>
  ...
</ws-filters>

​

Filterwerte ohne Auswirkung auf das Ergebnis

​

HTML & CSS

​

CSS & Styling für Checkboxen

<input type="checkbox" value="blau" id="farbgrp-blau" name="farbgrp">
<label for="farbgrp-blau">blau</label>

<input type="checkbox" value="rot" id="farbgrp-rot" name="farbgrp">
<label for="farbgrp-rot">rot</label>

​

CSS & Styling für Image-Filter

​

CSS & Styling für Label-Filter

​

CSS & Styling für Range-Slider

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.5.0/nouislider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.5.0/nouislider.min.js"></script>

<ws-filter type="range" display-type="slider-fields" name="price">

  2.00

  4000.00

  <style class="slider-tooltip-style">
    .noUi-tooltip {
      display: none;
    }
  </style>
  <input type="number" name="price-min" class="range-field" min="2" max="3999" step="1"
      value="2"><input type="number" name="price-max" class="range-field" min="3" max="4000" step="1" value="4000">

</ws-filter>

• Dynamische Bereichsauswahl mit zwei Griffen (beispielsweise Preisfilter von 0 bis 259 €)
• Anzeige von Tooltips mit den aktuellen Werten
• Anpassbares Styling über CSS

• 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

​

Javascript-Workaround für die Anzeige des Währungssymbols in einer Price-Range

<script>
...
function wsPriceFilterCurrency() {
  var currencySymbol = document.createElement("span");
      currencySymbol.innerHTML = "~WS-CurrencySymbol~";
      currencySymbol = currencySymbol.innerText;
      var priceInputs = document.querySelectorAll("ws-filter[name='price'] input[type='number']");
      priceInputs.forEach(function(input) {
        var wrapper = input.closest(".range-field-wrapper");
        if (!wrapper) return;
        // Neue Struktur bauen
        var inputGroup = document.createElement("div");
        inputGroup.className = "wsPriceFilterGroup";
        var prepend = document.createElement("div");
        prepend.className = "wsPriceFilterCurrency";
        prepend.textContent = currencySymbol;
        // Input aus DOM entfernen und in neue Struktur einfügen
        input.parentNode.removeChild(input);
        inputGroup.appendChild(prepend);
        inputGroup.appendChild(input);
        // Neue Struktur anstelle des ursprünglichen Inputs einfügen
        wrapper.appendChild(inputGroup);
      });
    }
 ...
 </script>

​

URL-Filterparameter