Recommendations

This is for:

Developer

In this article

Example Implementation
Methods
Attributes
Initialize
Sub-controllers
Related Types

Example Implementation

recommendations.fn.tsx

import {Recommendations as HeadlessRecommendations} from '@coveo/headless/commerce';
import {useEffect, useState, FunctionComponent} from 'react';
 
interface RecommendationsProps {
  controller: HeadlessRecommendations;
}
 
export const Recommendations: FunctionComponent<RecommendationsProps> = (
  props
) => {
  const {controller} = props;
  const [state, setState] = useState(controller.state);
 
  useEffect(() => controller.subscribe(() => setState(controller.state)), []);
 
  if (!state.products.length) {
    return <button onClick={() => controller.refresh()}>Refresh</button>;
  }
 
  return (
    <ul>
      {state.products.map(({ec_name, clickUri, permanentid}) => (
        <li key={permanentid}>
          <a href={clickUri}>{ec_name}</a>
        </li>
      ))}
    </ul>
  );
};
 
// usage
 
/**
 * ```tsx
 * const controller = buildRecommendations(engine);
 *
 * <Recommendations controller={controller} />;
 * ```
 */

The Recommendations controller exposes a method for retrieving recommendations content in a commerce interface.

Example: recommendations.fn.tsx

Methods

`promoteChildToParent`

Finds the specified parent product and the specified child product of that parent, and makes that child the new parent. The children and totalNumberOfChildren properties of the original parent are preserved in the new parent.

This method is useful when leveraging the product grouping feature to allow users to select nested products.

E.g., if a product has children (such as color variations), you can call this method when the user selects a child to make that child the new parent product, and re-render the product as such in the storefront.

Note: In the controller state, a product that has children will always include itself as its own child so that it can be rendered as a nested product, and restored as the parent product through this method as needed.

Parameters

child: Omit<BaseProduct, 'children' | 'totalNumberOfChildren'>

The child product that will become the new parent.

`refresh`

Fetches the recommendations.

`subscribe`

Adds a callback that’s invoked on state change.

Parameters

listener: () => void

A callback that’s invoked on state change.

Returns Unsubscribe: A function to remove the listener.

`interactiveProduct`

Creates an InteractiveProduct sub-controller.

Parameters

props: Omit<InteractiveProductCoreProps, 'responseIdSelector'>

The properties for the InteractiveProduct sub-controller.

Returns InteractiveProduct: An InteractiveProduct sub-controller.

`pagination`

Creates a Pagination sub-controller.

Parameters

props: PaginationProps

The optional properties for the Pagination sub-controller.

Returns Pagination: A Pagination sub-controller.

`summary`

Creates a Summary sub-controller.

Returns Summary<S>: A Summary sub-controller.

Attributes

`state`

A scoped and simplified part of the headless state that is relevant to the Recommendations controller.

Properties

error: CommerceAPIErrorStatusResponse | null
headline: string
isLoading: boolean
products: Product[]
responseId: string

Initialize

`buildRecommendations`

Creates a Recommendations controller instance.

Parameters

engine: CommerceEngine

The headless commerce engine.
props: RecommendationsProps

The configurable Recommendations controller properties.

Returns Recommendations