useProductOptions
The useProductOptions
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 useProductOptions
hook must be a child of the ProductOptionsProvider
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
useProductOptions
hook, 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
selectedSellingPlanAllocation
to 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 . |