UseProductOptions

​ This hook is used to get the variation options for a product. It returns the variation options, selected options, and functions to set the selected options and check if an option is available for a variation option.

note

This hook is used only in the ProductDetail component to render the variation options for a product. Use useProductVariations hook to get the variation options for a product in product list.

Table of Contents​

props	type	description
variationOptions	array	This is the list of variation options for the product.
setOption	function	This function is used to set the selected option for a variation option. It will update the selectedOptions state. You can call it like setOption(optionName, optionValue)
selectedOptions	object	This is the state that contains the selected options for all the variation options.
isOptionAvilableV2	function	This function is used to check if a particular option is available for a variation option. It will return true if the option is available, otherwise false. You can call it like isOptionAvilableV2(optionName, optionValue)
getAvailableOptions	function	This function is used to get the available options for a variation option. It will return the available options for the variation option.
product	object	This is the product object that is similar to the one returned by the useProductDetail hook.
variants	array	This is the list of variants for the product.
options	array	This is the list of options for the product.

​

Example of using the useProductOptions hook

import { useProductOptions } from '@appmaker-xyz/shopify';
import React from 'react';
import { View } from 'react-native';
import ColorPicker from './ProductColorPicker';
import SizePicker from './ProductSizePicker';
import ProductVariationSelect from './ProductVariationSelect';
​
export default function VariationChooser(props) {
  const {
    variationOptions, 
    setOption, 
    selectedOptions, 
    isOptionAvilableV2,
    getAvailableOptions,
  } = useProductOptions(props);
​
​
  const VariationOptionsItems = (props) => {
    // In the following code, you can see for different variation options, we are rendering different components.
    const { name } = props;
    switch (name) {
      case 'Size':
        // SizePicker is a custom component that we have created to render the size options.
        return (
          <View>
              <SizePicker {...props} />
          </View>
        );
      case 'Color':
        // ColorPicker is a custom component that we have created to render the color options.
        return (
          <ColorPicker
            {...props}
            optionName={name}
            getAvailableOptions={getAvailableOptions}
            isOptionAvilable={isOptionAvilableV2}
          />
        );
      default:
        // For any other variation option, we are rendering the default ProductVariationSelect component.
        return <ProductVariationSelect {...props} />;
    }
  };
  return (
    <View>
      {variationOptions.map((variationOption) => {
        return (
          <View key={`options-${variationOption.key}`}>
            <VariationOptionsItems
              name={variationOption.name}
              isOptionAvilable={isOptionAvilableV2}
              options={variationOption.options}
              selectedOption={
                selectedOptions && selectedOptions[variationOption?.key]
              }
              onClick={(item) => {
                setOption(variationOption.key, item.value);
              }}
            />
          </View>
        );
      })}
    </View>
  );
}