Product Context by vtex

${"base64":" ","img":{"width":110,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square"}}$

The Product Context app is designed to provide essential product data to all child blocks within your store theme.

Configuration

Add the product-context app as a dependency to your store theme's manifest.json file:

manifest.json
_10 "dependencies": { _10+ "vtex.product-context": "0.x" _10 }
Install the TypeScript types exported by the app by running the following command:

_10vtex setup

Now, you're ready to import components and hooks from the app. Check this example component that displays the product name using data stored in the nearest ProductContext:


_15// Notice that this is TypeScript, and this code should be in a .tsx file
_15import React, { FC } from 'react'
_15import { useProduct } from 'vtex.product-context'
_15
_15const MyComponent: FC = () => {
_15  const productContextValue = useProduct();
_15
_15  return (
_15    <Fragment>
_15      {productContextValue?.product?.productName}
_15    </Fragment>
_15  )
_15}
_15
_15export default MyComponent

Hooks

`useProduct`

The useProduct hook allows your app to retrieve data from the nearest ProductContext relative to its caller. Expect an object with the structure below as the return value:


_16interface ProductContextState {
_16  selectedItem?: Item | null
_16  product: MaybeProduct
_16  selectedQuantity: number
_16  skuSelector: {
_16    selectedImageVariationSKU: string | null
_16    isVisible: boolean
_16    areAllVariationsSelected: boolean
_16  }
_16  buyButton: BuyButtonContextState
_16  assemblyOptions: {
_16    items: Record<GroupId, AssemblyOptionItem[]>
_16    inputValues: Record<GroupId, InputValues>
_16    areGroupsValid: Record<GroupId, boolean>
_16  }
_16}

Note that if the hook is called outside a ProductContextProvider, the return value may be undefined or an empty object.

`useProductDispatch`

The useProductDispatch hook provides a dispatch function to manipulate the nearest ProductContext. The function supports the following actions:

SELECT_IMAGE_VARIATION: Sets the value for the skuSelector.selectedImageVariationSKU property.
SET_QUANTITY: Sets the value for the selectedQuantity property.
SKU_SELECTOR_SET_VARIATIONS_SELECTED: Sets the value for the skuSelector.areAllVariationsSelected property.
SET_BUY_BUTTON_CLICKED: Sets the value for the buyButton.clicked property.
SKU_SELECTOR_SET_IS_VISIBLE: Sets the value for the skuSelector.isVisible property.
SET_SELECTED_ITEM: Sets the value for the selectedItem property.
SET_ASSEMBLY_OPTIONS: Sets the value for the assemblyOptions property.
SET_PRODUCT: Sets the value for the product property.
SET_LOADING_ITEM: Sets the value of whether a selected item is loading.