UI Libraries / Recommend / RelatedProducts

RelatedProducts

The RelatedProducts component lets you render Related Products or Related Content.

Installation

The Recommend React package is available on the npm registry.

Copy 
1
2
3

yarn add @algolia/recommend-react
# or
npm install @algolia/recommend-react

If you don’t want to use a package manager, you can use a standalone endpoint:

Copy 
1
2
3
4

<script src="https://cdn.jsdelivr.net/npm/@algolia/recommend-react"></script>
<script>
  const { FrequentlyBoughtTogether, RelatedProducts, TrendingItems, TrendingFacets } = window['@algolia/recommend-react'];
</script>

Usage

You can customize how to render each item by passing a custom component to the itemComponent prop.

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import { RelatedProducts } from '@algolia/recommend-react';
import recommend from '@algolia/recommend';

const recommendClient = recommend('YourApplicationID', 'YourSearchOnlyAPIKey');
const indexName = 'YOUR_INDEX_NAME';

function RelatedItem({ item }) {
  return (
    <pre>
      <code>{JSON.stringify(item)}</code>
    </pre>
  );
}

function App({ currentObjectID }) {
  // ...

  return (
    <RelatedProducts
      recommendClient={recommendClient}
      indexName={indexName}
      objectIDs={[currentObjectID]}
      itemComponent={RelatedItem}
    />
  );
}

Horizontal slider view

You can also wrap the component within a custom view. For example, you can use the provided HorizontalSlider UI component to display items as a scrollable slider.

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

import { RelatedProducts } from '@algolia/recommend-react';
import { HorizontalSlider } from '@algolia/ui-components-horizontal-slider-react';
import recommend from '@algolia/recommend';

import '@algolia/ui-components-horizontal-slider-theme';

const recommendClient = recommend('YourApplicationID', 'YourSearchOnlyAPIKey');
const indexName = 'YOUR_INDEX_NAME';

function RelatedItem({ item }) {
  return (
    <pre>
      <code>{JSON.stringify(item)}</code>
    </pre>
  );
}

function App({ currentObjectID }) {
  // ...

  return (
    <RelatedProducts
      recommendClient={recommendClient}
      indexName={indexName}
      objectIDs={[currentObjectID]}
      itemComponent={RelatedItem}
      view={HorizontalSlider}
    />
  );
}

Parameters

itemComponent
type: ({ item, createElement, Fragment, html }) => JSX.Element | VNode | VNode[]
Required

The function to display each item.
children
type: (props: ChildrenProps) => JSX.Element

A render function to fully customize what’s displayed.

The default implementation is:

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13

function defaultRender(props) {
  if (props.recommendations.length === 0) {
    return null;
  }

  return (
    <section className="auc-Recommend">
      {props.translations.title && <h3>{props.translations.title}</h3>}

      <props.View />
    </section>
  );
}
headerComponent
type: ({ classNames, recommendations, translations, Fragment, createElement, html }) => JSX.Element | VNode | VNode[]

The function to render a header for your items.

The default implementation is:

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13

function HeaderComponent(props) {
  return (
    if (!props.translations.title) {
      return null;
    }

    return (
      <h3 className={cx('auc-Recommend-title', props.classNames.title)}>
        {props.translations.title}
      </h3>
    );
  );
}
fallbackComponent
type: ({ createElement, Fragment, html }) => JSX.Element | VNode | VNode[]

A fallback component to render when no recommendations are returned.
view
type: ViewProps

The view component to render your items into. For example, you can use the horizontalSlider UI component.

The default implementation is:

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13

function ListView(props) {
  return (
    <div className="auc-Recommend-container">
      <ol className="auc-Recommend-list">
        {props.items.map(item => (
          <li key={item.objectID} className="auc-Recommend-item">
            <props.itemComponent item={item} />
          </li>
        ))}
      </ol>
    </div>
  );
}
environment
type: typeof window
default: window

The environment in which your application is running.

This is useful if you’re using Recommend in a different context than window.
classNames
type: RelatedProductsClassNames

The class names for the component.

Copy 
1
2
3
4
5
6
7

type RelatedProductsClassNames = Partial<{
  root: string;
  title: string;
  container: string;
  list: string;
  item: string;
}>;
translations
type: RelatedProductTranslations

The translations for the component.

Copy 
1
2
3
4

type RelatedProductTranslations = Partial<{
  title: string;
  showMore: string;
}>;

This component also accepts all the props that useRelatedProducts supports.

recommendClient
type: RecommendClient
Required

The initialized Algolia recommend client.
indexName
type: string
Required

The name of the target index.
objectIDs
type: string[]
Required

An array of objectIDs of the items to get recommendations for.

If you specify multiple objectIDs you will get multiple sets of results, not a single set of aggregated results.
maxRecommendations
type: number

The number of recommendations to retrieve. Depending on the available recommendations and the other request parameters, the actual number of hits may be lower than that. If maxRecommendations isn’t provided or set to 0, all matching recommendations are returned, and no fallback request is performed.
threshold
type: number

Threshold for the recommendations confidence score (between 0 and 100). Only recommendations with a greater score are returned.
fallbackParameters
type: Omit<SearchParameters, 'page' | 'hitsPerPage' | 'offset' | 'length'>

List of search parameters to send.

Additional filters to use as fallback when there aren’t enough recommendations.
queryParameters
type: Omit<SearchParameters, 'page' | 'hitsPerPage' | 'offset' | 'length'>

List of search parameters to send.
transformItems
type: (items: Array<RecordWithObjectID<TItem>>) => items

A function to transform the retrieved items before passing them to the component. It’s useful to add or remove items, change them, or reorder them.
Previous
FrequentlyBoughtTogether
Next
TrendingItems
Did you find this page helpful?