SearchstaxSortingWidget for Vue

The SearchStax Site Search solution offers a Vue sorting widget for your custom search page.

The SearchstaxSortingWidget component displays sorting options for search results.

Slots

#sorting

Allows customizing the sorting UI.

Slot props:

  • sortingData – Sorting data object
  • orderChange – Handler for sorting change
  • selectedSorting – Current selected sorting

Usage

<SearchstaxSortingWidget></SearchstaxSortingWidget>

Example

<SearchstaxSortingWidget>
            <template #sorting="{ sortingData, orderChange, selectedSorting }">
              <div
                class="searchstax-sorting-container"
                v-if="sortingData && sortingData?.searchExecuted && sortingData?.hasResultsOrExternalPromotions"
              >
                <label
                  class="searchstax-sorting-label"
                  for="sort-by"
                >Sort By</label>
                <select
                  id="searchstax-search-order-select"
                  class="searchstax-search-order-select"
                  :value="selectedSorting"
                  @change="orderChange($event)"
                >
                  <option value=""> Relevance </option>
                  <option value="date desc"> Newest Content </option>
                  <option value="date asc"> Oldest Content </option>
                </select>
              </div>
            </template>
          </SearchstaxSortingWidget>

The component fetches sorting options from API and passes them to slot. This allows customizing sorting UI and handling sort change.

Questions?

Do not hesitate to contact the SearchStax Support Desk.