ProductDetails Container

Overview

The ProductDetails container component for the drop-in.

Version: 1.3.5

Configuration

The ProductDetails container provides the following configuration options:

Parameter	Type	Req?	Description
sku	string	Yes	Configuration for sku
productData	ProductModel	No	Data object for product
hideSku	boolean	No	Controls hiding of sku
hideQuantity	boolean	No	Controls hiding of quantity
hideShortDescription	boolean	No	Controls hiding of short description
hideDescription	boolean	No	Controls hiding of description
hideAttributes	boolean	No	Controls hiding of attributes
hideSelectedOptionValue	boolean	No	Controls hiding of selected option value
hideURLParams	boolean	No	Controls hiding of u r l params
SKU	SlotProps<DefaultSlotContext>	No	Configuration for s k u
RegularPrice	SlotProps<DefaultSlotContext>	No	Configuration for regular price
SpecialPrice	SlotProps<DefaultSlotContext>	No	Configuration for special price
Options	SlotProps<DefaultSlotContext>	No	Available options for
Quantity	SlotProps<DefaultSlotContext>	No	Configuration for quantity
Actions	SlotProps< DefaultSlotContext & { appendButton: SlotMethod< Omit<ButtonProps	No	Configuration for actions
text	string	No	Configuration for text
icon	IconType	No	Configuration for icon
ShortDescription	SlotProps<DefaultSlotContext>	No	Configuration for short description
Description	SlotProps<DefaultSlotContext>	No	Configuration for description
Attributes	SlotProps<DefaultSlotContext>	No	Configuration for attributes
Breadcrumbs	SlotProps< DefaultSlotContext & { setSeparator: SlotMethod<IconType>	No	Configuration for breadcrumbs
appendLink	SlotMethod< HTMLAttributes<HTMLAnchorElement> & { text?: string } >	Yes	Link to append
appendHTMLElement	SlotMethod<HTMLElement>	Yes	Configuration for append h t m l element
GalleryContent	SlotProps<DefaultSlotContext>	No	Configuration for gallery content
InfoContent	SlotProps<DefaultSlotContext>	No	Configuration for info content
Content	SlotProps<DefaultSlotContext>	No	Configuration for content
carousel	CarouselConfig	No	Configuration for carousel
optionsConfig	OptionsConfig	No	Configuration options for options
useACDL	boolean	No	Configuration for use a c d l
onAddToCart	(values: Values) => void	No	Callback function triggered when add to cart
zoomType	'zoom' | 'overlay'	No	Configuration for zoom type
closeButton	boolean	No	Configuration for close button
disableDropdownPreselection	boolean	No	Disables dropdown preselection

Slots

This container exposes the following slots for customization:

Slot	Type	Required	Description
slots	\{ Title?: SlotProps<DefaultSlotContext>	No	Custom slot for rendering slots

Usage

The following example demonstrates how to use the ProductDetails container:

import { ProductDetails } from '@dropins/storefront-pdp';

export default function MyComponent() {
  return (
    <ProductDetails
      sku="PRODUCT-SKU-123"
      appendLink="example"
      appendHTMLElement={appendHTMLElement}
    />
  );
}