Show product details

Products are now listed in the store which is great, but customers are obviously going to want to know more about the amazing products for sale in your store!

Let's add a product details page to your store. This is fast and simple with Elastic Path Commerce Cloud. One call to the JS-SDK with the product ID will surface all the information you need. This time, add .With(['main_image']), which in the previous lesson you learned gives you the primary product image.

EPCC.ShopperCatalog.Products.With(['main_image']).Get({ productId })

There is a service.ts file, available for export async functions. However, this file uses the getProduct(productId: string) function, which already provides a productID so you just need to wire up the JS-SDK request. Note, this function is not to be confused with the getProducts() function you used before.

export async function getProduct(
  productId: string
): Promise<Resource<ProductResponse>> {
  ...
}