Productlistv1

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 Magento via GraphQL using the product identifier provided in the URL selector.

On an author instance, when the page URL does not contain any selector, 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 selector displays a "No products to display" message.

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

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. 
        jcr:primaryType:
        nt:unstructured
    
    2. 

  2. 
        jcr:createdBy:
        admin
    
    3. 

  3. 
        showImage:
        true
    
    4. 

  4. 
        showTitle:
        true
    
    5. 

  5. 
        loadClientPrice:
        true
    
    6. 

  6. 
        jcr:lastModifiedBy:
        admin
    
    7. 

  7. 
        jcr:created:
        
    
    8. 

  8. 
        pageSize:
        6
    
    9. 

  9. 
        jcr:lastModified:
        
    
    10. 

  10. 
        sling:resourceType:
        cif-components-examples/components/productlist
    
    11.

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

    
    
  1. 
        jcr:primaryType:
        nt:unstructured
    
    2. 

  2. 
        jcr:createdBy:
        admin
    
    3. 

  3. 
        startLevel:
        2
    
    4. 

  4. 
        jcr:lastModifiedBy:
        admin
    
    5. 

  5. 
        jcr:created:
        
    
    6. 

  6. 
        jcr:lastModified:
        
    
    7. 

  7. 
        sling:resourceType:
        cif-components-examples/components/breadcrumb
    
    8. 

  8. 
        structureDepth:
        2
    
    9.

Built with Core Components 2.15.2.