---
schema_version: "1"
id: fef05f260bc0ce66fe1e1b495d14d8caaea783f95b3ac8d5509148068a307423
title: Product Detail Page (PDP)
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/commerce-cloud/salesforce-commerce/guides/d2c-commerce/b2b-comm-headless-product-detail-page.md
canonical_url: https://developer.salesforce.com/docs/commerce/salesforce-commerce/guide/b2b-comm-headless-product-detail-page.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: fa7cc5036e9ee07bb91cf1f5590a24a823f5989732a83b41cab33cd75520fa9d
products:
  - B2B Commerce Developer Guide
  - Salesforce APIs
---
# 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://developer.salesforce.com/media/d2c-commerce/b2b-headless-b2b-commerce-headless-flow-orchestration-product-detail-page-pdp-b2b-commerce-apis-used-in-the-flow-11-1.png '{"class": "image-lg", "title": "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.html)