ProductDetails
The ProductDetails
container displays detailed information about a product on the product details page.
ProductDetails configuration options
The ProductDetails
container provides the following configuration options:
SKU
The sku
property is the only required configuration. It’s a string that uniquely identifies the product. This value is used to fetch ProductModel
data from the backend.
Hide options
The hide options (hideSku
, hideQuantity
, and the others) let you hide the parts of the product details UI that are not relevant for your storefront. These properties are optional and default to false
.
Product Data
The productData
property is an optional object that contains the initial product data to preload the component. The object should follow the ProductModel
interface:
interface ProductModel { name: string; sku: string; isBundle: boolean; addToCartAllowed: boolean; inStock: boolean | null; shortDescription?: string; metaDescription?: string; metaKeyword?: string; metaTitle?: string; description?: string; images?: Image[]; prices: Prices; attributes?: Attribute[]; options?: Option[]; optionUIDs?: string[]; url?: string; urlKey?: string; externalId?: string; externalParentId?: string; variantSku?: string; productType?: ProductType | undefined;}
View the Example configuration section for an example of how to use this property.
Slots
Slots allow for the customization of component parts. Each slot accepts a SlotProps
object with a context containing data
, values
, and a valid
state. Custom actions and content can be added through these slots. Visit the Slots page for slot details and usage information.
Carousel
The Carousel settings available for configuration are defined in the CarouselConfig
interface:
interface CarouselConfig { controls?: { desktop?: 'thumbnailsRow' | 'thumbnailsColumn' | 'dots' | null; mobile?: 'dots' | 'thumbnailsRow' | null; }; arrowsOnMainImage?: boolean; loopable?: boolean; peak?: { desktop?: boolean; mobile?: boolean; }; gap?: 'small' | 'medium' | 'large' | null; thumbnailsLoadingMode?: 'lazy' | 'eager'; imageParams?: ResolveImageUrlOptions; thumbnailParams?: ResolveImageUrlOptions;}
The Example configuration section shows a usage example for carousel
.
onAddToCart
Triggered when the Add to Cart button is clicked. Receives an object with sku
, quantity
, and optionally optionsUIDs
reflecting the user’s selection.
// values: Values { sku: string, quantity: number, optionsUIDs: string[] }onAddToCart: (values) => void;
zoomType
This property can take one of two string values: zoom
or overlay
. It is used to enhance product image viewing by providing zoom or overlay functionality:
overlay
(default): Provides a larger, distraction-free view of a product image. The clicked image is opened in full screen.zoom
: Provides a close-up view of the product’s image in the gallery. The clicked image is not opened in full screen.
closeButton
This property is a boolean that can only be used in combination with the zoomType
property. The default value is false
. If true
, the close button is shown; if false
or not provided, the close button is not shown.
optionsConfig
The optionsConfig
property allows for additional configuration of product options. It accepts an object with the following properties:
anchorOptions
: An array of option IDs that should not be refined when other options are selected.
Example configuration
The following example demonstrates how to configure the product details container:
return productRenderer.render(ProductDetails, { sku: yourGetSkuFetchFunction(), hideSku: false, initialData: { name: 'Product Name', sku: '12345', addToCartAllowed: false; inStock: true, shortDescription: 'Short description of the product.', description: 'Long description of the product.', images: [ { url: 'https://via.placeholder.com/150', label: 'Product image', width: 150, height: 150}, { url: 'https://via.placeholder.com/150', label: 'Product image', width: 150, height: 150}, ], }, hideQuantity: false, hideShortDescription: false, hideDescription: false, hideAttributes: false, hideURLParams: false, carousel: { controls: { desktop: 'thumbnailsRow', // | 'thumbnailsColumn' | 'dots' | null, mobile: 'dots', // | 'thumbnailsRow' | null, } arrowsOnMainImage: true, loopable: true, peak: { mobile: true, desktop: true, } thumbnailsLoadingMode: 'lazy', // 'lazy' | 'eager'; imageParams: ResolveImageUrlOptions, thumbnailParams: ResolveImageUrlOptions, }, zoomType: 'zoom', closeButton: true, slots: { // See all PDP slots in the next section Title: { }, SKU: { }, }, onAddToCart: (values) => console.log('Added to cart', values),});