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.
Example code
Anchor link to section titled "Example code"
Considerations
Anchor link to section titled "Considerations"- 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.
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. |
Storefront API data
Anchor link to section titled "Storefront API data"The following GraphQL query corresponds to the Storefront API's ProductVariant object. Using the query ensures that you have all the data necessary for the useProductOptions hook:
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. |