ProductDetails Container

ADOBE CONFIDENTIAL

Version: 1.3.5

Configuration

The ProductDetails container provides the following configuration options:

Parameter	Type	Req?	Description
sku	string	Yes
productData	ProductModel	No
hideSku	boolean	No
hideQuantity	boolean	No
hideShortDescription	boolean	No
hideDescription	boolean	No
hideAttributes	boolean	No
hideSelectedOptionValue	boolean	No
hideURLParams	boolean	No
carousel	CarouselConfig	No
optionsConfig	OptionsConfig	No
useACDL	boolean	No
onAddToCart	function	No	Callback function triggered when add to cart
zoomType	'zoom' | 'overlay'	No
closeButton	boolean	No
disableDropdownPreselection	boolean	No

Slots

This container exposes the following slots for customization:

Slot	Type	Required	Description
Title	SlotProps	No
SKU	SlotProps	No
RegularPrice	SlotProps	No
SpecialPrice	SlotProps	No
Options	SlotProps	No
Quantity	SlotProps	No
Actions	SlotProps	No
ShortDescription	SlotProps	No
Description	SlotProps	No
Attributes	SlotProps	No
Breadcrumbs	SlotProps	No
GalleryContent	SlotProps	No
InfoContent	SlotProps	No
Content	SlotProps	No

Usage

The following example demonstrates how to use the ProductDetails container:

import { render as provider } from '@dropins/storefront-pdp/render.js';
import { ProductDetails } from '@dropins/storefront-pdp/containers/ProductDetails.js';

await provider.render(ProductDetails, {
  sku: "PRODUCT-SKU-123",
  productData: productData,
  hideSku: true,
  slots: {
    // Add custom slot implementations here
  }
})(block);