🙌 From now on you can use Algolia Recommend from InstantSearch, simplifying your integration between the two libraries!

Learn how to migrate following the upgrade guide for JS or for React.

1import instantsearch from 'instantsearch.js';
2import {
3  frequentlyBoughtTogether,
4  relatedProducts,
5} from 'instantsearch.js/es/widgets';
6import algoliasearch from 'algoliasearch/lite';
7const searchClient = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey');
8
9instantsearch({
10  // No need for a recommendClient anymore
11  searchClient,
12  indexName,
13}).addWidgets([
14  frequentlyBoughtTogether({
15    container: '#frequentlyBoughtTogether',
16    objectIDs: [currentObjectID],
17  }),
18  relatedProducts({
19    container: '#relatedProducts',
20    objectIDs: [currentObjectID],
21  }),
22]);

1import {
2  InstantSearch,
3  FrequentlyBoughtTogether,
4  RelatedProducts,
5} from 'react-instantsearch';
6import algoliasearch from 'algoliasearch/lite';
7const searchClient = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey');
8
9function App() {
10  return (
11    <InstantSearch searchClient={searchClient} indexName={indexName}>
12      <FrequentlyBoughtTogether objectIDs={[currentObjectID]} />
13      <RelatedProducts objectIDs={[currentObjectID]} />
14    </InstantSearch>
15  );
16}

---

---

---

Recommend

Recommend is the repository packaging the UI components for Algolia Recommend, available for Vanilla JavaScript and React.

Installation

All Recommend packages are available on the npm registry.

For JavaScript

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

For React

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

Usage

For 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:

1<div id="frequentlyBoughtTogether"></div>
2<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.

1/** @jsx h */
2import { h } from 'preact';
3import {
4  frequentlyBoughtTogether,
5  relatedProducts,
6} from '@algolia/recommend-js';
7import recommend from '@algolia/recommend';
8
9const recommendClient = recommend('YourApplicationID', 'YourSearchOnlyAPIKey');
10const indexName = 'YOUR_INDEX_NAME';
11const currentObjectID = 'YOUR_OBJECT_ID';
12
13frequentlyBoughtTogether({
14  container: '#frequentlyBoughtTogether',
15  recommendClient,
16  indexName,
17  objectIDs: [currentObjectID],
18  itemComponent({ item }) {
19    return (
20      <pre>
21        <code>{JSON.stringify(item)}</code>
22      </pre>
23    );
24  },
25});
26
27relatedProducts({
28  container: '#relatedProducts',
29  recommendClient,
30  indexName,
31  objectIDs: [currentObjectID],
32  itemComponent({ item }) {
33    return (
34      <pre>
35        <code>{JSON.stringify(item)}</code>
36      </pre>
37    );
38  },
39});

For React

Import the FrequentlyBoughtTogether and RelatedProducts and use them in your parent component.

1import React from 'react';
2import {
3  FrequentlyBoughtTogether,
4  RelatedProducts,
5} from '@algolia/recommend-react';
6import recommend from '@algolia/recommend';
7
8const recommendClient = recommend('YourApplicationID', 'YourSearchOnlyAPIKey');
9const indexName = 'YOUR_INDEX_NAME';
10
11function App({ currentObjectID }) {
12  // ...
13
14  return (
15    <div>
16      <FrequentlyBoughtTogether
17        recommendClient={recommendClient}
18        indexName={indexName}
19        objectIDs={[currentObjectID]}
20        itemComponent={({ item }) => {
21          return (
22            <pre>
23              <code>{JSON.stringify(item)}</code>
24            </pre>
25          );
26        }}
27      />
28      <RelatedProducts
29        recommendClient={recommendClient}
30        indexName={indexName}
31        objectIDs={[currentObjectID]}
32        itemComponent={({ item }) => {
33          return (
34            <pre>
35              <code>{JSON.stringify(item)}</code>
36            </pre>
37          );
38        }}
39      />
40    </div>
41  );
42}

Continue reading our Getting Started guide.

Documentation

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.

Support

• GitHub Discussions

Packages

• @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

License

MIT