Implementing Upsell & Cross-Sell Product Recommendations

Fast Simon JavaScript SDK allows developers to embed product recommendations that includes Fast Simon advanced BigData AI, Merchandising, Personalization and more.

Using the Fast Simon JavaScript SDK, you can easily follow the following pattern to place a recommendation snippet in a product page:

• Retrieve recommedations for a given shopper and viewed product

• Render a product carousel for shoppers

• Report shopper activity visiting recommendations

1. Getting Recommendations

The productRecommendation method allows you to get Upsell & Cross-Sell Product Recommendations for a given shopper.

The Upsell & Cross-Sell Product Recommendations method utilizes the Fast Simon algorithms to present the best conversion optimized via the Fast Simon SDK.

window.FastSimonSDK.productRecommendation({
    productID: "1233231",
    specs: [
        {
            sources: ["similar_products", "similar_products_by_attributes"],
            maxSuggestions: 5,
            widgetID: "my-widget"
        }
    ],
    callback: (response) => {
        const payload = response.payload;

        if (payload.length > 0) {
            for (let i = 0; i < payload.length; i++) {
                const widgetPayload = payload[0].payload;
                if (widgetPayload) {
                    const recommendationItems = widgetPayload.map(item => {
                        const productDetail = item;
                        return {
                            id: +productDetail.id,
                            variantId: productDetail.vra[0][0],
                            title: productDetail.l,
                            price: "$" + productDetail.p,
                            regularPrice: "$" + productDetail.p_c,
                            imageUrl: productDetail.t,
                            imageUrl2: productDetail.t2,
                            href: productDetail.u
                        };
                    });

                    renderRecommendationWidget(recommendationItems);
                }
            }
        }
    }
});

The productRecommendation request options:

Option	Type	Description
productID	string (required)	Currently viewed product
callback	response void (required)	Callback to render the recommendations.
recent	string[]	List of recently viewed products
maxSuggestions	string[]	Max number of product suggestions
specs	specs[]	List of widget sourcs
withAttributes	boolean Default: false	Determines whether to include attributes in the product response. Note: might increase latency, so use only if you need product tags or attributes.

---

The productRecommendation Response

RecommendationResponse

Property	Type	Description
action	string	Indicates the type of action performed, e.g., "recommendations".
payload	RecommendationItem[]	An array of RecommendationItem objects representing recommendation items.

Description: The RecommendationResponse interface represents a response object containing information about a recommendation action.

RecommendationItem

Property	Type	Description
categoriesIDs	string[]	An array of category IDs related to the item.
productID	string	The ID of the product associated with the item.
widgetID	string	The ID of the widget related to the item.
payload	ProductDetail[]	An array of ProductDetail objects containing details of the product.
sources	string	A string representing the sources of the item.

Description: The RecommendationItem interface represents a single recommendation item with various properties describing the item and its associated details.

ProductDetail

Property	Type	Description
id	string	The ID of the product.
vra	string[][]	An array containing variant information.
l	string	The title or label of the product.
p	number	The price of the product.
p_c	number	The regular price of the product.
t	string	The URL of the product's image.
t2	string	An additional URL of the product's image.
u	string	The URL of the product's page.

Description: The ProductDetail interface represents details of a product, including its ID, variants, title, prices, images, and page URL.

2. Rendering Upsell & Cross-Sell Product Recommendations per Shopper Query

Having a personalized upsell & cross-sell product results is key to optimizing user experience and conversion optimization. Below is a short code snippet illustrating showing recommendations.

function renderRecommendationWidget(recommendationItems) {
    // Create a container div for the widget
    const widgetContainer = document.createElement("div");
    widgetContainer.className = "recommendation-widget";

    // Create a heading for the widget
    const widgetHeading = document.createElement("h2");
    widgetHeading.textContent = "You may also like";

    // Create a list to hold the recommendation items
    const recommendationList = document.createElement("ul");

    // Iterate through the recommendation items and create list items
    recommendationItems.forEach((item) => {
        const listItem = document.createElement("li");

        // Create an image element for the product image
        const image = document.createElement("img");
        image.src = item.imageUrl;
        image.alt = item.title;

        // Create a link to the product page
        const productLink = document.createElement("a");
        productLink.href = item.href;
        productLink.textContent = item.title;

        // Create a paragraph for the product price
        const priceParagraph = document.createElement("p");
        priceParagraph.textContent = item.price;

        // Append elements to the list item
        listItem.appendChild(image);
        listItem.appendChild(productLink);
        listItem.appendChild(priceParagraph);

        // Append the list item to the recommendation list
        recommendationList.appendChild(listItem);
    });
        // Append the heading and recommendation list to the container
    widgetContainer.appendChild(widgetHeading);
    widgetContainer.appendChild(recommendationList);

    // Append the widget container to the document or a specific element
    document.body.appendChild(widgetContainer);
}

3. Reporting Shopper Activity

Whenever a shopper selects a product from the product recommendations, Fast Simon needs to report the activity.

Product Clicked in Product Recommendations Event

window.FastSimonSDK.event({
    eventName: window.FastSimonEventName.RecommendationProductClicked,
    data: {
        query: term,
        productID: "234213423"
    }
});

Event type RecommendationProductClicked options:

Option	Value	Description
productID	string	Product ID chosen by the shopper
position	string	Position of the product in the widget / popup (counted from 1)
sourceProductID	string	source product ID (example product page product ID)

---