Sort By Selector

Overview

This component allows the user to change the sorting of results. This component is displayed as a selector that shows the different options you made available. When the user selects an option, the results are automatically sorted according to this option.

This component must be linked to a search Store, since it launches a new search with sorting parameters if the sorting logic is modified.

Usage

To create this component:

sdk.component('sort-by-selector', target: HTMLElement|String, options: Object);

Sample

By default, this component looks like this:

Options

Name Type Default Description
attributes Array An array of objects, each one containing an attribute name and a label key
attributes.*.name Array String representing the sorting logic. This string is constructed by these rules: asc/desc + (Attribute ID)
attributes.*.label Array Label that will appear in the selector

Tracking

This component does a new search when paginating, using the endpoint POST /federated-searches. This search is bound to the current session and the tracking option set to true.

Example using the results component Store with the linkTo method:

<div id="sort-by"></div>
<div id="results"></div>

<script>
  var results = sdk.component('results', '#results');

  var sortBySelector = sdk.component('sort-by-selector', '#sort-by', {
    attributes: [
      { name: 'desc(_popularity)', label: 'Popularity' },
      { name: 'desc(_relevance)', label: 'Relevance' },
      { name: 'desc(price)', label: 'Price - Descending' },
      { name: 'asc(price)', label: 'Price - Ascending' },
    ],
  });

  results.linkTo(sortBySelector);
</script>