Build your recommendation interface

This is for:

Developer

After creating a recommendation slot configuration, use the endpoint to retrieve items for your recommendation slots.

Approaches to building your recommendation interface

There are several approaches to building your search interface. For more detailed guides, see the following:

Recommendations based on configured strategy

While creating the recommendation slot configuration, you can specify a seedType to determine the strategy used to seed the recommendations. Seed types can have the following values:

  • unseeded

  • product

  • cart

  • purchased

The following sections describe how to fetch recommendations using Headless, based on the seedType used in the recommendation configuration.

Unseeded

If the seedType for your configuration is unseeded, you can pass just the slotId when defining the Recommendations controller (see documentation for CSR or SSR).

Product

If the seedType for your configuration is product, you must pass an additional product ID to the options object to seed the recommendations with a specific product.

In a CSR context, pass the productId to the options object when initializing the Recommendations controller:

import { engine } from './Engine';
import {buildRecommendations} from '@coveo/headless-commerce';

const recommendationsController = buildRecommendations(engine, {
  options: {
    slotId: '<SLOT_ID>',
    productId: '<PRODUCT_ID>',
  },
});

In a SSR context, pass the productId dynamically to the target controller when fetching the static state:

// ...
const recsStaticState = await recommendationEngineDefinition.fetchStaticState(
  {
    controllers: {
      viewedTogether: {enabled: true, productId: params.productId},
      // ...
    },
  }
);

For an example, see the Headless repository.

Cart

If the seedType for your configuration is cart, you only need to provide the slotId when defining your recommendation controller (see documentation for CSR or SSR).

Properly managing the cart state with Headless is essential to ensure that recommendation requests include the correct cart content (see documentation for CSR or SSR). This will ensure that recommendation requests include the correct cart content.

You can verify this by checking that the Headless recommendation request to the Commerce API contains the correct cart content in the context.cart object.

Purchased

If the seedType for your configuration is purchased, you can pass just the slotId when defining your recommendation controller (see documentation for CSR or SSR).

Call the purchase method on the cart controller when you use Headless to ensure recommendation requests reflect the correct history of purchased products (see documentation for CSR or SSR).

You can verify this by checking that the Headless recommendation request to the Commerce API contains the correct purchase history in the context.purchased object.