@algolia/js-recommendations v1.0.0-experimental.0

@algolia/js-recommendations

JavaScript package for Algolia Recommend.

Installation

yarn add @algolia/js-recommendations@experimental
# or
npm install @algolia/js-recommendations@experimental

API

relatedProducts

Function to render related products.

Usage

To get started, you need a container for your results to go in. If you don’t have one already, you can insert one into your markup:

<div id="relatedProducts"></div>

Then, inject results into it by calling the relatedProducts function and providing the container. It can be a CSS selector or an Element.

/** @jsx h */
import { h } from 'preact';
import { relatedProducts } from '@algolia/js-recommendations';
import algoliasearch from 'algoliasearch';

const appId = 'HYDY1KWTWB';
const apiKey = '28cf6d38411215e2eef188e635216508';
const indexName = 'gstar_demo_test';

const searchClient = algoliasearch(appId, apiKey);
const currentObjectID = 'YOUR_OBJECT_ID';

relatedProducts({
  container: '#relatedProducts',
  searchClient,
  indexName,
  objectIDs: [currentObjectID],
  itemComponent({ item }) {
    return (
      <pre>
        <code>{JSON.stringify(item)}</code>
      </pre>
    );
  },
});

Props

The function accepts all the shared props and the following:

container

string | HTMLElement | required

The container for the relatedProducts component. You can either pass a CSS selector or an Element.

itemComponent

({ item }) => JSX.Element | required

The product component to display.

classNames

type RelatedProductsClassNames = Partial<{
  root: string;
  title: string;
  container: string;
  list: string;
  item: string;
}>;

The class names for the component.

translations

type RelatedProductTranslations = Partial<{
  title: string;
  showMore: string;
}>;

The translations for the component.

children

type ChildrenProps<TObject> = {
  classNames: RecommendationClassNames;
  recommendations: TObject[];
  translations: Required<RecommendationTranslations>;
  View(props: unknown): JSX.Element;
};

Render function to modify the default rendering.

The default implementation is:

function defaultRender(props) {
  if (props.recommendations.length === 0) {
    return null;
  }

  return (
    <section className="auc-Recommendations">
      {props.translations.title && <h3>{props.translations.title}</h3>}

      <props.View />
    </section>
  );
}

frequentlyBoughtTogether

Function to render frequently bought together products.

Usage

To get started, you need a container for your results to go in. If you don’t have one already, you can insert one into your markup:

<div id="frequentlyBoughtTogether"></div>

Then, inject results into it by calling the frequentlyBoughtTogether function and providing the container. It can be a CSS selector or an Element.

/** @jsx h */
import { h } from 'preact';
import { frequentlyBoughtTogether } from '@algolia/js-recommendations';
import algoliasearch from 'algoliasearch';

const appId = 'HYDY1KWTWB';
const apiKey = '28cf6d38411215e2eef188e635216508';
const indexName = 'gstar_demo_test';

const searchClient = algoliasearch(appId, apiKey);
const currentObjectID = 'YOUR_OBJECT_ID';

frequentlyBoughtTogether({
  container: '#frequentlyBoughtTogether',
  searchClient,
  indexName,
  objectIDs: [currentObjectID],
  itemComponent({ item }) {
    return (
      <pre>
        <code>{JSON.stringify(item)}</code>
      </pre>
    );
  },
});

Props

The function accepts all the shared props and the following:

container

string | HTMLElement | required

The container for the frequentlyBoughtTogether component. You can either pass a CSS selector or an Element.

itemComponent

({ item }) => JSX.Element | required

The product component to display.

classNames

type FrequentlyBoughtTogetherClassNames = Partial<{
  root: string;
  title: string;
  container: string;
  list: string;
  item: string;
}>;

The class names for the component.

translations

type FrequentlyBoughtTogetherTranslations = Partial<{
  title: string;
  showMore: string;
}>;

The translations for the component.

children

type ChildrenProps<TObject> = {
  classNames: RecommendationClassNames;
  recommendations: TObject[];
  translations: Required<RecommendationTranslations>;
  View(props: unknown): JSX.Element;
};

Render function to modify the default rendering.

The default implementation is:

function defaultRender(props) {
  if (props.recommendations.length === 0) {
    return null;
  }

  return (
    <section className="auc-Recommendations">
      {props.translations.title && <h3>{props.translations.title}</h3>}

      <props.View />
    </section>
  );
}

Shared props

searchClient

SearchClient | required

The initialized Algolia search client.

indexName

string | required

The name of the products index.

objectIDs

string[] | required

An array of objectIDs of the products to get recommendations from.

maxRecommendations

number | defaults to the maximum number of recommendations available

The number of recommendations to retrieve.

fallbackFilters

list of strings

Additional filters to use as fallback should there not be enough recommendations.

searchParameters

SearchParameters | defaults to { analytics: false, enableABTest: false }

List of search parameters to send.

transformItems

type RecordWithObjectID<TItem> = TItem & {
  objectID: string;
};

Function to transform the items retrieved by Algolia. It's useful to edit, add, remove or reorder them.