Product Detail Page

Product detail page (PDP) is one of the most important pages on the website and has become your landing page in lot of scenarios. The platform provides significant breadth & depth of information to be maintained at product level and display the same on PDP the way you want it. The PDP can be broken down into 3 sections – product information, related products and actions. All the 3 sections are detailed below.

Developers - API Operations

The following API operations are used for the Product Detail Page

Operation	Endpoint	Response
Get Product Details by Slug	`/api/v2/catalog/product/slug?slug={{slug}}`	Product details as detailed below in product information and linked products section
Get Product Details by ID	`/api/v2/catalog/product/:id`	Same as above
Get Related Products for a specific product	`/api/v2/catalog/product/:id/related-products`	The related product list contains the basic product info, pricing, images
Get Product Details for Preview	`/api/v2/catalog/product/preview?slug=`	Gets the product details for preview before the product is published on the website.
Post Product Review	`/api/v2/catalog/product/:id/review`	Post a review for the product
Notify Me	`/api/v2/catalog/product/:id/notifyme?email={{email}}`	The user is notified when the product is back in stock.

Basic Information

The product basic information – name, fullname, description, short description, brand, sub-brand, brand logo, pricing, etc. is all returned by the API and can be rendered on the page as needed.

Meta Information

The product meta information is populated based on the global rules configured at the API end and are overwritten if the information is configured at specific product level. Typically, there are 3 meta tags in the <head> section which need to be rendered in the storefront for every PDP.

Meta Title
Meta Description
Keywords

Images & Videos

This section gives the list of images based on display order defined for them in the backend and also provides a list of videos which have been setup for the product. The platform does not hosts videos on the own CDN, so typically the video links will be from 3rd party providers like vimeo, youtube, etc. the front end handling would need to be implemented accordingly in the storefront.

Custom Attributes

Custom Attributes is the collection of additional attributes defined for the product, i.e. like additional product information, technical specs or could be anything. Typically, we display the key / value pair in simple format on the PDP.

Sample Custom Attributes

     {
          "key": "global.colour",
          "customkey": "global.colour~#000000~Colour",
          "display": "Colour",
          "value": "#000000",
          "isVariantAttribute": true,
          "displayInProductDetail": true,
          "displayInProductList": false,
          "groupDisplayOrder": 0
      },
      {
          "key": "clothing.size",
          "customkey": "clothing.size~onesize~Size",
          "display": "Size",
          "value": "onesize",
          "isVariantAttribute": true,
          "displayInProductDetail": true,
          "displayInProductList": false,
          "groupDisplayOrder": 0
      }

Breadcrumbs

The platform provides the breadcrumb data based on brand and category both and gives you the choice to display / manage the breadcrumb in the front end as per the business needs.

Brand based: If you want to display ‘brand’ based breadcrumb, you can pick up the breadcrumbs based on ‘brand’ and display just brand based breadcrumb
Category based: if you want to display ‘category’ based breadcrumb, you can pick up the breadcrumbs based on category and display just category breadcrumbs. The API provides the breadcrumb data in nested tree format giving you 1/2/3 levels deep breadcrumb with links, making it easier for you to manage the display in the frontend.

Sample Breadcrumbs

    {
        "slugType": "Manufacturer",
        "slug": {
            "title": "My Brand",
            "slug": "my-brand-url",
            "childSlug": null
        }
    },
    {
        "slugType": "Category",
        "slug": {
            "title": "KNITWEAR",
            "slug": "category/knitwear",
            "childSlug": {
                "title": "PONCHOS",
                "slug": "category/knitwear/ponchos",
                "childSlug": null
            }
        }
    }

Reviews

Product Reviews for are part of the product detail model and can be displayed on the PDP itself. Only the approved reviews are sent from the API and any reviews which are not approved are not. The review provides the title, rating, posted by, when, nickname. You can decide if you want to display the user email or not or just display the nickname or even hide that as per the business needs.

Variations

Variant selections are to be displayed when these are part of the product detail. There are 2 main sections related to variants:

Variant Attributes This section will be either null (in case of simple product without any variant) OR it will have the list of attributes used for variant display along with their respective configuration:

