Build product listing pages

This is for:

Developer

In this article

Prerequisite
Code Sample
Product listing page components

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 Account Manager and we’ll work with you to address them.

All product listing pages (PLPs) in Atomic use the atomic-commerce-product-list component to fetch product listings and display the products.

It must be placed inside a atomic-commerce-interface with the type attribute set to product-listing.

Prerequisite

Make sure that you understand how to build product listing pages (PLPs).

Code Sample

Following is a minimal example of a product listing page 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 product listing interface, refer to the Coveo Headless documentation for CommerceEngineConfiguration.

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

        await customElements.whenDefined('atomic-commerce-interface');
        const commerceInterface = document.querySelector('atomic-commerce-interface');
        await commerceInterface.initialize(getSampleCommerceEngineConfiguration()); 
        commerceInterface.executeFirstRequest();
      })();
    </script>
  </head>
  <body>
    <atomic-commerce-interface analytics language="en" reflect-state-in-url type="product-listing">
      <atomic-commerce-product-list number-of-placeholders="4"></atomic-commerce-product-list> 
    </atomic-commerce-interface>
  </body>
</html>

	Import the Atomic for library. This is responsible for handling the web components.
	Link the Coveo theme stylesheet. This provides the default styling for the web components.
	Import the Headless for Commerce library to get the sample configuration. When providing your own configuration you won’t need to import this function.
	Initialize the `atomic-commerce-interface`.
	The product list page for the interface. For additional options refer to Product listing page components.

You can find a complete example of a product listing page in Storybook.

Product listing page components

A product listing page typically consists of a list of products, as well as components to filter and navigate the products. Here is a list of useful Atomic components that can be added to a product listing page:

atomic-commerce-search-box: A product listing page can have a standalone search box that lets users perform product searches and redirects them to a search page.
atomic-commerce-facets: This component renders facets that let users filter products by category or by attributes such as product price or color.
atomic-commerce-sort-dropdown: This component renders a dropdown that lets users choose how to sort query products, such as by relevance, date, or product price.
atomic-commerce-pager: This component renders a pager that lets users navigate through paginated product results.
atomic-commerce-load-more-products: This component lets users load additional products if more are available.

Note

The atomic-commerce-pager and atomic-commerce-load-more-products components can’t be used together.