Developers
Authorization
API Resources
NL Interpreter
Search
Assist
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 | |
| 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. |
Tracking
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>
<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>