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

Creating a custom B2B Commerce Einstein recommendations component includes implementing the Activity Tracking API and connecting the component to the Commerce Einstein Webstore Recommendations Connect API resource. This process is for B2B stores on the Aura platform.

Using Connect APIs ensures appropriate product entitlement filtering before recommendations are delivered.

Make sure to reindex after you change associations between buyer groups and products, such as when changing entitlement policies or product-to-buyer group assignments.

Your component must incorporate calls to the Activity Tracking API. When configuring the API:

  • Implement both the viewReco and clickReco activities.
  • If you replace the Product Detail Purchase Options component with a custom component, implement the viewProduct activity.
  • If you add custom add-to-cart functionality, implement the addToCart activity.

You can use custom JavaScript, HTML, and CSS to make front-end modifications. For more information, see the Lightning Aura Components Developer Guide.

  1. Create a custom Apex controller.

    1. Go to Setup | Developer Console.

    2. Select File | New | Apex Class.

    3. Enter a name for the Apex class.

      Make sure to match the component class name for easier identification. For example, recsController.

      The controller file (in this case, recsController.apxc) opens to show an empty class.

  2. Update the controller file, making sure to modify the orgDomain and webstoreId values to match your storefront domain and ID.

  3. Update the controller file with the appropriate profile for buyers.

    1. Go to Setup | Custom Code | Apex Classes.

    2. Next to the controller file that you created, click Security.

    3. Add the Shopper profile to the enabled profiles column.

    4. Click Save.

  4. Create an SFDX project in Visual Studio Code and run the SFDX: Create Aura Component command.

  5. Specify a name for the component.

  6. Update the component file with the attribute configuration (for example, force-app/main/default/aura/<project_name>/<component_name>.cmp).

    Make sure to use the controller filename that you used when creating the Apex controller, and provide the tag needed for importing activity tracking.

  7. Update the metadata in the component’s XML file (for example, force-app/main/default/aura/<project_name>/<component_name>.cmp-meta.xml).

    Make sure that the <apiVersion> tag references the latest API version.

  8. Edit your component’s CSS file to add custom styling (for example, force-app/main/default/aura/<project_name>/<component_name>.css).

    This sample code includes modifications to the component’s image size and headings.

  9. Edit your component’s Controller.js file, making sure to modify the storeName value for the current store (for example, force-app/main/default/aura/<project_name>/<component_name>Controller.js).

  10. Edit your component’s Helper.js file, using this example for guidance (for example, force-app/main/default/aura/<project_name>/<component_name>Helper.js).

  11. After you create the custom Einstein Recommendations component, deploy it from Visual Studio Code and place it in your store with Experience Builder.

  12. Before publishing your site from Experience Builder, click Preview to see how the custom component looks in a desktop browser window and on a mobile device.

See Also