The SortBy UI Widget

Using replicas with different sorting strategies allows you to provide a way for users to change the sorting on the front end. For example, imagine you have an e-commerce website, and by default, you want to sort search results from cheapest to most expensive. You might want to provide a dropdown or toggle switch to let users sort from most expensive to cheapest.

Because you have one replica index per sorting strategy, you need to change what index Algolia must search into when the user changes the sorting.

While you could handle it yourself, we recommend you use one of our InstantSearch libraries and leverage the built-in sortBy widget.

1
2
3
4
5
6
7
8
9
search.addWidget(
  instantsearch.widgets.sortBy({
    container: '#sort-by-container',
    indices: [
      { name: 'products', label: 'Most relevant' },
      { name: 'products_price_desc', label: 'Highest price' }
    ]
  })
);

1
2
3
4
5
6
<SortBy
  defaultRefinement="products"
  items={[
    { value: 'products_price_desc', label: 'Highest price' }
  ]}
/>

1
2
3
4
5
6
7
8
9
10
11
<ais-sort-by-selector :indices="[
    {
      name: 'products',
      label: 'Most relevant'
    },
    {
      name: 'products_price_desc',
      label: 'Highest price'
    }
  ]"
/>

1
2
3
4
5
6
7
<ais-sort-by
  [items]="[
    { name: 'products', label: 'Most relevant' },
    { name: 'products_price_desc', label: 'Highest price' }
  ]"
>
</ais-sort-by>