> ## 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 lets customers select the sort order (for example price, rating, relevance) and updates the search result when the selection changes.

The `<ws-sort-box>` WebComponent lets users interactively adjust the sorting of the search results or categories. The available sort options (for example relevance, price, rating) are based on the fields and options configured in the search module.

## Prerequisite

* For the component to work, the sort options must be configured in the search module.
* If no fields and values are defined for sorting, the component is displayed empty or not at all.
* The following items must be defined in the configuration:
  * **Product data fields** that are used for sorting.
  * **Texts** for the display of the sort options.
  * The **default sort criterion**

## Component

The component can be embedded on the category and search result page as follows:

```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>
```

* **Attributes:**
  * `use-api`: Determines whether the sort box receives the sort options from the API or from the HTML template. (Possible values: `yes/true` or `no/false`)
    If `use-api="no"`, the sorting must be defined in the template as follows:

```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">Bestsellers</option>
        <option value="price_asc">Lowest price</option>
        <option value="price_desc">Highest price</option>
        <option value="rating_desc">Rating</option>
      </select>
    </ws-sort-box>
```

* `select-class`: Used to assign a class to the `<select>` element within the component.

The component automatically generates the corresponding HTML code for the sort options, for example:

```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>Relevance</option>
    <option value="sort_field_asc">Alphabetical (A-Z)</option>
    <option value="sort_field_desc">Alphabetical (Z-A)</option>
    <option value="price_asc">Price ascending</option>
    <option value="price_desc">Price descending</option>
    <option value="rating_asc">Rating ascending</option>
    <option value="rating_desc">Rating descending</option>
    <option value="salesrank_asc">Popularity</option>
  </select>
</ws-sort-box>
```

* `<select>`: Dropdown menu that shows all configured sort options.
* `<option>`: Each option represents a sort possibility that has been defined via the configuration.
  * Text content: Visible name of the sort option (for example "Price ascending"), which has been defined via the configuration.
  * `value`: Determines the technical sort logic. Examples:
    * `_score_desc`: Relevance descending (highest match first).
    * `price_asc`: Price ascending (lowest price first).
    * `price_desc`: Price descending (highest price first).
    * `rating_asc`: Rating ascending (worst rating first).
    * `rating_desc`: Rating descending (best rating first).

## CSS & styling

This component does not generate any specific CSS classes. The styling can, however, be adjusted using additional CSS statements in the shop template.

No additional HTML elements can be inserted inside the component.