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),
});