/recommend

A UI library for Algolia Recommend, available for Vanilla JavaScript and React.

Primary LanguageTypeScriptMIT LicenseMIT

🙌 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.

import instantsearch from 'instantsearch.js';
import {
  frequentlyBoughtTogether,
  relatedProducts,
} from 'instantsearch.js/es/widgets';
import algoliasearch from 'algoliasearch/lite';
const searchClient = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey');

instantsearch({
  // No need for a recommendClient anymore
  searchClient,
  indexName,
}).addWidgets([
  frequentlyBoughtTogether({
    container: '#frequentlyBoughtTogether',
    objectIDs: [currentObjectID],
  }),
  relatedProducts({
    container: '#relatedProducts',
    objectIDs: [currentObjectID],
  }),
]);
import {
  InstantSearch,
  FrequentlyBoughtTogether,
  RelatedProducts,
} from 'react-instantsearch';
import algoliasearch from 'algoliasearch/lite';
const searchClient = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey');

function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName={indexName}>
      <FrequentlyBoughtTogether objectIDs={[currentObjectID]} />
      <RelatedProducts objectIDs={[currentObjectID]} />
    </InstantSearch>
  );
}

Recommend

Version MIT License

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

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

For React

yarn add @algolia/recommend-react
# or
npm 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:

<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.

Documentation

The documentation offers a few ways to learn about the Recommend library:

You can find more on the documentation.

Support

Packages

License

MIT