Product Detail Page (PDP)

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.

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.

Render Product Details

1. Load the product detail page.

2. Call the following endpoint to retrieve product details:

   GET /commerce/webstores/{webstoreId}/products/{productId}

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

   GET /commerce/webstores/{webstoreId}/pricing/products/{productId}

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

   Example request body:

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

   GET /commerce/webstores/{webstoreId}/carts/compact-summary.

4. Refresh the cart item collection by calling:

   GET /commerce/webstores/{webstoreId}/carts/current/cart-items.

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.

1. To add a variant selector, call:

   GET /commerce/webstores/{webstoreId}/products/{productId}/children

   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

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

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

• B2B Commerce Developer Guide: B2B Commerce Product and Category APIs