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

Manual Product Selection

Alternatively, the component is configured to display a product which was manually selected in the editing dialog.

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. selection: MH01
  3. sling:resourceType: cif-components-examples/components/product
    
        

    

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