Recommend is the repository packaging the UI components for Algolia Recommend, available for Vanilla JavaScript and React.
All Recommend packages are available on the npm registry.
For JavaScript
yarn add @algolia/recommend-js
# or
npm install @algolia/recommend-jsFor React
yarn add @algolia/recommend-react
# or
npm install @algolia/recommend-reactFor JavaScript
To get started, you need a container for your recommendations to go in—in this guide, one for Frequently Bought Together, and one for Related Products. If you don't have containers already, you can insert them into your markup:
<div id="frequentlyBoughtTogether"></div>
<div id="relatedProducts"></div>Then, insert your recommendations by calling the frequentlyBoughtTogether function and providing the container. It can be a CSS selector or an Element.
The process is the same for relatedProducts.
/** @jsx h */
import { h } from 'preact';
import {
frequentlyBoughtTogether,
relatedProducts,
} from '@algolia/recommend-js';
import recommend from '@algolia/recommend';
const recommendClient = recommend('YourApplicationID', 'YourSearchOnlyAPIKey');
const indexName = 'YOUR_INDEX_NAME';
const currentObjectID = 'YOUR_OBJECT_ID';
frequentlyBoughtTogether({
container: '#frequentlyBoughtTogether',
recommendClient,
indexName,
objectIDs: [currentObjectID],
itemComponent({ item }) {
return (
<pre>
<code>{JSON.stringify(item)}</code>
</pre>
);
},
});
relatedProducts({
container: '#relatedProducts',
recommendClient,
indexName,
objectIDs: [currentObjectID],
itemComponent({ item }) {
return (
<pre>
<code>{JSON.stringify(item)}</code>
</pre>
);
},
});For React
Import the FrequentlyBoughtTogether and RelatedProducts and use them in your parent component.
import React from 'react';
import {
FrequentlyBoughtTogether,
RelatedProducts,
} from '@algolia/recommend-react';
import recommend from '@algolia/recommend';
const recommendClient = recommend('YourApplicationID', 'YourSearchOnlyAPIKey');
const indexName = 'YOUR_INDEX_NAME';
function App({ currentObjectID }) {
// ...
return (
<div>
<FrequentlyBoughtTogether
recommendClient={recommendClient}
indexName={indexName}
objectIDs={[currentObjectID]}
itemComponent={({ item }) => {
return (
<pre>
<code>{JSON.stringify(item)}</code>
</pre>
);
}}
/>
<RelatedProducts
recommendClient={recommendClient}
indexName={indexName}
objectIDs={[currentObjectID]}
itemComponent={({ item }) => {
return (
<pre>
<code>{JSON.stringify(item)}</code>
</pre>
);
}}
/>
</div>
);
}Continue reading our Getting Started guide.
The documentation offers a few ways to learn about the Recommend library:
- Follow the Building your Recommend UI guide to display recommendations on your website.
- Refer to the JavaScript API reference or React API reference for a comprehensive list of parameters and options.
- Try out the Playground where you can fork a basic implementation and play around.
You can find more on the documentation.
@algolia/recommend-core: Core package for Algolia Recommend@algolia/recommend-js: JavaScript package for Algolia Recommend@algolia/recommend-react: React package for Algolia Recommend@algolia/recommend-vdom: VDOM package for Algolia Recommend
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent