Build recommendation interfaces

This is for:

Developer
In this article
Important

Atomic for Commerce components are in open beta and remain under active development.

Atomic for Commerce hasn’t yet gone through a formal accessibility review. If you have accessibility needs, contact your customer success manager and we’ll work with you to address them.

You can use the atomic-commerce-recommendation-list component to display a list of product recommendations by applying one or more product templates.

Wrap one or more recommendation lists in the atomic-commerce-recommendation-interface component.

Prerequisites

Before you begin building your recommendation interfaces, make sure you:

  1. Understand how recommendation interfaces work.

  2. Create recommendation configurations.

Code Sample

Following is a minimal example of a search interface built with Atomic for Commerce. This uses getSampleCommerceEngineConfiguration from @coveo/headless/commerce for its configuration. This won’t work in a production environment.

For a detailed breakdown of how to configure your recommendation interface, refer to the Coveo Headless documentation for CommerceEngineConfiguration.

<html>
  <head>
    <title>Example Recommendation Page</title>
      <script
          type="module"
          src="https://static.cloud.coveo.com/atomic/v3/atomic.esm.js">  1
      </script>
      <link
          rel="stylesheet"
          href="https://static.cloud.coveo.com/atomic/v3/themes/coveo.css"/>  2
    <script type="module">
      (async () => {
        const {
          buildCommerceEngine,
          getSampleCommerceEngineConfiguration
        } = await import('http://static.cloud.coveo.com/headless/v3/commerce/headless.esm.js');  3

        await customElements.whenDefined('atomic-commerce-recommendation-interface');
        const commerceInterface = document.querySelector('atomic-commerce-recommendation-interface'); 4
        await commerceInterface.initializeWithEngine(
          buildCommerceEngine({
            configuration: getSampleCommerceEngineConfiguration(),
          })
        );
      })();
    </script>
  </head>
  <body>
    <atomic-commerce-recommendation-interface>
      <atomic-commerce-recommendation-list 5
        display="list"
        density="normal"
        image-size="small"
        products-per-page="3"
        slot-id="af4fb7ba-6641-4b67-9cf9-be67e9f30174" 6
      >
    </atomic-commerce-recommendation-interface>
  </body>
</html>
1 Import the Atomic for library. This is responsible for handling the web components.
2 Link the Coveo theme stylesheet. This provides the default styling for the web components.
3 Import the Headless for Commerce library to get the sample configuration and the engine builder. When providing your own configuration you won’t need to getSampleCommerceEngineConfiguration.
4 Initialize the atomic-commerce-recommendation-interface.
5 The recommendation list for the interface.
6 The identifier used by the Commerce API to retrieve the recommendation list for the component.

You can find a complete example of a recommendation carousel in Storybook.