Sorting Widget JS

Allows sorting of search results for UX-JS.

Usage

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.

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

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.