Product Context

The Product Context app is responsible for providing data regarding a certain product to all of its children blocks.

Configuration

Add the product-context app as a dependency in you theme's manifest.json file:


_10  "dependencies": {
_10+   "vtex.product-context": "0.x"
_10  }

Now, you can import any of the exported components and hooks from the app. Here's an example of a component that render's the name of the product whose data is 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

Be sure to run vtex setup in your project to install the correct TypeScript types exported by this app.

Hooks

`useProduct`

This is the most useful export from this app. The useProduct hook can be used to read the data from the nearest ProductContext relative to its caller.

The productContextValue variable from the example above has the following type definition:


_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}

You should expect an object that looks like that as the return value of useProduct. Be aware that, if the hook is called outside of a ProductContextProvider, the return value could be undefined or an empty object.

To have the full type definition in your development environment, be sure to run vtex setup in your project to install all TypeScript types exported by this app.

`useProductDispatch`

This hooks returns a dispatch function which you can use to manipulate the nearest ProductContext.

The function is capable of performing 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 if a selected item is loading or not.

To have the full type definition in your development environment, be sure to run vtex setup in your project to install all TypeScript types exported by this app.