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 two 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.

Examples

Standard

The component, simply displaying placeholder data.

Set of Sprite Yoga Straps

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. 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
    
        

    

Set of Sprite Yoga Straps

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