Guides / Building Search UI / Ecommerce ui template / Components / Product listing page filter and nav

The Sort components allow users to sort products according to different criteria, for example, “Price Low to High” or “Most popular”. Use:

The Sort components on desktop

Sort by

The SortBy component allows users to sort the products based on different ranking formulas (using replica indices).

The SortBy components on desktop

Code summary

You can customize SortBy in:

Usage and props

1
2
3
4
5
6
7
8
9
10
11
12
13
const indexName = 'my_index'
const sorts = [
  { value: indexName, label: 'Most popular' },
  { value: `${indexName}_asc_price`, label: 'Price Low to High' },
  { value: `${indexName}_desc_price`, label: 'Price High to Low' },
]
const defaultRefinement = sorts[0].value

<SortBy
  items={sorts}
  defaultRefinement={defaultRefinement}
  view="select"
/>

Configuration

To configure the SortBy component, edit the variable sorts in the config.tsx file:

1
2
3
4
5
const sorts = [
  { value: indexName, label: 'Most popular', isDefault: true },
  { value: `${indexName}_asc_price`, label: 'Price Low to High' },
  { value: `${indexName}_desc_price`, label: 'Price High to Low' },
]

Relevant sort

The RelevantSort component allows users to only show the most relevant products for a user’s search instead of displaying all the products (relevant sorting instead of exhaustive sorting).

The RelevantSort component on desktop

Code summary

You can customize RelevantSort in:

Usage

1
<RelevantSort />

No props are needed for this component.

External packages used

The Sort components depend on these npm packages:

Package Description Used by
react-instantsearch-dom Provides the SortBy and RelevantSort connectors SortBy, RelevantSort
classnames A utility for conditionally joining CSS class names SortBy
@material-design-icons/svg Google’s Material Design icons SortBy, RelevantSort
react-fact-compare Compares the current and next props provided by the SortBy connector and decides whether to trigger a re-render SortBy
Did you find this page helpful?
React InstantSearch v6