Relatedproductsv1

The Related Products component is a server-side component written in HTL, allowing to display a list of related products in a carousel style. This component actually reuses the Product Carousel component to display the products. The products are retrieved from Magento via GraphQL. This component can be used on any experience page.

The component can be configured to fetch products based on the 3 "relation types" that exist between products in the Magento GraphQL schema:

  • Related products
  • Upsell products
  • Cross-sell products

The base product used to display the related products is either taken from:

  • the selector in the product URL (that is, if the component is used on a product page)
  • the "product" property that can be configured in the component dialog

Note: due to the limited amount of sample data available, the links to product pages will always display the same demo product.

Examples

Standard

The component, simply displaying sample data.

Upsells for the Summit Backback!

Summit Watch
Summit Watch
$54.00
Image
Bolo Sport Watch
$49.00 
    
    

    

    
  1. 
        jcr:title:
        Upsells for the Summit Backback!
    
    2. 

    

    

    
  2. 
        product:
        24-MB02
    
    3. 

    
  3. 
        relationType:
        UPSELL_PRODUCTS
    
    4. 

    

    
  4. 
        sling:resourceType:
        cif-components-examples/components/relatedproducts
    
    5. 



    
        

    







    
Upsells for the Summit Backback!

    
    
    

        

            

                
    
      

          
              

                  Summit Watch
              

              
Summit Watch

              
    

        
        $54.00
    

    

          
      



            
                
    
      

          
              

                  Image
              

              
Bolo Sport Watch

              
    

        
        $49.00

Built with Core Components 2.27.0.