Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.
SOLVED

Approach for PDP page along with SSR for caching purpose

Avatar

Level 3

Hi,

I have an use case for a retail ecommerce B2C domain client, where we have huge inventory of products with variations. Product have their dynamic data like price and stock availability and other dynamic data. I don't want to use CIF instead inclination is towards API based services exposed by API Gateway and other PIM services. Site is multi locale with high traffic from customers.

 

Question:

1. What is Adobe's recommendation for this use case from best practice point of view?
2. I dont want to create multiple Product detail page nodes in CRX instead a single page which acts like a template and pull rest of the dynamic and authored data (marketing data held in AEM) via API's to hydrate the page for each Product detail page request on first request and perform SSR. Subsequently, cache it at dispatcher/CDN like product-detail-prod-A.html, product-detail-prod-B.html, product-detail-<product name>.html. Rest of the dynamic data like price, inventory/stock availability etc will be pulled at client tier via ajax request(s). Need Adobe's recommendation on this approach and sample reference implementation, if any.

 

Thanks

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@Sahil11 Couple of suggestions based on my experience.

1. You can create a template page like product page which has all the necessary components

2. Create the list of products who links points to the same product page but passes the product id or sku in the selector like this product.<product_id>

3. All the components should be able to read and use the selector ( product_id) and give the product details from the PIM. 

This page will be cached in dispatcher/cdn. Think about how to clear the cache too when you update the product details in PIM.

 

Second part: since you have multi lingual pages i would agree with your client side approach of making an API call to get the stock, price on click of say "Buy" button in the product page. That way the data can be dynamic.

 

Hope that helps!

 

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

@Sahil11 Couple of suggestions based on my experience.

1. You can create a template page like product page which has all the necessary components

2. Create the list of products who links points to the same product page but passes the product id or sku in the selector like this product.<product_id>

3. All the components should be able to read and use the selector ( product_id) and give the product details from the PIM. 

This page will be cached in dispatcher/cdn. Think about how to clear the cache too when you update the product details in PIM.

 

Second part: since you have multi lingual pages i would agree with your client side approach of making an API call to get the stock, price on click of say "Buy" button in the product page. That way the data can be dynamic.

 

Hope that helps!

 

Avatar

Community Advisor

@Sahil11 This is a typical e-commerce setup and you can consider the following to get this up and running (Of course this is based on my experience): 

  • The first thing you will need a template that takes care of the overall layout of the page.
  • Any layout variations can be introduced using experience fragments variations in the template.
  • With a url format like - product-detail-<product name>.html , the product name can serve as the selector using which you execute your REST call to PIM to get product info related to the product-name. 
  • Any price/quantity related information can be a server side component that lets you fetch this information dynamically. This component can be SDI based so that while the main page is still cacheable, this specific component in the page is not.

Hope this helps.