> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# 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:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
    <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.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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.