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.

Chaz Kangeroo Hoodie

$52.00

Color

Size

Quantity

Product Description

Ideal for cold-weather training or work outdoors, the Chaz Hoodie promises superior warmth with every wear. Thick material blocks out the wind as ribbed cuffs and bottom band seal in body heat.

• Two-tone gray heather hoodie.
• Drawstring-adjustable hood.
• Machine wash/dry.

SKU

MH01 
    
    

    

    
  1. 
        loadClientPrice:
        true
    
    2. 

    

    

    

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



    
        

    



    

        
            
            
            
            

                
    
    

    	Chaz Kangeroo Hoodie
    


                
    

        
        $52.00
    

    

            

            

                
    

        

            
            
            
        

        

            
                
            
                
            
                
            
        

    


            

            

                
    
        

            
Color

            

                
                    
                
                    
                
                    
                
            

            
        

    
        

            
Size

            
            

                
                    
                
                    
                
                    
                
                    
                
                    
                
            

        

    

            

            
            
            
            

                
Quantity

                
    

        
            
                
            
            
            
                
                    
                        
                    
                
            
        
        

    


            

            

                
  
  

            

            

                
    

        Product Description
    

    

        
Ideal for cold-weather training or work outdoors, the Chaz Hoodie promises superior warmth with every wear. Thick material blocks out the wind as ribbed cuffs and bottom band seal in body heat.


• Two-tone gray heather hoodie.
• Drawstring-adjustable hood. 
• Machine wash/dry.

    


            

            

                
    
SKU

    MH01

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.

This is a simple experience fragment example only displayed when the product SKU matches MH01.

    
    

    

    

    

    
  1. 
        fragmentLocation:
        bottom
    
    2. 

    

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



    
        

    




    





    





    
    



    
This is a simple experience fragment example only displayed when the product SKU matches MH01.

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.

Sample Product Specs

Product Specs

Sample product specs for demonstarting the Commerce Content Fragment component.

    
    

    

    
  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. 



    
        

    


    
    

        
Sample Product Specs

        

        
        
            
    

        
    

        
Product Specs

        

            
            
            
Sample product specs for demonstarting the Commerce Content Fragment component.

Built with Core Components 2.27.0.