Zum Hauptinhalt springen
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.