Product_v2

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. The format of the URL suffix is configurable.

On an author instance, when the page URL does not contain any suffix, 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 suffix redirects to the 404 page.

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

• Showing sample data (suffix is set in URL)
• Showing sample data for a staged product (suffix is set in URL)
• Showing sample data for a grouped product (only for this particular suffix in the URL)
• Showing sample data for a bundle product (only for this particular suffix in the URL)
• Showing sample data (manual product selection)
  
• Showing 404 page on publish instance (no suffix in URL)

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.