Pdp
Introduction
Product Detail Page
Product Detail Page is the page that displays the product details and offers a seamless shopping experience for the user. It is a critical component of the e-commerce website, as it provides a comprehensive view of the product, its features, and specifications.
Api calls overview
We are making several Api calls in this page Refer - p[id].vue
- The main product information is coming from ecom api, we also check if the product details are present in our CMS (Builder.io) if some content is present in builder.io we are using that content to display the product details.
- Product Videos are coming from videoly script
- Product Reviews are coming from bazaarvoice api
- Product Recommendations are coming from monetate api
- stock details is coming from ecom api
- Product variations details from ecom api
- Compare product section product ids are coming from algolia on the basis of taxonomy id of the product
- Is product subscribed for stock notifications is coming from ecom api
- fetching user savelist for correct UX.
- Other tracking related scripts such as Gtm, BV pixel, etc.
product.service.ts
product service is responsible for fetching the product details from ecom api
- Main service Methods in
product.service.ts
getProductByCode
this method detail based on id ( used to get detail of only one product )
async getProductByCode(id: number): Promise<{ data: Product } | any> {
try {
while (isProductDetailFetching) {
await new Promise((resolve) => setTimeout(resolve, 100)) // Polling
}
isProductDetailFetching = true;
const response = await useAjaxEcom(`/products/${id}`, {
show_notifications: false,
show_loading_indicator: false,
cache:true
});
isProductDetailFetching = false;
return response.data;
} catch (e) {
isProductDetailFetching = false;
let errorMeta = {
productId: id,
isProductDetailFetching,
productServiceError: true
}
customClientErrorHandler(
e,
'critical',
'Product Service Page Error - trying to fetch product by code using getProductByCode()',
errorMeta
);
return e;
}
}
getProducts
async getProducts(id: number[],cache = false): Promise<Product[] | any> {
let options = {
method: "post",
params: {
products: id,
},
show_notifications: false,
show_loading_indicator: false,
cache
}
try {
while (isProductListFetching) {
await new Promise((resolve) => setTimeout(resolve, 100)) // Polling
}
isProductListFetching = true;
const response = await useAjaxEcom("/products/getProducts", options);
isProductListFetching = false;
return response.data;
} catch (e) {
isProductListFetching = false;
let errorMeta = {productId: id,options, productServiceError: true}
customClientErrorHandler(
e,
'critical',
'Product Service Page Error - trying to fetch product using getProducts()',
errorMeta
);
return e;
}
}