fieldName: name of the field, can also be used for display label
fieldCode: system code for the field
fieldLabel: Label for the field used to display on the front end
inputType: Dropdown (typically used for sizes), HorizontalList (typically used for color). The value returned from the API should NEVER be null.
fieldValues: list of values / options for the variant, i.e. sizes / colors
displayInProductDetail: should this attribute be displayed on the product Detail
displayInProductWidget: should this attribute be displayed on Product widget on the PLP

Variant Products This information is used to get the info about each specific variant product behind the size/color combinations or any other attribute based variant combination. This section provides the variant specific info.

stockCode: the unique stock code for that variant.
productid: the unique system identifier for the product
slug: the unique slug for the variant. This would be different based on the color, but same across sizes.
image: the image for that specific variant. This would be different based on color, but same across sizes.
productName: the name of the variant.
listPrice: list price (RRP / MRP) of the variant. Each variant can potentially have a different price, so on selection, the price is changed based on the selected combination of size & color (or any other variant attribute).
price: the price at which the variant is available to buy, i.e. actual sell price
isDefault: is this variant the default product, this info is only used in the system background and has no relevance in the front end
isPreOrderEnabled: if the pre-order is enabled for the variant. Preorder flag can be enabled at the variant level.
sellWithoutInventory: can the product be sold without inventory as well, typically on backorder.
currentStock: current stock of the variant. Can be negative also in case sellWithoutInventory = true OR isPreOrderEnabled = true
attributes: this is the attributes for that particular variant. So, if we have red, blue, green top in s/m/l sizes. For a specific variant, this will contain 1 size (eg. s) + 1 color (eg. Red)

Bundles & Components

Bundles are virtual products which are basically made by grouping multiple products into one single product. When the user does ‘add to bag’ for the bundle product, the system adds the bundle product to the bag and based on the bundle configuration (displayInBasket) displays the child / components products in the basket. If the value for displayInBasket = false, the child / component products are NOT displayed in the basket and ONLY the bundle product is displayed. demo store example

Related products are the products that are to be displayed on the PDP grouped by ‘relatedTypeCode’. These could be ‘ADDON’ / `GWP’ / ‘UPGRADE’ / ‘DOWNGRADE’ or could be anything… all the related items should be grouped & displayed by ‘relatedTypeCode’. demo store example

Add to Wishlist

The AddToWishlist adds the item to ‘LocalStorage’ in case the user is NOT logged in. in case the user is logged in the API call is made.

Add to Bag, Pre Order, Notify Me

You would typically not have all the 3 buttons - Add to Bag, Pre-order and Notify Me displayed at the same time. The typical implementation rules in the front end would be as follows:

If currentStock > 0, display the normal Add To Bag Button
If currentStock = 0 for the specific variant / product

If sellWithoutInventory = false, then display the Notify Me (different css class) against that specific variant
If sellWithoutInventory = true, then display normal Add to Bag button.

if the preOrder.isEnabled = true

the current stock would be 0
if the currentStock < maxStock, then the user should be allowed to do an Pre-order, else the button should be changed to Notify Me. You don’t want to be selling more than max qty set for pre-order.
we display the button text Pre Order, on click the action would be normal Add to Bag, however the button style (css) would be different.
We also display the shortMessage + message element below the Pre-order button.

Business Users - Reference Articles how the functionality works: Notify Me, Pre-order

Demo Store

The following demo store links provide reference to how this functionality works on a store - Add to Bag, Notify Me, Pre-Order

Personalization / Engraving

Engraving is more like a personalized service where the customers can provide their specific names, etc which are going to be personalized / engraved on the product.

The engraving stock codes are pre-defined as constants in the front-end code. They would generally be only 2 or maximum 3 stock codes. In the current demostore, the stock code for engraving is ADDON.
if the PDP opened contains any of the engraving stock codes in the RelatedItems, then the engraving option is shown to the user below the Add to Bag button.
Once the user clicks on Engraving, the following popup shows up.
The user can then fill in the details and click on Add to Bag. When the user does Add to bag the normal product + the engraving stock code both are added to the Bag in one shot using the BulkAdd API call /api/v2/commerce/basket/:id/bulkadd
Once the BulkAdd is called, an additional call is made commerce/basket/{0}/updateinfo to updated the additional information that the user has provided in the engraving form.

Demo Store example

Check Store Stock

YET TO DRAFT