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

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