Die WebComponent <ws-sortbox> ermöglicht es Nutzern, die Sortierung der Suchergebnisse oder Kategorien interaktiv anzupassen. Die verfügbaren Sortieroptionen (z. B. Relevanz, Preis, Bewertung) basieren auf den im Such-Modul konfigurierten Feldern und Optionen.

Voraussetzung

Damit die Komponente funktioniert, müssen die Sortieroptionen im Such-Modul konfiguriert werden.
Sind keine Felder und Werte für die Sortierung definiert, wird die Komponente leer oder gar nicht angezeigt.
In der Konfiguration müssen folgende Punkte festgelegt werden:
- Produktdatenfelder, die für die Sortierung verwendet werden.
- Texte für die Anzeige der Sortieroptionen.
- Das Standard-Sortierkriterium

Komponente

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

<ws-sortbox></ws-sortbox>

Die Komponente erzeugt automatisch den entsprechenden HTML-Code für die Sortieroptionen, z.B.

<ws-sortbox style="display: block;">
    <select>
        <option value="_score_desc">Relevanz</option>
        <option value="sort_field_asc">Alphabetisch (A-Z)</option>
        <option value="sort_field_desc">Alphabetisch (Z-A)</option>
        <option value="price_asc">Preis aufsteigend</option>
        <option value="price_desc">Preis absteigend</option>
        <option value="rating_asc">Bewertung aufsteigend</option>
        <option value="rating_desc">Bewertung absteigend</option>
        <option value="salesrank_asc">Beliebtheit</option>
    </select>
</ws-sortbox>

<select>: Dropdown-Menü, das alle konfigurierten Sortieroptionen anzeigt.
<option>: Jede Option repräsentiert eine Sortiermöglichkeit, die über die Konfiguration definiert worden ist
- Sichtbarer Name der Sortieroption (z. B. "Preis aufsteigend"), der über die Konfiguration definiert worden ist
- value: Bestimmt die technische Sortierlogik. Beispiele:
  - _score_desc: Relevanz absteigend (höchste Übereinstimmung zuerst).
  - price_asc: Preis aufsteigend (niedrigster Preis zuerst).
  - price_desc: Preis absteigend (höchster Preis zuerst).
  - rating_asc: Bewertung aufsteigend (schlechteste Bewertung zuerst).
  - rating_desc: Bewertung absteigend (beste Bewertung zuerst)

CSS & Styling

Diese Komponente generiert keine spezifischen CSS-Klassen. Das Styling kann jedoch durch zusätzliche CSS-Anweisungen im Shop-Template angepasst werden.

Innerhalb der Komponente können keine weiteren HTML-Elemente eingefügt werden.