Guides / Building Search UI / Ecommerce ui template / Components / Product listing page display

The Display products components allow you to display multiple products using different layouts (as a grid or list) and load previous or next product pages.

Use:

The Display products component on desktop

Infinite hits

The InfiniteHits component displays multiple products as a grid or list view with “load more / previous” buttons and a progress bar. As the users scroll down the page, more products get loaded automatically until the page X is reached so the footer remains accessible: the end user then has the option to click on the “load more” button to display the next page of products.

The InfiniteHits component on desktop

Code summary

You can customize InfiniteHits in:

Usage and props

1
2
3
4
5
6
<InfiniteHits
  hitComponent={ProductCardHit}
  viewMode="grid"
  showLess={true}
  showMore={true}
/>

Load previous/more

The LoadPrevious and LoadMore components allow users to move through the product pages.

  • The LoadPrevious component allows users to return to the first page of results or load the previous product page.
  • The LoadMore component displays a progress bar showing how many products the user has already seen and the total number of products. It works as follows:
    • When the user scrolls down, 30 products are displayed.
    • After the first 30 products, the user must click the “Load more” button to display more.
    • Every time the search query is updated, this behavior is reset.

The LoadPrevious/LoadMore components on desktop

Code summary – LoadPrevious

You can customize LoadPrevious in:

Usage and props
1
<LoadPrevious />

Code summary – LoadMore

You can customize LoadMore in:

Usage
1
<LoadMore />

No props are needed for this component.

The page number limit used to load automatically the products can be customized. By default, the first page is loaded and then two other pages.

View modes

The ViewModes component allows users to switch between a grid and a product list. This lets them see more details about the products, such as extended descriptions or larger product images.

The ViewModes component on desktop

Code summary

You can customize ViewModes in:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Display the component
<ViewModes />

// Retrieve the current view mode
import { useAtomValue } from 'jotai/utils'
import { viewModeAtom } from '@/components/view-modes/view-modes'

function MyComponent() {
  // Retrieve the current view mode using Jotai library
  const viewMode = useAtomValue(viewModeAtom)

  // Use InfiniteHits component and pass down the current view mode
  return (
    <InfiniteHits
      ...
      viewMode={viewMode}
    />
  )
}

No props are needed for this component.

External packages used

The Display products components depend on these npm packages:

Package Description Used by
classnames A utility for conditionally joining CSS class names InfiniteHits
framer-motion Animates the expanded/collapsed states of the component InfiniteHits
react-fact-compare Compares the current and next props provided by the CurrentRefinements connector and decide whether to trigger a re-render InfiniteHits
react-instantsearch-dom Provides built-in refinement widgets (see below) that you can use to add filters to the sidebar. It also provides the CurrentRefinements connector to show the total number of current refinements InfiniteHits
jotai The state management library (written in TypeScript) LoadPrevious, LoadMore
LoadMoreWithProgressBar LoadMoreWithProgressBar React InstantSearch widget LoadMore

Built-in refinements

The Ecommerce UI template has several built-in refinements that you can use in the sidebar:

1 Custom components that use React InstantSearch connectors.

Did you find this page helpful?
React InstantSearch v6