AEM SPA Ecommerce - Hybris

Avatar

Avatar
Validate 25
Level 3
michaelvino86
Level 3

Likes

15 likes

Total Posts

75 posts

Correct reply

1 solution
Top badges earned
Validate 25
Validate 10
Validate 1
Boost 5
Boost 3
View profile

Avatar
Validate 25
Level 3
michaelvino86
Level 3

Likes

15 likes

Total Posts

75 posts

Correct reply

1 solution
Top badges earned
Validate 25
Validate 10
Validate 1
Boost 5
Boost 3
View profile
michaelvino86
Level 3

25-07-2019

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

Replies

Avatar

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,200 likes

Total Posts

6,394 posts

Correct reply

1,147 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,200 likes

Total Posts

6,394 posts

Correct reply

1,147 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile
kautuk_sahni
Community Manager

26-08-2019

gauravb10066713 SammyK267 Any suggestions on this SPA questions?

Avatar

Avatar
Give Back
Level 1
SammyK267
Level 1

Likes

0 likes

Total Posts

5 posts

Correct reply

0 solutions
Top badges earned
Give Back
Validate 1
View profile

Avatar
Give Back
Level 1
SammyK267
Level 1

Likes

0 likes

Total Posts

5 posts

Correct reply

0 solutions
Top badges earned
Give Back
Validate 1
View profile
SammyK267
Level 1

26-08-2019

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.

Avatar

Avatar
Boost 250
MVP
Gaurav-Behl
MVP

Likes

250 likes

Total Posts

1,147 posts

Correct reply

283 solutions
Top badges earned
Boost 250
Establish
Give back 300
Give Back 50
Give Back 5
View profile

Avatar
Boost 250
MVP
Gaurav-Behl
MVP

Likes

250 likes

Total Posts

1,147 posts

Correct reply

283 solutions
Top badges earned
Boost 250
Establish
Give back 300
Give Back 50
Give Back 5
View profile
Gaurav-Behl
MVP

26-08-2019

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