Product Detail Page

Overview

The Product Detail Page (PDP) serves as the focal point for displaying detailed information about an individual product within the Storefront Boilerplate. It offers users a comprehensive view of product attributes, including images, descriptions, pricing and promotions, and available variants (such as size or color). In addition to essential features like add-to-cart functionality, the PDP includes shipping details, subscription functionality, and related product suggestions, enabling users to make well-informed purchasing decisions.

Key Features

1. Product Information Display: Provides detailed descriptions, pricing, and product specifications.
2. Product Images: Displays multiple images, including zoom and gallery views for enhanced product visualization.
3. Product Variants: Supports options like size and color.
4. Add-to-Cart Functionality: Allows users to quickly add items to their shopping cart for seamless purchasing.
5. Store Availability: Offers real-time updates on product availability in physical stores.
6. Related Products: Recommends similar or complementary products to encourage further exploration.
7. Promotions: Showcases active discounts, special offers, and promotional pricing for the product.
8. Subscriptions: Enables subscription-based purchasing options for products that can be bought on a recurring basis.

Data flow

When a user accesses a PDP, the primary product data is fetched using the product ID present in the URL. If the product has configured recommendations in the combineWith attribute, the data for those recommended products will also be loaded and displayed within the ProductRecommendations component.

The page also retrieves a list of active promotions. If the product is associated with a promotion via the promotion attribute, the relevant promotion will be applied to the PDP. In the case of a "Buy X get Y" promotion, the the data for the free gift product will be also fetched.

Upon page load, the default quantity will be set to 1. No active variant (size) will be pre-selected, unless the product is available in only one size. Every time the active variant is changed, the quantity resets to 1 and can be adjusted, but it cannot exceed the available stock or a maximum of 10, due to basket limitations on the maximum quantity of a single variant.

Components

Image Gallery

The image gallery is presented as a slider with arrow navigation. On desktop screens, thumbnails are displayed on the left side of the selected image, allowing users to browse images more quickly. Hovering over a thumbnail replaces the main image with the hovered one while clicking on the image opens it in a pop-up where users can zoom in. The same zoom-in functionality is available on mobile screens.

To ensure a smooth user experience, product images can be zoomed in on independently of the rest of the webpage. This is achieved through CSS transforms to directly scale the image. On the desktop, users can click within the ProductGalleryZoom modal to control the zoom level, while on mobile, users can use the familiar pinch gesture for zooming in and out.

To prevent unintended zooming of the entire page on mobile, the default browser behavior for gestures must be disabled using the following event listeners:

typescript

Copy

useEventListener(document, 'gesturestart', (e) => {
  e.preventDefault()
})
useEventListener(document, 'gesturechange', (e) => {
  e.preventDefault()
})

To still allow pinch-to-zoom functionality for the images, the usePinch utility from @vueuse/gesture is used. The zoom level is capped to a reasonable range by mapping the offset value to a scale between 1 and 2.

typescript

Copy

const MAX_PINCH_ZOOM = 500
const MIN_ZOOM = 1
const MAX_ZOOM_MOBILE = 2

const pinchHandler = ({ offset: [pinchZoom], pinching }: 
 { offset: [number, number]; pinching: boolean }) => {
  pinchActive.value = pinching
  if (!pinching) {
    return
  }
  scale.value = mapNumberToRange(
    pinchZoom,
    0,
    MAX_PINCH_ZOOM,
    MIN_ZOOM,
    MAX_ZOOM_MOBILE,
  )
  // ...
}
usePinch(pinchHandler, {
  domTarget: zoomElement,
  eventOptions: {
    passive: true,
  },
})

Breadcrumbs

Breadcrumbs are displayed above the product brand and name section. By default, this component is visible only on a desktop, but you can include it in the mobile layout to simplify navigation. Regardless of the previous page visited before landing on the PDP, the breadcrumbs will always display the longest category path from the associated categories.

For example, if the product belongs to the following three categories:

• Women (1st level)
• Sneaker (2nd level)
• Sneaker Low (3rd level)

The breadcrumb structure would appear as Women | Sneaker | Sneaker Low.

If multiple longest category paths are available, the first one is displayed. For instance, in addition to the example above, if the product also belongs to:

• Men (1st level)
• Sneaker (2nd level)
• Sneaker Low (3rd level)

Then, the available paths are Women | Sneaker | Sneaker Low and Men | Sneaker | Sneaker Low. In this case, the first path (Women) will be shown.

Each category in the breadcrumb path is clickable, navigating users to the relevant Product Listing Page. Categories at different levels are separated by a designated separator to enhance clarity.

Siblings

The current implementation supports displaying only color variants in the sibling section. The section title reflects the active color, which is also the first one displayed in the sibling row. Sold-out siblings are indicated by a grey overlay. If the number of sibling items exceeds the width of the section, horizontal scrolling is enabled. Clicking on a sibling navigates the user to the PDP of that specific sibling.

Promotion

For additional information about promotions, check out our dedicated Promotions page.

