---
title: Build your product recommendations interface (legacy)
slug: ladf0005
canonical_url: https://docs.coveo.com/en/ladf0005/
collection: coveo-for-commerce
source_format: adoc
---
# Build your product recommendations interface (legacy)
> **Warning**
>
> This article explains how to implement Coveo-powered interfaces that use legacy [Atomic](https://docs.coveo.com/en/lcdf0264/) components interacting with the Coveo Search API.
> 
> For new Coveo for Commerce implementations, consider using [Coveo Headless for commerce](https://docs.coveo.com/en/ob480177/).
> [Coveo Headless](https://docs.coveo.com/en/lcdf0493/) leverages the Commerce API, offering a more efficient and flexible approach to interacting with the [Coveo Platform](https://docs.coveo.com/en/186/).


This article explains how to employ [Coveo Machine Learning](https://docs.coveo.com/en/188/) [product recommendations](https://docs.coveo.com/en/3132/) in an SAP Commerce Cloud project using the example of adding a recommendations carousel to a [product detail page (PDP)](https://docs.coveo.com/en/n8ad7392/).

> **Important**
>
> This article explains how to replace an existing component in an SAP Commerce CMS.
> To create a new component, refer to [the SAP documentation](https://help.sap.com/docs/SAP_COMMERCE_CLOUD_PUBLIC_CLOUD/e1391e5265574bfbb56ca4c0573ba1dc/fcfb553b809a4141b2686a7c8e5f92cd.html).

## Back-end configuration

The SAP Commerce Cloud uses a [Web Content Management System](https://help.sap.com/docs/SAP_COMMERCE_CLOUD_PUBLIC_CLOUD/e1391e5265574bfbb56ca4c0573ba1dc/8c82617c86691014abcda90cb5da8465.html?q=WCMS) (WCMS) to store pages used in a storefront.
Pages consist of [content slots](https://help.sap.com/docs/SAP_COMMERCE_CLOUD_PUBLIC_CLOUD/e1391e5265574bfbb56ca4c0573ba1dc/8b7cdc55866910149b09c285e4c2b1ed.html), which comprise components.

### Step 1: Create a new component

WCMS provides different component types, from which you can use the `CMS Flex Component`.
This component type is meant for Angular components that don't need any data from CMS (for example, a login name), which makes it suitable for recommendations.
This component type contains the special `flexType` attribute that SAP Composable Storefront uses to map components with the WCMS.

. In the [Backoffice Administration Cockpit](https://help.sap.com/docs/SAP_COMMERCE/5c9ea0c629214e42b727bf08800d8dfa/8c16979286691014abe6f41434c7614a.html), go to the **WCMS → Component** page.

. Next to the plus sign, click the dropdown menu and select **CMS Flex Component**.

. Fill in the following fields:

** **Catalog Version**. Select a catalog that starts with `SPA`[.footnote]^[[1](#spa-footnote1)]^ and ends with **Staged**. You'll synchronize this catalog version with the `online` version later.

** **ID**. Enter a unique ID for the component. For example, `CoveoRecs`.

![Modal window "Create CMS Flex Component"](https://docs.coveo.com/en/assets/images/coveo-for-commerce/images/cms-flex-component.png)

. Once the component is created, you can see it in the list of components.

. Open the created component and switch to the **Administration** tab.

. In the **Flex type** field, enter `CoveoRecs`.

. Click **Save**.

> **Tip**
>
> The steps above show how to create a component via the Backoffice Administration Cockpit.
> 
> You can also create a component via [SmartEdit](https://help.sap.com/docs/SAP_COMMERCE/9d346683b0084da2938be8a285c0c27a/dc259a9f232a469ca8da3cf22f34839c.html).
> To do so, go to the **Storefront** tab and click the plus sign on the **Component** button.
> Then, select **CMS Flex Component** and fill in the **Name** and **Flex Type** fields.
> 
> ![Modal window "Add Component" in the SmartEdit user interface](:https://docs.coveo.com/en/assets/images/coveo-for-commerce/images/smartedit-add-component-01.jpg)
> 
> ![Modal window "CMX Flex Component Editor" in the SmartEdit user interface](:https://docs.coveo.com/en/assets/images/coveo-for-commerce/images/smartedit-add-component-02.jpg)

--
1. `SPA` stands for `Spartacus`, the previous name of SAP Commerce Cloud composable storefront.
--

### Step 2: Find the component slot for a new component

To find the slot where you want to place your `CoveoRecs` component, perform the following steps.

. Run the storefront in the development mode and open the PDP in the browser.

. Open the **Elements** tab of your browser's developer tools to inspect the page.
You should see a number of slots that SAP Commerce Storefront provides out of the box, so you can pick one that suits your needs.
In case of recommendations, it can be the `UpSelling` slot.

```html
<cx-page-slot ng-reflect-position="UpSelling" ng-reflect-is-page-fold="true" position="UpSelling" class="UpSelling page-fold has-components">
```

### Step 3: Add the component to a content slot

. In the [Backoffice Administration Cockpit](https://help.sap.com/docs/SAP_COMMERCE/5c9ea0c629214e42b727bf08800d8dfa/8c16979286691014abe6f41434c7614a.html), go to the **WCMS → Content Slot** page.

. Open the advanced search and fill in the following fields:

[cols="1,1,3"]
|===
|**Catalog Version**
|Equals
|Select the catalog that you specified while creating the component.

|**ID**
|Contains
|`UpSelling`
|===


![Advanced search for content slots](https://docs.coveo.com/en/assets/images/coveo-for-commerce/images/content-slot-search.png)

. Click **Search**.

. Click the found slot.

. On the **Properties** tab, click the three dots in the **Components** field.
An advanced component search opens.

. Search for **ID**—Equals—`CoveoRecs`.

. Select the checkbox to the left of the found component.

. In the advanced search window, click **Select**.
The advanced component search closes.

. Click **Save**.

![The content slot options](https://docs.coveo.com/en/assets/images/coveo-for-commerce/images/save-the-component-slot.png)

. Go to the **Catalog → Catalog versions** page.

. Select the checkbox to the left of the catalog version that you specified while creating the component.
. At the top of the page, click **Synchronize**.

. In the modal window that appears:

.. Switch to the **Push to target** tab.
.. Select the catalog with the same name but ending with **Online**.
.. Click **Sync**.

### Step 4: Check the availability of the new component via API

Before moving on to the front-end configuration, verify whether the new component is available for the storefront.
You can do so via the [Commerce Webservices API](https://api.sap.com/api/commerce_webservices/overview) which is exposed locally at `https://localhost:9002/occ/v2/swagger-ui/index.html#/Pages/getPage`.

. In the `cms/pages` endpoint, click **Try it out**.

. Specify the parameters as follows:

[cols="1,3"]
|===
|**baseSiteId**
|The ID of the site whose catalog you're using.

|**code**
|The unique code of any PDP page.
You can find it in the URL of the PDP page.

|**pageType**
|`ProductPage`
|===

![The parameters to make a request to SAP Commerce Web Services API via the Swagger UI](https://docs.coveo.com/en/assets/images/coveo-for-commerce/images/sap-commerce-webservices-api-pdp-request.png)

. Click **Execute**.

. You should see the response with the `CoveoRecs` component within the `UpSellingSlot`.

## Front-end configuration

### Step 1: Create a module and a component

In your storefront project directory, perform the following steps:

. Create a new module with the following command:

```bash
ng g m custom-pdp
```

. Create a new component within your new module:

```bash
ng g c custom-pdp/coveo-recs
```

### Step 2: Add Coveo recommendations

. Open the `./src/app/custom-pdp/custom-pdp.module.ts` file and import the `ConfigModule` and `CmsConfig` modules. Also, specify `CUSTOM_ELEMENTS_SCHEMA` to be able to use Atomic web components.

```ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CoveoRecsComponent } from './coveo-recs/coveo-recs.component';
import { ConfigModule, CmsConfig } from '@spartacus/core';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  declarations: [
    CoveoRecsComponent
  ],
  imports: [
    CommonModule,
    ConfigModule.withConfig({
      cmsComponents: {
        CoveoRecs: { <1>
          component: CoveoRecsComponent <2>
        }
      }
    } as CmsConfig)
  ]
})
export class CustomPdpModule { }
```
<1> This is the value of the `flexType` attribute that you specified while creating a component in the SAP Commerce Cloud Backoffice Administration Cockpit.
<2> The default name of the class that you created previously and then imported in this file.

. Open the `./src/app/custom-pdp/coveo-recs/coveo-recs.component.ts` file and initialize the recommendations engine.

```ts
import { Component, AfterViewInit } from '@angular/core';
import { loadFieldActions } from '@coveo/atomic-angular';

@Component({
  selector: 'app-coveo-recs',
  templateUrl: './coveo-recs.component.html',
  styleUrls: ['./coveo-recs.component.scss']
})
export class CoveoRecsComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    const recommendInterface = document.querySelector('atomic-recs-interface');

    recommendInterface
      ?.initialize({
        organizationId: '<YOUR_ORG_ID>', <1>
        accessToken: '<YOUR_ACCESS_TOKEN>',
        pipeline: '<YOUR_PIPELINE>'
      })
      .then(() => {
          const engine = recommendInterface.engine;
          const fieldActions = loadFieldActions(engine!);
          engine!.dispatch(fieldActions.registerFieldsToInclude([
            'ec_images' <2>
            // ...
          ]));
          recommendInterface.getRecommendations();
        }
      );
  }
}
```
<1> Replace:
* `<YOUR_ORG_ID>` with the [ID of your Coveo organization](https://docs.coveo.com/en/n1ce5273/).
* `<YOUR_ACCESS_TOKEN>` with credentials for the target Coveo organization.
See [Authenticate via search token](https://docs.coveo.com/en/ladf0004/) and [Use API key authentication with the Search API](https://docs.coveo.com/en/105/).
* `<YOUR_PIPELINE>` with a [query pipeline](https://docs.coveo.com/en/1611/).
<2> Fields that you would like to use in the recommendations template. For example,

```js
'ec_name',
'ec_category',
'ec_images',
'ec_price'
```

. Open the `./src/app/custom-pdp/coveo-recs/coveo-recs.component.html` and add the basic layout for the recommendations tiles.

```html
<atomic-recs-interface>
  <atomic-recs-list label="Similar products" number-of-recommendations="5">
    <atomic-recs-result-template>
      <template> <1>
          <atomic-result-section-title>
            <atomic-result-link></atomic-result-link>
          </atomic-result-section-title>
          <atomic-result-section-visual>
            <atomic-result-image field="ec_images"> <2>
            </atomic-result-image>
          </atomic-result-section-visual>
      </template>
    </atomic-recs-result-template>
  </atomic-recs-list>
</atomic-recs-interface>
```
<1> This is the template for the recommendations. You can use any of the Atomic web components to build your template. See [Result sections](https://docs.coveo.com/en/atomic/latest/usage/displaying-results/result-sections/).
<2> An example of using a field dispatched via the [`registerFieldsToInclude`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Recommendation.FieldActionCreators.html#registerFieldsToInclude) method.

### Step 3: Update imports and run the storefront

. Import the `CustomPdpModule` and `AtomicAngularModule` modules in the `./src/app/app.module.ts` file.

```ts
// other imports
import { AtomicAngularModule } from '@coveo/atomic-angular';
import { CustomPdpModule } from "./custom-pdp/custom-pdp.module";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    // other imports
    AtomicAngularModule,
    CustomPdpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

. Run the storefront in the development mode and open any PDP in the browser.
You should see the recommendations carousel powered by Coveo.

```bash
yarn start
```