ProductHeader

The ProductHeader container is designed to display the header information of a product on the product details page.

The header displays the product name with the SKU below it. Set hideSku to true to hide the SKU.

For configurable products, when the shopper has selected a full variant, product data on pdp/data can include variantSku and variantName (see getRefinedProduct). Set showVariantSku and/or showVariantName to true to show those values in the header in addition to the parent product name and SKU.

The container receives initial product data during initialization to preload the component and, being event-driven, updates with data emitted to pdp/data within the event scope.

ProductHeader configurations

The ProductHeader container provides the following configuration options:

Option	Type	Req?	Description
hideSku	boolean	No	Determines whether the SKU should be hidden in the header. Defaults to false.
scope	string	No	Unique identifier for the PDP context. Only containers rendered with this scope will respond to product events.
showVariantSku	boolean	No	When true, displays the variant SKU when present on product data (configurable product with a resolved simple variant). Defaults to false.
showVariantName	boolean	No	When true, displays the variant name when present on product data (configurable product with a resolved simple variant). Defaults to false.

Example

The following example demonstrates how to configure the ProductHeader container:

render(ProductHeader, {
  hideSku: false,
  showVariantSku: true,
  showVariantName: true,
});