https://github.com/vtex-apps/product-context
https://github.com/vtex-apps/product-context
hacktoberfest store-framework vtex-io
Last synced: 27 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/vtex-apps/product-context
- Owner: vtex-apps
- Created: 2019-04-17T20:50:37.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2025-07-26T00:00:33.000Z (7 months ago)
- Last Synced: 2025-07-26T07:17:44.180Z (7 months ago)
- Topics: hacktoberfest, store-framework, vtex-io
- Language: TypeScript
- Homepage:
- Size: 372 KB
- Stars: 8
- Watchers: 39
- Forks: 12
- Open Issues: 7
-
Metadata Files:
- Readme: docs/README.md
- Changelog: CHANGELOG.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
📢 Use this project, [contribute](https://github.com/vtex-apps/product-context) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).
# Product Context
[](#contributors-)
The Product Context app is designed to provide essential product data to all child blocks within your store theme.
## Configuration
1. Add the `product-context` app as a dependency to your store theme's `manifest.json` file:
```diff manifest.json
"dependencies": {
+ "vtex.product-context": "0.x"
}
```
2. Install the TypeScript types exported by the app by running the following command:
```sh
vtex 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`:
```tsx
// Notice that this is TypeScript, and this code should be in a .tsx file
import React, { FC } from 'react'
import { useProduct } from 'vtex.product-context'
const MyComponent: FC = () => {
const productContextValue = useProduct();
return (
{productContextValue?.product?.productName}
)
}
export 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:
```ts
interface ProductContextState {
selectedItem?: Item | null
product: MaybeProduct
selectedQuantity: number
skuSelector: {
selectedImageVariationSKU: string | null
isVisible: boolean
areAllVariationsSelected: boolean
}
buyButton: BuyButtonContextState
assemblyOptions: {
items: Record
inputValues: Record
areGroupsValid: Record
}
}
```
> 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.
## Contributors ✨
Thanks goes to these wonderful people:
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
