trendingItems
On this page
The trendingItems
function lets you render Trending Items.
Installation
The Recommend JavaScript package is available on the npm registry.
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:
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
To get started, you need to specify a container to inject the component into.
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.
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('YourApplicationID', 'YourSearchOnlyAPIKey');
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.
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('YourApplicationID', 'YourSearchOnlyAPIKey');
const indexName = 'YOUR_INDEX_NAME';
trendingItems({
container: '#trendingItems',
recommendClient,
indexName,
view: horizontalSlider,
itemComponent({ item }) {
return (
<pre>
<code>{JSON.stringify(item)}</code>
</pre>
);
},
});
If you don’t use JSX in your project, you can return tagged templates using htm
or leverage createElement
and Fragment
from itemComponent
, headerComponent
and fallbackComponent
.
With createElement
You can use createElement
and Fragment
in every component props to create components without JSX. They’re bound to Preact 10’s createElement
and Fragment
.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { trendingItems } from '@algolia/recommend-js';
import recommend from '@algolia/recommend';
const recommendClient = recommend('YourApplicationID', 'YourSearchOnlyAPIKey');
const indexName = 'YOUR_INDEX_NAME';
const currentObjectID = 'YOUR_OBJECT_ID';
trendingItems({
container: '#trendingItems',
recommendClient,
indexName,
itemComponent({ item, createElement, Fragment }) {
return createElement(
'pre',
null,
createElement('code', null, JSON.stringify(item))
);
},
});
With html
You can use the exposed html
function. This function is bind with htm
. It allows to pass templates as HTML strings.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { trendingItems } from '@algolia/recommend-js';
import recommend from '@algolia/recommend';
const recommendClient = recommend('YourApplicationID', 'YourSearchOnlyAPIKey');
const indexName = 'YOUR_INDEX_NAME';
const currentObjectID = 'YOUR_OBJECT_ID';
trendingItems({
container: '#trendingItems',
recommendClient,
indexName,
itemComponent({ item, html }) {
return html`<pre>
<code>${JSON.stringify(item)}</code>
</pre>`;
},
});
Parameters
itemComponent
|
type: ({ item, createElement, Fragment, html }) => JSX.Element | VNode | VNode[]
Required
The function to display each item. |
||
container
|
type: string | HTMLElement
The container for the component. You can either pass a CSS selector or an Element. If several containers match the selector, it picks the first one. When |
||
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
|
||
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 The The default implementation is:
Copy
|
||
environment
|
type: typeof window
default: window
The environment in which your application is running.
This is useful when using Recommend in a different context than |
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 |
threshold
|
type: number
The 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 when adding, removing, changing, or reordering items. |
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. |