Sort

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

• The SortBy component to sort products.
• The RelevantSort component to only show the most relevant products.

Sort by

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

Code summary

You can customize SortBy in:

• The refinement bar file
• The SortBy file
• Its props.

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"
/>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<SortBy
  // Required parameters
  items={object[]} // List of indices to search in.
  // An item object is defined as below:
  // {
  //   value: string,
  //   label: string
  // }
  defaultRefinement={string} // Index selected by default.
  view={string="dropdown" | "select"} // Sort view mode.

  // Optional parameters
  isOpened={boolean} // Whether the dropdown is opened by default (only working in "dropdown" view mode).
  className={string} // Adds a CSS class on the root element.
/>

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).

Code summary

You can customize RelevantSort in:

• The refinement bar file
• The RelevantSort file

Usage

1
<RelevantSort />

No props are needed for this component.

External packages used

The Sort components depend on these npm packages: