ws-sort-box

ws-sort-box bietet Kunden eine Auswahl der Sortierreihenfolge (z.B. Preis, Bewertung, Relevanz) und aktualisiert das Suchergebnis bei Auswahländerung.

Die WebComponent <ws-sort-box> 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-sort-box use-api="yes" select-class="sort-select"></ws-sort-box>

• Attribute:
  • use-api: Bestimmt, ob die Sortbox die Sortieroptionen von der API erhält oder aus dem HTML-Template. (Mögliche Werte: yes/true oder no/false) Wenn use-api="no", dann muss die Sortierung wie folgt im Template festgelegt werden:

    <ws-sort-box use-api="no">
      <select>
        <option value="salesrank_asc">Bestseller</option>
        <option value="price_asc">Niedrigster Preis</option>
        <option value="price_desc">Höchster Preis</option>
        <option value="rating_desc">Bewertung</option>
      </select>
    </ws-sort-box>

• select-class: Wird genutzt, um dem Select-Element innerhalb der Komponente eine Klasse zu geben.

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

<ws-sort-box use-api="yes" style="display: block;">
  <select>
    <option value="_score_desc" selected>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-sort-box>

• <select>: Dropdown-Menü, das alle konfigurierten Sortieroptionen anzeigt.
• <option>: Jede Option repräsentiert eine Sortiermöglichkeit, die über die Konfiguration definiert worden ist
  • Textinhalt: 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.