Productv2

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

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

In addition, the example showing a bundle product includes a small React application that is activated when clicking on the "Customize" button. It is used to fetch the bundle options with a client-side GraphQL request and to calculcate and prepare the product data for the cart when selecting the options of the bundle product.

Examples

Standard

The component, simply displaying placeholder data.

Set of Sprite Yoga Straps

Image
Product Name Quantity

Sprite Yoga Strap 6 foot

$14.00

Sprite Yoga Strap 8 foot

$17.00

Sprite Yoga Strap 10 foot

$21.00

Product Description

Great set of Sprite Yoga Straps for every stretch and hold you need. There are three straps in this set: 6', 8' and 10'.

  • 100% soft and durable cotton.
  • Plastic cinch buckle is easy to use.
  • Choice of three natural colors made from phthalate and heavy metal free dyes.

SKU

24-WG085_Group 
    
    

    

    
  1. 
        loadClientPrice:
        true
    
    2. 

    

    

    

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



    
        

    



    

        
            
            
            
            

                
    
    

    	Set of Sprite Yoga Straps
    


                
            

            

                
    

        

            
            Image
            
        

        

            
                
            
        

    


            

            
            

                
    

        
            

                Product Name
                Quantity
            

        
        
            
            

                
                    
Sprite Yoga Strap 6 foot

                    
    

        
        $14.00
    

    

                		
                
                    
    

        
            
                
            
            
            
                
                    
                        
                    
                
            
        
        

    


                		
            

            
            

                
                    
Sprite Yoga Strap 8 foot

                    
    

        
        $17.00
    

    

                		
                
                    
    

        
            
                
            
            
            
                
                    
                        
                    
                
            
        
        

    


                		
            

            
            

                
                    
Sprite Yoga Strap 10 foot

                    
    

        
        $21.00
    

    

                		
                
                    
    

        
            
                
            
            
            
                
                    
                        
                    
                
            
        
        

    


                		
            

            
        
    


            

            
            
            
            

                
  
  

            

            

                
    

        Product Description
    

    

        
Great set of Sprite Yoga Straps for every stretch and hold you need. There are three straps in this set: 6', 8' and 10'.


  •  100% soft and durable cotton.

  •  Plastic cinch buckle is easy to use.

  •  Choice of three natural colors made from phthalate and heavy metal free dyes.


    


            

            

                
    
SKU

    24-WG085_Group

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

    
    

    

    
  1. 
        startLevel:
        2
    
    2. 

    

    

    

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

    
  3. 
        structureDepth:
        2
    
    4.

In addition to the product component, this demonstrates the commerce experience fragment component displaying its content dynamically based on both the "fragmentLocation" property and the SKU of the product currently being displayed. This is empty unless the product SKU matches MH01.

    
    

    

    

    

    
  1. 
        fragmentLocation:
        bottom
    
    2. 

    

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

In addition to the product component, this demonstrates the Commerce Content Fragment component displaying its content dynamically based on the "modePath" property and the SKU of the product currently being displayed. This is empty unless the product SKU matches MH01.

    
    

    

    
  1. 
        modelPath:
        /conf/core-components-examples/settings/dam/cfm/models/product-specs
    
    2. 

    

    
  2. 
        elementNames:
        productSpecs
    
    3. 

    

    
  3. 
        linkElement:
        productSku
    
    4. 

    

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

    
  5. 
        displayMode:
        multi
    
    6.

Built with Core Components 2.27.0.