Broadleaf Microservices
  • v1.0.0-latest-prod

Selector Product Detail Page Walkthrough

In this walkthrough, we’ll examine how to build a Product Detail Page (PDP) specific to Selector Products.

Selector Product
Tip
 In the commerce starter, we have a sample PDP for Selector Products in app/product/components/templates/selector-pdp.tsx.

What is a Selector Product?

Selector Products represent a grouping of related but separate product offerings for a customer to choose between such as for a good-better-best scenario.

The Selector Product itself is just a container to allow rendering the purchasable products on the same landing page. Therefore, it is not added to cart, but, instead, only the product the customer selects is added. However, the Selector Product’s ID will be added as the merchandisingContext on the Cart Item so that there is some record of where the selected product was added from.

Prerequisites

We need to make a few requests before we start loading content specific to the PDP, or any other page for that matter. We’ll go into more detail about these elsewhere, but here’s a brief overview:

  1. Resolve the tenant and application

  2. Send a request to authenticate the user and determine permissions, whether as anonymous or signed-in

Unresolved directive in selector-product.adoc - include::browse-client-snippet.adoc[Browse Client Setup]

Finally, of course, you will need to set up a Selector Product to display. See the Heat Clinic demo for a sample one.

Reading the Product

Fetching a Selector Product is the same as described in the Standard PDP Walkthrough:

Adding Selector Items to the Cart

In this section we will cover the add to cart request for one of the Selector Products items. This is similar to any other product: see the standard product example.

After a selection has been made, we can pass the selected product’s information to our add-to-cart button. Let’s examine this request:

Example AddItemRequest for a Selector Product
{
    "productId": "selectedItemId", (1)
    "quantity": 1,
    "itemChoiceKey": "01FA38DJKEGVMV1H03WK1X1WH8", (2)
    "merchandisingContext": "selectorProductId" (3)
}

  1. This is the ID of the Product being added to cart, not the Selector Product’s.

  2. Refers to the key of the Item Choice Product Option that connects the Selector Product to the items that can be selected. This allows Cart Operations Service to find the correct Product Option an item has been selected for in support of validation.

  3. This is the ID of the Selector Product. Merchandising Context provides a link back to where the Add-to-Cart occurred for the selected product.