Background

The SortOptions component shows optional sorting that a user can apply to a set of results. This component is only used on vertical search. SortOptions can be configured to include sorting by a field, distance (automatically calculated from the entity’s address), and relevance. The default sort is the order specified by the serverside configuration. Notably, any sorting applied client-side via this component does not replace what’s in the serverside configuration, it’s simply layered on top.

Basic Configuration

There are only a few required configuration options for SortOptions; the verticalKey and an options array. Within the options array, you must specify the type of sorting option (either FIELD, ENTITY_DISTANCE or RELEVANCE) and the label for that sorting option.

<div class="sort-options-container"></div>

ANSWERS.addComponent('SortOptions', {
  container: '.sort-options-container',
  verticalKey: 'locations',
  options: [
    {
      type: 'FIELD',
      field: 'c_popularity',
      direction: 'ASC',
      label: 'Popularity',
    },
    {
      type: "ENTITY_DISTANCE",
      label: 'Distance'
    },
    {
      type: 'RELEVANCE',
      label: 'Relevance'
    }
  ],
});

Advanced Configuration

Beyond the basic configuration options, you can also control various settings similar to the FilterOptions and Facets. These include showMore, showMoreLimit, showMoreLabel, showLessLabel, searchOnChange and applyLabel.

Finally, you can control the defaultSortLabel, which is the label for the option that is selected on load and corresponds to the default sort. You can show a reset button via showReset, and the label of that button via resetLabel.

In the below example, we’ve updated the defaultSortLabel and the label for sorting. We’ve also added a reset button with the label “reset the sort”.

https://codesandbox.io/embed/cocky-leaf-6rc8r?codemirror=1&fontsize=13&hidenavigation=1&theme=dark&view=preview

What Does Ascending and Descending Mean Per Field Type?

SortOptions API