Sort By Selector


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.


To create this component:

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


By default, this component looks like this:


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
placement String bottom-start The popup placement. See popper.js placements docs for valid values.
modifiers Object { flip: { behavior: ['right', 'bottom-start'], }, preventOverflow: { enabled: false } } The popup modifiers. See popper.js modifiers docs for valid values.


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

Example using the results component Store with the linkTo method:

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

  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' },