SearchstaxSortingWidget for React and Next.js

The SearchStax Site Search solution offers a sorting widget for your React or Next.js custom search page.

The SearchstaxSortingWidget displays sorting options for search results.

Usage

1
<SearchstaxSortingWidget />

searchSortingTemplate

Renders custom sorting UI.

Receives:

  • sortingData – Sorting data
  • orderChange – Handles sorting order change
  • selectedSorting – Current sorting

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function searchSortingTemplate(
    sortingData: null | ISearchstaxSearchSortingData,
    orderChange: (value: string) => void,
    selectedSorting: string
  ) {
    return (
      <>
        {sortingData && sortingData?.searchExecuted && sortingData?.hasResultsOrExternalPromotions && (
          <div className="searchstax-sorting-container">
            <label className="searchstax-sorting-label" htmlFor="sort-by">
              Sort By
            </label>
            <select
              id="searchstax-search-order-select"
              className="searchstax-search-order-select"
              value={selectedSorting}
              onChange={(e) => {
                orderChange(e.target.value);
              }}
            >
              <option value=""> Relevance </option>
              <option value="date desc"> Newest Content </option>
              <option value="date asc"> Oldest Content </option>
            </select>
          </div>
        )}
      </>
    );
  }
  <SearchstaxSortingWidget searchSortingTemplate={searchSortingTemplate}></SearchstaxSortingWidget>

Questions?

Do not hesitate to contact the SearchStax Support Desk.