UseProductLine hook

const productLine = useProductLine();

When content element add-on is located on product list page it may need to access data about product line displayed as a part of the product list overview block.

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

Product group

If the product line is a product group, it contains the following fields:

Property	Type	Description
id	string	The ID of the first product in product group.
productsCount	number	Number of products in a product group.
attributes	Record<string, AddonFieldInfo>	The product add-on fields that are configured in Sana admin (Product add-on fields tab).
image	Image | null	The product group default image shown on the product line.
lowestPriceProduct	LowestPriceProduct | null | undefined	The product with the lowest price in the product group.

The AddonFieldInfo type contains following properties:

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

The Image type contains following properties:

Property	Type	Description
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 LowestPriceProduct type contains following properties:

Property	Type	Description
id	string	Identifier of the the lowest price product in the product group.
priceInfo	PriceInfo | null	Information about the sales price, which will be displayed as the final price taking discounts into account, if any.
listPriceInfo	PriceInfo | null	Information about the base price, which does not take discounts into account.

The PriceInfo type contains following properties:

Property	Type	Description
price	number	Price of the product.
decimalDigits	number	Number of decimal digits.

Product

Basic information about the product. Contains the following fields:

Property	Type	Description
id	string	The product ID.
title	string | null	The product title.
customerSpecificId	string | null	The customer specific product ID.
hasVariants	boolean | null	The boolean value indicating whether the product has variants.
uom	Uom | null	Selected product unit of measure, can be null if absent.
baseUomDescription	string | null	The description of the base unit of measure.
attributes	Record<string, AddonFieldInfo>	The product add-on fields that are configured in Sana admin (Product add-on fields tab).
image	Image | null	The product image shown on the product line.

The Uom type contains following properties:

Property	Type	Description
id	string	The unit of measure ID.
description	string | null	The description of the unit of measure.
baseQuantity	number | null	The quantity per base unit of measure. The value represents the number of items of base UOM current UOM contains.

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
price	number | null	The unit price of the product, calculated for the current customer.
listPrice	number | null	The list price of the product, which is the 'default' price of the product.
inventory	number | null	Actual inventory of the product in stock.
stockLevel	'inStock' | 'lowStock' | 'outOfStock' | 'preOrder' | null	The stock range.
pricePerBaseUom	number | null | undefined	Price per base unit of measure.
isOrderable	boolean	The boolean value indicating whether the product is orderable.

Example:

  const productLine = useProductLine();

  if ('productsCount' in productLine)
    return null;

  if ('price' in productLine)
    return <CalculatedProductComponent calculatedProduct={productLine} />

  return <ProductComponent product={product} />