Productv1

The product component is a server side component written in HTL, allowing to display product details. The product details 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 Sites editor, the component displays some placeholder data. On a publish instance, not setting any selector displays a "Product not found" message.

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

For the three examples with sample data, the clientlib part of the component will also issue a client-side GraphQL query to refetch the product 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.

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.

Sprite Yoga Companion Kit

From $61.00 To $77.00

Product Description

A well-rounded yoga workout takes more than a mat. The Sprite Yoga Companion Kit helps stock your studio with the basics you need for a full-range workout. The kit is composed of four best-selling Luma Sprite accessories in one easy bundle: statis ball, foam block, yoga strap, and foam roller. Choose sizes and colors and leave the rest to us. The kit includes:

  • Sprite Statis Ball
  • Sprite Foam Yoga Brick
  • Sprite Yoga Strap
  • Sprite Foam Roller

SKU

24-WG080
  1. jcr:primaryType: nt:unstructured
  2. jcr:createdBy: admin
  3. loadClientPrice: true
  4. jcr:lastModifiedBy: admin
  5. jcr:created:
  6. jcr:lastModified:
  7. sling:resourceType: cif-components-examples/components/product
    
        

    

Sprite Yoga Companion Kit

From $61.00 To $77.00

Product Description

A well-rounded yoga workout takes more than a mat. The Sprite Yoga Companion Kit helps stock your studio with the basics you need for a full-range workout. The kit is composed of four best-selling Luma Sprite accessories in one easy bundle: statis ball, foam block, yoga strap, and foam roller. Choose sizes and colors and leave the rest to us. The kit includes:

  • Sprite Statis Ball
  • Sprite Foam Yoga Brick
  • Sprite Yoga Strap
  • Sprite Foam Roller

SKU

24-WG080

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

  1. jcr:primaryType: nt:unstructured
  2. jcr:createdBy: admin
  3. startLevel: 2
  4. jcr:lastModifiedBy: admin
  5. jcr:created:
  6. jcr:lastModified:
  7. sling:resourceType: cif-components-examples/components/breadcrumb
  8. structureDepth: 2

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. jcr:primaryType: nt:unstructured
  2. jcr:createdBy: admin
  3. jcr:lastModifiedBy: admin
  4. jcr:created:
  5. fragmentLocation: bottom
  6. jcr:lastModified:
  7. sling:resourceType: cif-components-examples/components/experiencefragment