Size, Quantity and Add to Basket

The process for adding items to the basket follows these steps:

1. No Size Selected: If the user clicks "Add to Basket" without selecting a size, they will be automatically scrolled to the size selector, which will open and prompt them to choose a variant to proceed. For one-sized products, the size is preselected, so clicking "Add to Basket" will directly add the variant to the basket.
2. Size and Quantity Selection: Once a size is selected, the user can specify the desired quantity. The minimum quantity is always 1, while the maximum is determined by the available quantity of the selected product variant.
3. Success or Error Notifications: After attempting to add an item to the basket, a toast message will be displayed to inform the user of the result.

If successful, an i18n key basket.notification.add_to_basket_success will trigger the success message.

In case of errors, different messages are shown based on the type of error:

• For HTTP Error 412 (variant out of stock), the i18n message basket.notification.add_to_basket_variant_out_of_stock_error is used.
• For HTTP Error 413 (exceeding maximum basket items), the i18n message basket.notification.add_to_basket_max_basket_items_error is triggered.
• For any other errors, the default message basket.notification.add_to_basket_error will be displayed.

typescript

Copy

export const getBasketToastErrorMessageKey = (error: unknown) => {
  if (error instanceof FetchError) {
    if (error.response.status === HttpStatusCode.PRECONDITION_FAILED) {
      return 'basket.notification.add_to_basket_variant_out_of_stock_error'
    } else if (error.response.status === HttpStatusCode.PAYLOAD_TOO_LARGE) {
      return 'basket.notification.add_to_basket_max_basket_items_error'
    }
  }
  return 'basket.notification.add_to_basket_error'
}

Subscriptions

For more details on subscription, please visit our dedicated Subscription page.

Store locator

To learn more about how to check the availability of products in physical stores, please refer to our Omnichannel page.

Product Details

Product specifications, including design, extras, shipping information, and other attributes, are displayed below the image gallery and product details in an accordion format. The following logic governs how these attributes are presented:

• Attributes with a defined type are included in the accordion.
• Each attribute of the same type is grouped together under a single accordion section.
• The values of attributes within the same type are combined and separated by commas.

Example:

Consider the following attributes:

json

Copy

"style": {
  "id": 7066,
  "key": "style",
  "label": "Style",
  "type": "design",
  "multiSelect": false,
  "values": {
    "id": 2430,
    "label": "Urban",
    "value": "urban"
  }
},
"sneakerStyle": {
  "id": 7075,
  "key": "sneakerStyle",
  "label": "Style of trainer",
  "type": "design",
  "multiSelect": false,
  "values": {
    "id": 2546,
    "label": "Running",
    "value": "running"
  }
}

Both attributes have the type of "design" and will be grouped under one accordion titled "Design". The resulting display would look like this:

• Design:
  • Style: Urban
  • Style of trainer: Running

Special Case for type="extras"

Attributes with the type "extras" are displayed differently:

• The values are shown directly under the accordion without the label.
• Only the values themselves are listed.

Example:

Copy

"extras": {
  "id": 7064,
  "key": "extras",
  "label": "Extras",
  "type": "extras",
  "multiSelect": true,
  "values": [
    {
      "id": 2480,
      "label": "Perforation",
      "value": "perforation"
    },
    {
      "id": 2481,
      "label": "Padded shaft edges",
      "value": "padded_shaft_edges"
    }
  ]
}

This will render an accordion titled "Extras" with the following values:

• Perforation
• Padded shaft edges

Fixed Accordion for Shipping and Return

The content for "Shipping and Returns" is not derived from product attributes; instead, the values in this section are defined as i18n keys for localization purposes.

For further customization details, visit the customization page of PDP.

Recommendations

The recommendation slider can be utilized to display various types of associated products, such as similar items, complementary products, and those from the same brand. In the Storefront Boilerplate, it is specifically used to showcase recommended products. For more information on the recommendation logic, please visit our dedicated Recommendations page.

Sold-out State

A product is considered sold out when the boolean attribute isSoldOut on the product object is set to true. Sold-out products are excluded from the product streams on the Product Listing Pages but can still be accessed through their direct URL or via color siblings.

While users are unable to purchase sold-out items, they can still view product images and add these items to their wishlist. The sold-out status is clearly indicated by a "Sold Out" banner, and the "Add to Basket" button is disabled to prevent further attempts to purchase.

Product Detail Pop-up

Want a quick product preview and the ability to add items to your basket without navigating away from the page? This is easily achieved with the Product Detail Pop-up.

The pop-up currently displays essential information and actions, including the product image, name, brand, price, and buttons for "Add to Basket," "Add to Wishlist," along with a link to the full Product Detail Page.

In the current implementation, the pop-up can be triggered by clicking on the enabled Free Gift on PDPs that meet the conditions of the "Buy X Get Y" promotion. This feature enhances the user experience by allowing customers to quickly view product details and take action without interrupting their shopping flow.

Customization Opportunities

To discover the customization possibilities for your PDP page, please check out our Customization Guide.