# Product Detail Page (PDP)

### Overview

The Product Detail Page (PDP) shows product details, including product image, name, description, pricing, quantity selector, and an Add-to-Cart action. The page performs two parallel API requests — one to retrieve product details and another to retrieve buyer-entitled pricing information.

### Buyer Journey

This flow demonstrates how a headless storefront can render product detail experiences, including buyer-entitled pricing and add-to-cart functionality, using B2B Commerce Product APIs.

![Product Detail Page API Flow](https://a.sfdcstatic.com/developer-website/sfdocs/commerce-cloud/media/d2c-commerce/b2b-headless-b2b-commerce-headless-flow-orchestration-product-detail-page-pdp-b2b-commerce-apis-used-in-the-flow-11-1.png "Product Detail Page API Flow")

### B2B Commerce APIs Used in the Flow

| Purpose           | HTTP Method | Endpoint                                                                                                                                                                                              |
| ----------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Get product       | GET         | [`/commerce/webstores/{webstoreId}/products/{productId}`](https://developer.salesforce.com/docs/atlas.en-us.chatterapi.meta/chatterapi/connect_resources_commerce_webstore_product.htm)               |
| Get product price | GET         | [`/commerce/webstores/{webstoreId}/pricing/products/{productId}`](https://developer.salesforce.com/docs/atlas.en-us.chatterapi.meta/chatterapi/connect_resources_commerce_webstore_product_price.htm) |
| Add to cart       | POST        | [`/commerce/webstores/{webstoreId}/carts/current/cart-items`](https://developer.salesforce.com/docs/commerce/salesforce-commerce/references/comm-cart-ref?meta=postCartItemCollection)                |

**Render Product Details**

1. Load the product detail page.

2. Call the following endpoint to retrieve product details:

   GET [`/commerce/webstores/{webstoreId}/products/{productId}`](https://developer.salesforce.com/docs/atlas.en-us.chatterapi.meta/chatterapi/connect_resources_commerce_webstore_product.htm)

3. In parallel, call the following endpoint to retrieve buyer-entitled pricing information:

   GET [`/commerce/webstores/{webstoreId}/pricing/products/{productId}`](https://developer.salesforce.com/docs/atlas.en-us.chatterapi.meta/chatterapi/connect_resources_commerce_webstore_product_price.htm)

4. Use the responses to render:

   - Product image
   - Product name
   - Product description
   - Product pricing
   - Quantity selector
   - Add-to-Cart action

5. Handle pricing entitlement failures gracefully. If the pricing endpoint returns `403` or `404`, display an unavailable pricing placeholder instead of failing the entire page load.

**Change Product Quantity**

1. Update the quantity selector to change the desired purchase quantity.

2. Store the selected quantity in local UI state. No API request is required until the buyer adds the product to the cart.

**Add a Product to the Cart**

1. Select Add to Cart to add the product to the active cart.

2. Call the following endpoint:

   POST [`/commerce/webstores/{webstoreId}/carts/current/cart-items`](https://developer.salesforce.com/docs/commerce/salesforce-commerce/references/comm-cart-ref?meta=postCartItemCollection)

   Example request body:

   ```json
   { "productId": "<product-id>", "quantity": 1, "type": "Product" }
   ```

3. After the request succeeds, refresh the cart summary by calling:

   GET [`/commerce/webstores/{webstoreId}/carts/compact-summary`](https://developer.salesforce.com/docs/commerce/salesforce-commerce/references/comm-cart-ref?meta=getCartBadge).

4. Refresh the cart item collection by calling:

   GET [`/commerce/webstores/{webstoreId}/carts/current/cart-items`](https://developer.salesforce.com/docs/commerce/salesforce-commerce/references/comm-cart-ref?meta=getCartItemCollection).

5. Use the updated cart responses to synchronize:

   - Global cart badge
   - Cart summary state
   - Cached cart views

6. Show a confirmation message or toast notification indicating that the product was added to the cart successfully.

### Extend the Flow

1. To add a variant selector, call:

   GET [`/commerce/webstores/{webstoreId}/products/{productId}/children`](https://developer.salesforce.com/docs/atlas.en-us.chatterapi.meta/chatterapi/connect_resources_commerce_webstore_product_children.htm)

   Render the returned child variants as a swatch list or variant selector above the quantity selector to enable buyers to switch between product variations.

2. To add wishlist functionality, send:

   POST [`/commerce/webstores/{webstoreId}/wishlists/{wishlistId}/wishlist-items`](https://developer.salesforce.com/docs/atlas.en-us.chatterapi.meta/chatterapi/connect_resources_commerce_webstore_wishlist_items.htm)

   Enable buyers to save products to a wishlist directly from the product detail page.

   :::note
   Wishlist APIs and buyer wishlist flows are outside the scope of this storefront page set.
   :::

## See Also

- [*B2B Commerce Developer Guide*: B2B Commerce Product and Category APIs](https://developer.salesforce.com/docs/commerce/salesforce-commerce/guide/b2b-d2c-comm-product-category-apis.md)