UseProductGroupContext hook

const productGroupContext = useProductGroupContext();

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

The useProductGroupContext hook provides info about the product group for content elements. This hook returns the object with data or null if it's not being used on the product group details page.

The data contains following properties:

Property	Type	Description
groupId	string	The product group ID.
title	string	The product group title.
description	string | null	The product group description.
media	(ImageMedia | VideoMedia | VirtualViewMedia)[] | undefined	All media content of the product group, can be undefined if product group doesn't have media files.
products	Array<Product>	Products that belong to the product group.

The ImageMedia type contains following properties:

Property	Type	Description
type	'ProductImage'	The 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.

The VideoMedia type contains following properties:

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

The VirtualViewMedia type contains following properties:

Property	Type	Description
type	'ProductVirtualView'	The media type.
url	string	External URL.

The Product type contains following properties:

Property	Type	Description
id	string	The product ID.
url	string	The product URL.
title	string | null	The product title.
uom	{ id: string } | null	The product unit of measure, can be null if unit of measure ID is absent.
uoms	Array<Uom> | null	The list of units of measure supported by this product, can be null if the product does not have units of measure.
stockLevels	{ outOfStock: number; lowStock: number; maxStockNumber: number | null } | null	Information about stock levels. Shows out of stock, low stock and maximum stock quantity.

The Uom type contains following properties:

Property	Type	Description
id	string	The unit of measure ID.
description	string | null | undefined	The unit of measure description.
minimunQuantity	number | null	The minimum quantity of a product that can be ordered.
maximunQuantity	number | null	The maximum quantity of a product that can be ordered.
defaultQuantity	number | null	The default quantity to order.
quantityStep	number	The step by which the quantity should be increased or decreased.

Example:

  const productGroupContext = useProductGroupContext();

  if (!productContext)
    return null;

  const {
    groupId,
    title,
    description,
    media,
    products,
  } = productGroupContext;