UI Libraries / Recommend / trendingItems

trendingItems

A

The trendingItems function lets you render Trending Items.

The Trending models are a beta product.

Installation# A

The Recommend JavaScript package is available on the npm registry.

Copy 
1
2
3

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

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

Copy 
1
2
3
4
5
6

<script src="https://cdn.jsdelivr.net/npm/@algolia/recommend-js"></script>
<script src="https://cdn.jsdelivr.net/npm/@algolia/recommend"></script>
<script>
  const { frequentlyBoughtTogether, relatedProducts, trendingItems, trendingFacets } = window['@algolia/recommend-js'];
  const recommend = window['@algolia/recommend'];
</script>

Usage# A

To get started, you need to specify a container to inject the component into.

Copy 
1

<div id="trendingItems"></div>

Then, you can call the trendingItems function and provide the container. It can be a CSS selector or an Element.

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

/** @jsx h */
import { h } from 'preact';
import { trendingItems } from '@algolia/recommend-js';
import recommend from '@algolia/recommend';

const recommendClient = recommend('AJ0P3S7DWQ', '90dfaaf5755e694f341fe68f6e41a6d4');
const indexName = 'YOUR_INDEX_NAME';

trendingItems({
  container: '#trendingItems',
  recommendClient,
  indexName,
  itemComponent({ item }) {
    return (
      <pre>
        <code>{JSON.stringify(item)}</code>
      </pre>
    );
  },
});

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

/** @jsx h */
import { h } from 'preact';
import { trendingItems } from '@algolia/recommend-js';
import { horizontalSlider } from '@algolia/ui-components-horizontal-slider-js';
import recommend from '@algolia/recommend';

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

const recommendClient = recommend('AJ0P3S7DWQ', '90dfaaf5755e694f341fe68f6e41a6d4');
const indexName = 'YOUR_INDEX_NAME';

trendingItems({
  container: '#trendingItems',
  recommendClient,
  indexName,
  view: horizontalSlider,
  itemComponent({ item }) {
    return (
      <pre>
        <code>{JSON.stringify(item)}</code>
      </pre>
    );
  },
});

Parameters# A

itemComponent #
type: ({ item }) => JSX.Element
Required

The component to display each item.
container #
type: string | HTMLElement

The container for the component. You can either pass a CSS selector or an Element. If there are several containers matching the selector, it picks up the first one.

When undefined, the function returns a JSX element for you to inject wherever you want.
headerComponent #
type: (props: ComponentProps) => JSX.Element

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: () => JSX.Element

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 horizontalSlider UI component is currently not supported with recommend-js when imported as a UMD bundle, only when using a package manager.

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.

This function also accepts all the props that useTrendingItems supports:

recommendClient #
type: RecommendClient
Required

The initialized Algolia recommend client.
indexName #
type: string
Required

The name of the target index.
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
Required

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.
facetName #
type: string
Optional

The facet attribute to get recommendations for. This parameter is used along with facetValue.
facetValue #
type: string
Optional

The value of the target facet.
Previous
relatedProducts
Next
trendingFacets
Did you find this page helpful?