AEM SPA Ecommerce - Hybris

[michaelvino86]

Hi All,

I am planning to create a PDP page using SPA. Traditional way of doing is getting the data from hybris and AEM side will create the component and display the product. Now SPA came to the picture, who will create the PDP component? is it SPA  team or AEM?

is SPA for creating PDP page is a good practice? if yes please explain the flow

Thanks,

Mike

[kautuk_sahni]

gauravb10066713 SammyK267 Any suggestions on this SPA questions?

[SammyK267]

Hey there,

I think answer is it depends. Now that SPA is going to coexist with AEM, we must classify components as either authorable or nonauthorable. For a PDP (product detail page), is all the data coming from Hybris? If so, then only a SPA component is required and you won't need to MAP to AEM component. However, if it is authorable you will need to have both teams work hand in hand. Handoffs are not ideal for this type of development since there are dependencies on both sides. Best case scenario, you have a development team that can do both.

I'm not sure if using a SPA on a eCommerce site is best practice. I would advise doing some research on the advantages of the SPA architecture and see if it fits your needs.

[Gaurav-Behl]

I haven't seen any papers on SPA-ecomm integration as a recommended path. In my mind, I'm not sure of the benefits of SPA owning it rather than AEM with GraphQL route. I'd probably do more research later.

Alternate route per Adobe's own CIF  --  Integrations

Integration pattern

The AEM Venia Store front is a mixed page application in which AEM owns the glass and Magento powers the commerce backend in a headless way. Both server-side rendering and client-side rendering are used in the storefront. Server-side rendering is used to deliver static content and client-side rendering is used to deliver dynamic content.

Product and Catalog pages are relatively static and are rendered server-side using AEM Core Components such as Product Detail and Product List on generic templates created in AEM. These components get data from Magento via GraphQL APIs.
These pages are created dynamically, rendered on the server, cached on the AEM dispatcher and then delivered to the browser.
For more dynamic attributes such as Inventory or Price, on the other hand, client-side components are used. Client-side components or Web components fetch data directly from Magento via GraphQL APIs and the content is then rendered on the browser.

Similar references:

Building a GraphQL content API to consume AEM content | Kornel on Digital

Gen 2 Headless with GraphQL | BORN