Productlistv2

The Product List component is a server side component written in HTL, allowing to display product listings. The product listings for a category are retrieved from Adobe Commerce via GraphQL using the product identifier provided in the URL suffix.

On an author instance, when the page URL does not contain any suffix, like for example when the page is edited in the AEM editor, the component displays some placeholder data. On a publish instance, not setting any suffix redirects to the 404 page.

Note that when a suffix is set, this example page always displays the same products data based on some sample data. Try:

The component can be configured:

  • to display/hide the category image if there is any.
  • to display/hide the category title.
  • to show a given number of products per page.
  • to dynamically load products prices in an additional client-side (browser) query after page load.
When available, the component will also display search aggregations/facets that can be used to further refine the displayed products. There is also a pagination bar added at the bottom. Note that the filters and the pagination do not have any effect on this example page, but you can see in the URL how these extra parameters would be passed as query parameters.
 
For the example with sample data, the clientlib part of the component will also issue a client-side GraphQL query to refetch the products prices on page load. This demonstrates how prices can be refreshed upon page load even if the rest of the page data may be cached in the AEM dispatcher.

Examples

Standard

The component, simply displaying sample data.

    
    

    

    
  1. 
        showImage:
        true
    
    2. 

    
  2. 
        showTitle:
        true
    
    3. 

    
  3. 
        loadClientPrice:
        true
    
    4. 

    

    

    
  4. 
        pageSize:
        6
    
    5. 

    

    
  5. 
        sling:resourceType:
        cif-components-examples/components/productlist
    
    6.

In addition to the productlist component, this demonstrates the breadcrumb component displaying page content and commerce data up to the category page.

    
    

    

    
  1. 
        startLevel:
        2
    
    2. 

    

    

    

    
  2. 
        sling:resourceType:
        cif-components-examples/components/breadcrumb
    
    3. 

    
  3. 
        structureDepth:
        2
    
    4.

Built with Core Components 2.27.0.