ws-sort-box

​

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

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

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

<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