Edit in GitHubLog an issue

Product Recommendations

You can integrate Product Recommendations powered by Adobe Sensei into your PWA Studio storefront.

Integration overview#

Product Recommendations for PWA Studio

Adobe's Product Recommendations powered by Adobe Sensei is a feature backed by several SaaS services. The Store side includes your PWA storefront, which contains the event collector and recommendations layout template, and the backend, which includes the GraphQL endpoints, SaaS Export module, and the Admin UI.

After you install the Product Recommendations PWA extension on your store, it will start sending behavioral data to Adobe Sensei with no additional setup. Adobe Sensei processes this behavioral data along with the catalog data from the backend and calculates the product associations leveraged by the recommendations service. At this point, the merchant can create and manage recommendation units from the Adobe Commerce Admin UI then fetch those product recommendation units from their PWA storefront.

Install the Product Recommendations module#

Product Recommendations support on PWA requires installing the venia-product-recommendations package and the Product Recommendations module for Adobe Commerce.

  1. You can install the PWA venia-product-recommendations package from the NPM registry:

    Copied to your clipboard
    npm install @magento/venia-product-recommendations

    This package contains storefront functionality to collect required behavioral data and render the recommendations. Some recommendation types use behavioral data from your shoppers to train machine learning models that build personalized recommendations. Other recommendation types use catalog data only and do not use any behavioral data. See the user guide to learn how Adobe Sensei trains machine learning models that results in higher quality recommendations.

  2. The backend functionality is provided by the Product Recommendations module for Adobe Commerce.

  3. Additionally, you need to install the module-data-services-graphql module that expands the application's existing GraphQL coverage to include fields required for storefront behavioral data collection.

    Copied to your clipboard
    composer require magento/module-data-services-graphql

Create recommendation units#

Creating a product recommendation unit for your PWA storefront is the same as creating one for a theme. When you create a recommendation unit in the Admin UI panel, you will need to place components that render product recommendations on appropriate storefront pages. You will do this only once per supported page type.

Render recommendations#

To control the recommendation unit placement on your PWA storefront, use the local intercept file. See the extensibility framework documentation to learn more. To render the recommendation unit on your PWA storefront, use one of the methods described below.

Venia UI component#

The Recommendations component is part of the venia-product-recommendations package. It contains React components that do the following:

  • Collect and send behavioral data to Adobe Sensei
  • Fetch recommendations from the recommendations service
  • Render the recommendation unit to your storefront page

Example#

Copied to your clipboard
1//Render recommendations using visual component
2import {
3 VeniaProductRecommendations,
4 PageTypes,
5} from "@magento/venia-product-recommendations";
6return <VeniaProductRecommendations pageType={PageTypes.CMS} />;

Fetch data only#

If you are not using the venia-product-recommendations package, you can call the recommendations service and receive a JSON payload.

Example#

Copied to your clipboard
1import {
2 Pagetypes,
3 useRecsData,
4 VeniaProductRecommendations,
5} from "@magento/venia-product-recommendations";
6const { data, error, isLoading } = useRecsData({ pagetype: Pagetypes.CMS });

Next steps

    • Privacy
    • Terms of Use
    • Do not sell my personal information
    • AdChoices
    Copyright © 2021 Adobe. All rights reserved.