ProductDetails container (deprecated)
The legacy ProductDetails container (deprecated) renders a full product details experience from one component. This topic lists configuration parameters and slot names for older integrations.
Version: 3.0.2
Configuration
Section titled “Configuration”The ProductDetails container (deprecated) provides the following configuration options:
| Parameter | Type | Req? | Description |
|---|---|---|---|
sku | string | Yes | SKU of the product to load. |
productData | ProductModel | No | Optional pre-fetched product data. |
hideSku | boolean | No | Hides the SKU when set to true. |
hideQuantity | boolean | No | Hides the quantity selector when set to true. |
hideShortDescription | boolean | No | Hides the short description when set to true. |
hideDescription | boolean | No | Hides the long description when set to true. |
hideAttributes | boolean | No | Hides the attributes block when set to true. |
hideSelectedOptionValue | boolean | No | Hides the selected option value display when set to true. |
hideURLParams | boolean | No | Stops reading product context from URL parameters when set to true. |
carousel | CarouselConfig | No | Carousel configuration for the gallery. |
optionsConfig | OptionsConfig | No | Options UI configuration. |
useACDL | boolean | No | Enables Adobe Client Data Layer integration when set to true. |
onAddToCart | function | No | Callback invoked when the shopper adds to cart. |
zoomType | 'zoom' | 'overlay' | No | Image zoom behavior. |
closeButton | boolean | No | Shows or hides a close control where applicable. |
disableDropdownPreselection | boolean | No | Disables preselecting the first dropdown option when set to true. |
This container exposes the following slots for customization. For examples and TypeScript shapes, see ProductDetails (deprecated) slots.
| Slot | Type | Required | Description |
|---|---|---|---|
Title | SlotProps | No | Title area of the PDP. |
SKU | SlotProps | No | SKU line. |
RegularPrice | SlotProps | No | Regular price display. |
SpecialPrice | SlotProps | No | Special or sale price display. |
Options | SlotProps | No | Configurable options UI. |
Quantity | SlotProps | No | Quantity selector. |
Actions | SlotProps | No | Primary actions region (for example, add to cart). |
ShortDescription | SlotProps | No | Short description block. |
Description | SlotProps | No | Long description block. |
Attributes | SlotProps | No | Attributes list. |
Breadcrumbs | SlotProps | No | Breadcrumb trail. |
GalleryContent | SlotProps | No | Gallery region content. |
InfoContent | SlotProps | No | Secondary info column content. |
Content | SlotProps | No | General content region. |
The following example shows how older code rendered the ProductDetails container (deprecated):
import { render as provider } from '@dropins/storefront-pdp/render.js';import { ProductDetails } from '@dropins/storefront-pdp/containers/ProductDetails.js'; // (deprecated)
await provider.render(ProductDetails, { sku: 'PRODUCT-SKU-123', productData: productData, hideSku: true, slots: { // Add custom slot implementations here },})(block);