Create a Custom Recommendations Component for B2C Stores Using Commerce Einstein APIs

Creating a custom B2C Commerce Einstein recommendations component includes implementing the Activity Tracking API and connecting the component to the Product Recommendation API.

For B2C storefronts, you connect the component to the Product Recommendation API through a wire adapter. Your component must incorporate calls to the Activity Tracking API. When configuring the Activity Tracking API, keep these considerations in mind.

Implement both the viewReco and clickReco activities.
If you build custom components that show product details without including the Product Detail Purchase Options component, make sure to implement the viewProduct activity.
If you add custom add-to-cart functionality, also implement the addToCart activity.

You can also introduce custom JavaScript, HTML, and CSS to make front-end modifications. For more information, see the Lightning Web Components Dev Guide.

This example shows a custom similar-products Commerce Einstein recommendation component using the PRODUCT anchor type. All steps refer to files created for a sample Lightning web component. For more information, see Create a Sample Lightning Web Component.

Note

In the component’s JavaScript file, define a custom component class (for example, RecommendationsSample). Implement the ProductRecommendationsAdapter to return Einstein product recommendations.

For example, in force-app/main/default/<Component Name>.js, import this wire adapter from the recommendationsApi module within the commerce namespace (commerce/recommendationsApi). Declare its required parameters with the @wire decorator.

1import { LightningElement, api, track, wire } from 'lwc';
2import { ProductRecommendationsAdapter, ANCHOR_TYPES } from 'commerce/recommendationsApi';
3import { navigate, NavigationContext } from 'lightning/navigation';
4import { trackClickReco, trackViewReco } from 'commerce/activitiesApi';
5
6export default class RecommendationsSample extends LightningElement {
7
8    @api products = [];
9    @api productId;
10
11    recommenderName = 'similar-products';
12    anchorType = ANCHOR_TYPES.PRODUCT;
13    get anchorValue() {
14        return [this.productId];
15    };
16
17    @wire(ProductRecommendationsAdapter, {
18        recommenderName: '$recommenderName',
19        anchorType: '$anchorType',
20        anchorValue: '$anchorValue',
21    })
22    async loadRecommendation(response) {
23        let { data, error } = response;
24
25        if (data && data.recoUUID && data.products && data.products.length > 0) {
26            this.products = data.products;
27            this.recoUUID = data.recoUUID;
28
29            if (this.canDisplayRecommendations) {
30                this.sendViewReco();
31            }
32        } else if (error) {
33            // unable to load recommendation, handle accordingly
34            this.products = { data: [] };
35            console.error('Unable to load product recommendations');
36        }
37    }
38
39    get canDisplayRecommendations() {
40        return this.products.length > 0;
41    }
42
43    // NavigationContext allows us to click a link to get to new Product page
44    @wire(NavigationContext)
45    navContext;
46
47    handleClickProduct(event) {
48        const pid = event.currentTarget.getAttribute('pid');
49        const product = this.products.filter(p => p.id === pid)[0];
50
51        trackClickReco(this.recommenderName, this.recoUUID, {
52            id: product.id,
53            sku: product.sku,
54        });
55
56        // go to the Product Detail Page for the product clicked
57        navigate(this.navContext, {
58            type: 'standard__recordPage',
59            attributes: {
60                objectApiName: 'Product2',
61                recordName: product.fields.Name.replace(' ', '-'),
62                name: 'recordId',
63                recordId: pid,
64            },
65        });
66    }
67
68    sendViewReco() {
69        trackViewReco(
70            this.recommenderName,
71            this.recoUUID,
72            this.products.map((product) => {
73                return {
74                    id: product.id,
75                    sku: product.sku,
76                };
77            })
78        );
79    }
80}

Update the component’s HTML file (for example, force-app/main/default/<Component Name>.html).

1<template>
2    <section class="component-wrapper" if:true={canDisplayRecommendations}>
3        <h1>Product Recommendations</h1>
4        <table>
5            <tr>
6                <th>Image</th>
7                <th>Name</th>
8                <th>List Price</th>
9                <th>Unit Price</th>
10            </tr>
11            <template for:each={products} for:item="product">
12                <tr key={product.id}>
13                    <td><img src={product.defaultImage.url}></img></td>
14                    <td>
15                        <a key={product.id} class="product-line" onclick={handleClickProduct} pid={product.id}>
16                            {product.fields.Name}
17                        </a>
18                    </td>
19                    <td>{product.prices.listPrice} {product.prices.currencyIsoCode}</td>
20                    <td>{product.prices.unitPrice} {product.prices.currencyIsoCode}</td>
21                </tr>
22            </template>
23        </table>
24    </section>
25</template>

Update the metadata in the component’s XML file (for example, force-app/main/default/<Component Name>.js-meta.xml).

Ensure that the <apiVersion> tag references the latest API version.

Note

1<?xml version="1.0" encoding="UTF-8"?>
2<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3    <apiVersion>55.0</apiVersion>
4    <isExposed>true</isExposed>
5    <targets>
6        <target>lightningCommunity__Page</target>
7        <target>lightningCommunity__Default</target>
8    </targets>
9
10    <targetConfigs>
11        <targetConfig targets="lightningCommunity__Default">
12            <property label="Product Id" name="productId" type="String" default="{!recordId}" />
13        </targetConfig>
14    </targetConfigs>
15</LightningComponentBundle>

In your lwc directory, create a CSS file with the same name as your project. In this example, the CSS file is named recommendationsSample.css.
In the CSS file, add custom CSS to style your component. The sample code provided includes modifications to the component’s image size and headings.
1h1 { 2 font-size: 1.5em; 3 font-weight: 800; 4} 5img { 6 width: 150px; 7} 8th { 9 font-weight: 800; 10}
After you create the custom Einstein Recommendations component, deploy the component from Visual Studio Code and place it in your store with Experience Builder.
Before publishing your site from Experience Builder, click Preview to see how the custom component looks in a desktop browser window or on a mobile device.

See Also