Sorting Widget JS

The SearchStax Site Search solution’s Sorting Widget allows sorting of search results for UX-JS.

Usage

1
searchstax.addSearchSortingWidget(container, options);
  • container – Element to render widget into
  • options – Configuration options (Read more)

Template Override

The Sorting widget template option allows customizing the UI templates.

mainTemplate

Main template for the sorting dropdown.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
templates: {
 
  main: {
    template: `
      <div class="sort-by">
        <label for="sort">Sort By:</label>
        <select id="sort">
          {{#options}}
            <option value="{{value}}">{{label}}</option>
          {{/options}}
        </select>
      </div>
    `
  }
 
}

The ISearchstaxSearchSortingData interface provides the sort options data.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
searchstax.addSearchSortingWidget('search-sorting-container', {
 
  templates: {
 
    main: {
      template: `
        <div class="sorting">
          <label for="sort-select">Sort By:</label>
          <select id="sort-select">
            <option value="relevance">Relevance</option>
            <option value="date-desc">Newest First</option>
          </select>
        </div>
      `,
      selectId: 'sort-select'
    }
 
  }
 
});

Questions?

Do not hesitate to contact the SearchStax Support Desk.