Add a frequently bought together recommendation widget

Sitecore Discover offers a recommendation widget encouraging visitors to buy products that are frequently bought together on a product details page. Similar to other widget templates, it is built with UI components primitives and styles. You can edit the styles in these components or replace entire components.

Screenshot of a typical Frequently bought together recommendation widget.

The frequently bought together recommendation widget is a RecommendationContainer containing the following two components:

  • PurchaseTogetherListView - a list of product thumbnails and price details with an Add to cart button.

  • PurchaseTogetherCheckboxList - a product checklist that visitors use to include or exclude before clicking Add to cart.

To create a custom styled query hooked frequently bought together recommendation widget component:

  1. In the UI components reference site, in the Widget templates section, open the Recommendation page.

  2. In your React project, in the widget_components folder, create a folder named frequentlyBoughtTogetherStyled.

  3. From the list of templates, on the Frequently Bought Together Styled page, click index.js to copy the code block.

  4. In the frequentlyBoughtTogetherStyled folder, create a JavaScript file called index.js, then paste the copied code block into it, and save.

  5. From the list of templates, in the Styled carousel section, click styled.js to copy the code block.

  6. On the Frequently Bought Together Styled page, create a JavaScript file, styled.js, then paste the copied code block into it, and save.

  7. In the styled.js file, edit the styled primitives, and save.

  8. In the component for the page details page, add a component as shown in the following code block.

    RequestResponse
    imports RecommendationFrequentlyBoughtTogetherStyledWidget from "./widget_components/frequentlyBoughtTogetherStyled";

const PageDetailsPage = () => {
    ...
    ...
    return (

        ...
        <RecommendationFrequentlyBoughtTogetherStyledWidget rfkId="frequently_recommendation" />
        ...
    )
};

  9. To avoid compile errors, update the imports section, and save.

Do you have some feedback for us?

If you have suggestions for improving this article,