Deprecated / Recommend / API reference / recommend-js

lookingSimilar

A
On this page

The lookingSimilar function lets you render recommendations from the Looking Similar model.

Installation# A

The Recommend JavaScript package is available on the npm registry.

Copy 
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 load it from a content delivery network (CDN):

Copy 
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# A

To get started, you need to specify a container (CSS selector or HTML element) for the component.

Copy 
1

<div id="lookingSimilar"></div>

Then, you can call the lookingSimilar function and provide the container.

You can customize how to render each item by passing a custom component to the itemComponent prop.

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/** @jsx h */
import { h } from 'preact';
import { lookingSimilar } from '@algolia/recommend-js';
import recommend from '@algolia/recommend';

const recommendClient = recommend('AJ0P3S7DWQ', '90dfaaf5755e694f341fe68f6e41a6d4');
const indexName = 'YOUR_INDEX_NAME';

lookingSimilar({
  container: '#lookingSimilar',
  recommendClient,
  indexName,
  objectIDs: [currentObjectID],
  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 HorizontalSlider UI component to display recommendations as a scrollable slider.

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

/** @jsx h */
import { h } from 'preact';
import { lookingSimilar } 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('AJ0P3S7DWQ', '90dfaaf5755e694f341fe68f6e41a6d4');
const indexName = 'YOUR_INDEX_NAME';

lookingSimilar({
  container: '#lookingSimilar',
  recommendClient,
  indexName,
  objectIDs: [currentObjectID],
  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 use createElement and Fragment from itemComponent, headerComponent and fallbackComponent.

With createElement#

You can use createElement and Fragment in all component props to create components without JSX. They’re bound to Preact 10’s createElement and Fragment.

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

import { lookingSimilar } from '@algolia/recommend-js';
import recommend from '@algolia/recommend';

const recommendClient = recommend('AJ0P3S7DWQ', '90dfaaf5755e694f341fe68f6e41a6d4');
const indexName = 'YOUR_INDEX_NAME';
const currentObjectID = 'YOUR_OBJECT_ID';

lookingSimilar({
  container: '#lookingSimilar',
  recommendClient,
  indexName,
  objectIDs: [currentObjectID],
  itemComponent({ item, createElement, Fragment }) {
    return createElement(
      'pre',
      null,
      createElement('code', null, JSON.stringify(item))
    );
  },
});

With html#

You can use the html function which lets you pass templates as HTML strings. This function uses htm.

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

import { lookingSimilar } from '@algolia/recommend-js';
import recommend from '@algolia/recommend';

const recommendClient = recommend('AJ0P3S7DWQ', '90dfaaf5755e694f341fe68f6e41a6d4');
const indexName = 'YOUR_INDEX_NAME';
const currentObjectID = 'YOUR_OBJECT_ID';

lookingSimilar({
  container: '#lookingSimilar',
  recommendClient,
  indexName,
  objectIDs: [currentObjectID],
  itemComponent({ item, html }) {
    return html`<pre>
      <code>${JSON.stringify(item)}</code>
    </pre>`;
  },
});

Parameters# A

Parameter Description
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 undefined, the function returns a JSX element to inject wherever you want.
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 
1
2
3
4
5
6
7
8
9
10
11
12
13

function HeaderComponent(props) {
  return (
    if (!props.translations.title) {
      return null;
    }

    return (
      <h3 className={cx('auc-Recommend-title', props.classNames.title)}>
        {props.translations.title}
      </h3>
    );
  );
}
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 horizontalSlider UI component.

The horizontalSlider UI component is currently not supported with recommend-js when imported as a UMD bundle, only when using a package manager.

The default implementation is:

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13

function ListView(props) {
  return (
    <div className="auc-Recommend-container">
      <ol className="auc-Recommend-list">
        {props.items.map(item => (
          <li key={item.objectID} className="auc-Recommend-item">
            <props.itemComponent item={item} />
          </li>
        ))}
      </ol>
    </div>
  );
}
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 window.
Parameter Description
classNames #
type: LookingSimilarClassNames

The class names for the component.

Copy 
1
2
3
4
5
6
7

type LookingSimilarClassNames = Partial<{
  root: string;
  title: string;
  container: string;
  list: string;
  item: string;
}>;
translations #
type: LookingSimilarTranslations

The translations for the component.

Copy 
1
2
3
4

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

This function also accepts all the props that useLookingSimilar supports:

Parameter Description
recommendClient #
type: RecommendClient
Required

The initialized Algolia Recommend client.
indexName #
type: string
Required

The name of the target index.
objectIDs #
type: string[]
Required

An array of objectIDs of the items to get recommendations for.

If you specify multiple objectIDs, you’ll get a single set of aggregated results from the requests, ordered by their score.

Each objectID you pass in the array counts towards the number of requests in your pricing plan. For example, if you want recommendations for the objectID array [ “A”,”B”,”C”], you’ll consume three requests from your quota, not one.
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 maxRecommendations isn’t provided or set to 0, all matching recommendations are returned, and no fallback request is performed.
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.
Did you find this page helpful?