useProduct
The useProduct hook returns an object that enables you to keep track of the
selected variant and/or selling plan state, as well as callbacks for modifying the state. The useProduct hook must be a child of the ProductProvider component.
Example code
Anchor link to section titled "Example code"
Considerations
Anchor link to section titled "Considerations"- To make sure you have all the data necessary for the
useProducthook, refer to the Storefront API's ProductVariant object. - If your product requires a selling plan, then make sure to display that as required in your user interface. If it doesn't require a selling plan, then you might want to offer a "one-time purchase" option which triggers
setSelectedSellingPlan(null). - You can use
selectedSellingPlanAllocationto display the price adjustments for the selected variant when a given selling plan is active. - You can manually deselect a variant by calling
setSelectedVariant(null).
This hook takes a single object with the following keys:
| Key | Type | Description |
|---|---|---|
| variants? | PartialDeep<ProductVariantConnection> |
The product's VariantConnection. |
| sellingPlanGroups? | PartialDeep<SellingPlanGroupConnection> |
The product's SellingPlanGroups. |
| initialVariantId? | ProductVariantType['id'] |
The initially selected variant. |
Return value
Anchor link to section titled "Return value"This hook returns a single object with the following keys:
| Key | Description |
|---|---|
variants |
An array of the variant nodes from the VariantConnection. |
options |
An array of the product's options and values. |
selectedVariant |
The selected variant. |
setSelectedVariant |
A callback to set the selected variant to the variant passed as an argument. |
selectedOptions |
The current selected options. |
setSelectedOption |
A callback to set the selected option. |
setSelectedOptions |
A callback to set multiple selected options at once. |
isOptionInStock |
A callback that returns a boolean indicating if the option is in stock. |
setSelectedSellingPlan |
A callback to set the selected selling plan to the one passed as an argument. |
selectedSellingPlan |
The selected selling plan. |
selectedSellingPlanAllocation |
The selected selling plan allocation. |
sellingPlanGroups |
The selling plan groups. |
The Product object includes variables that you will need to provide values for when performing your query.
| Variable | Description |
|---|---|
$numProductVariantMetafields |
The number of Metafield objects to query for in a variant's MetafieldConnection. |
$numProductVariantSellingPlanAllocations |
The number of SellingPlanAllocations to query for in a variant's SellingPlanAllocationConnection. |
$numProductSellingPlanGroups |
The number of SellingPlanGroups objects to query for in a SellingPlanGroupConnection. |
$$numProductSellingPlans |
The number of SellingPlan objects to query for in a SellingPlanConnection. |