UI sorting widgets

Using replicas with different sorting strategies allows you to provide a way for users to change the sorting on the frontend. For example, imagine you have an ecommerce 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, it’s easier to use one of the InstantSearch libraries and leverage the built-in sortBy and relevantSort widgets.

Setting up Replicas

Before you implement the search, you need to have replicas for each sorting strategy you want to provide.

How to Sort by attribute

Sort dropdown with `sortBy`

Dropdowns are a familiar widget, common in ecommerce scenarios and power user workflows. InstantSearch provides sorting dropdowns via the sortBy widget.

Copy

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

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

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

Relevance sort toggle with `relevantSort`

If you’re using Relevant sort you can use the relevantSort widget to let users toggle between relevant and regular sorting. The relevantSort widget comes with recommended patterns when using Relevant sort, such as displaying the number of sorted results out of the total number of results, and letting users see more results.

Copy

1
2
3
4
5
6
7
8
9
10
search.addWidgets([
  instantsearch.widgets.relevantSort({
    container: '#relevant-sort',
    templates: {
      button({ isRelevantSorted }) {
        return isRelevantSorted ? 'See all results' : 'See relevant results';
      },
    },
  }),
]);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const TextComponent = ({ isRelevantSorted }) => (
  <p>
    {isRelevantSorted
      ? 'We removed some search results to show you the most relevant ones'
      : 'Currently showing all results'}
  </p>
);

const ButtonTextComponent = ({ isRelevantSorted }) => (
  <span>{isRelevantSorted ? 'See all results' : 'See relevant results'}</span>
);

<RelevantSort
  textComponent={TextComponent}
  buttonTextComponent={ButtonTextComponent}
/>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<ais-relevant-sort>
  <template v-slot:text="{ isRelevantSorted }">
    <template v-if="isRelevantSorted">
      We removed some search results to show you the most relevant ones
    </template>
    <template>
      Currently showing all results
    </template>
  </template>
  <template v-slot:button="{ isRelevantSorted }">
    <template v-if="isRelevantSorted">
      See all results
    </template>
    <template>
      See relevant results
    </template>
  </template>
</ais-relevant-sort>

Did you find this page helpful?

UI sorting widgets

On this page

Setting up Replicas

Sorting widget

Relevance sort toggle with `relevantSort`

On this page

UI sorting widgets

On this page

Setting up Replicas

Sorting widget

Sort dropdown with sortBy

Relevance sort toggle with relevantSort

On this page

Sort dropdown with `sortBy`

Relevance sort toggle with `relevantSort`