Display products

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 InfiniteHits component to display multiple products as a grid or list view with “load more / previous” buttons and a progress bar.
• The LoadPrevious/LoadMore component to move through the product pages.
• The ViewModes component to switch between a grid or a product list.

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.

Code summary

You can customize InfiniteHits in:

• The product listing page
• The InfiniteHits file
• Its props.

Usage and props

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<InfiniteHits
  // Required parameters
  hitComponent={function} // Renders each hit from the results.
  // You can find an example component called ProductCardHit,
  // which receives the hit as a props and does the mapping between your
  // Algolia dataset attributes and the ProductCard props to display product information.

  // Optional parameters
  showLess={boolean} // Whether to show the "show less" button.
  showMore={boolean} // Whether to show the "show more" button.
  viewMode={string="grid" | "list"} // Displays the results as a grid or list view.
  animation={boolean} // Whether to animate product cards when the query is updated.
  gridClassName={string} // Adds a CSS class when the view mode is "grid".
  listClassName={string} // Adds a CSS class when the view mode is "list".
/>

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.

Code summary – LoadPrevious

You can customize LoadPrevious in:

• The infinite hits file
• The LoadPrevious file
• Its props.

Usage and props

1
<LoadPrevious />

1
2
3
4
5
<LoadPrevious
  // Required parameters
  hasPrevious={boolean} // Whether to show the load previous button.
  refinePrevious={function} // Refine previous results function.
/>

Code summary – LoadMore

You can customize LoadMore in:

• The infinite hits file
• The LoadMore file

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.

Code summary

You can customize ViewModes in:

• The refinements bar file
• The ViewModes file

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:

Built-in refinements

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

• Category filter: filters on a specific category. All categories are displayed as a hierarchical menu. Implemented with the HierarchicalMenu component
• Brand filter: filters on brands. Implemented with the RefinementList widget
• Price filter: filters by price range. Implemented with the RangeInput component ¹
• Size filter: filters on size. Implemented with the SizeRefinementList widget ¹
• Color filter: filters by color. Implemented with the ColorRefinementList component ¹
• Rating filter: filters on product rating (using a number of stars). Implemented with the RatingSelector component ¹

¹ Custom components that use React InstantSearch connectors.