UseProductContext hook

const productContext = useProductContext();

When content element add-on is located on product details page it may need to access data about product displayed on the page.

The useProductContext hook provides info about the product for content elements. This hook returns the object with data or null if it's not being used on the product details page. The type of the returned object is the union type, which can be one of 2 types: Product, CalculatedProduct.

Product

Basic information about the product. Contains the following properties:

Property	Type	Description
id	string	The product ID.
title	string \| null	The product title.
customerSpecificId	string \| null	The customer specific product ID.
description	string \| null	The product description.
media	(ProductImage \| ProductVideo \| ProductVirtualView)[] \| null	The product media, can be null if product doesn't have media files.
variantId	string \| null	Selected variant ID.
hasVariants	boolean \| null	The boolean value indicating whether the product has variants.
uom	{ id: string; description: string \| null; baseQuantity: number \| null } \| null	The product unit of measure, can be null if unit of measure ID if absent.
baseUomDescription	string \| null	The product base unit of measure description, can be null if base unit of measure is absent.
attributes	Record<string, AddonFieldInfo>	The product add-on fields that are configured in Sana admin (`Product add-on fields` tab).

The ProductImage type contains following properties:

Property	Type	Description
type	'ProductImage'	The product media type.
small	string \| null	URL for small image.
mediumSmall	string \| null	URL for medium small image.
medium	string \| null	URL for medium image.
mediumLarge	string \| null	URL for medium large image.
large	string \| null	URL for large image.
title	string \| null	Title of the image retrieved from the variant this image belongs to.
variantId	string \| null	Product variant ID this image belongs to.

The ProductVideo type contains following properties:

Property	Type	Description
type	'ProductVideo'	The product media type.
videoData	{ provider: VideoProviderType; videoId: string };	The data about the video ID and provider. VideoProviderType enum contains 'youtube' and 'vimeo' values.

The ProductVirtualView type contains following properties:

Property	Type	Description
type	'ProductVirtualView'	The product media type.
url	string	External URL.
title	string \| null	The product title.

The AddonFieldInfo type contains following properties:

Property	Type	Description
caption	string	The field caption.
value	unknown	The field value.

Calculated product

This type of object is returned when the product becomes calculated. It has the same fields as the base product and additional calculating information such as:

Property	Type	Description
isOrderable	boolean	The boolean value indicating whether the product is orderable.

Example:

  const productContext = useProductContext();

  if (!productContext)
    return null;

  const { 
    id,
    variantId,
    uomId,
    attributes,
  } = productContext;

  if ('isOrderable' in productContext)
    return <CalculatedProductComponent calculatedProduct={productContext} />

  return <ProductComponent product={productContext} />

Table of Contents

UseProductContext hook

Product

Calculated product