useProductVariations

This hook is used only in the ProductList component to render the variation options for a product. For ProductDetail component, use the useProductOptions hook.

props	type	description
isSingleVariation	boolean
isMultiOptions	boolean
options	object
selectedOptions	object
selectedVariant	object
setOptions	function
variant	object
salePrice	number
regularPrice	number
regularPriceWithCurrency	string
salePriceWithCurrency	string
imageUrl	string
salePercentage	number
onSale	boolean
isVariantAvailable	boolean

Usage:

import { useProductVariations } from '@appmaker-xyz/shopify';

export default function ProductListItem(props) {
    const {
        options,
        setOptions,
        variant,
        selectedVariant,
        salePrice,
        regularPrice,
        imageUrl,
        selectedOptions,
        salePercentage,
        onSale,
        regularPriceWithCurrency,
        salePriceWithCurrency,
        isMultiOptions,
        isVariantAvailable,
    } = useProductVariations(props);

    return (
        <View>
            <Text>{variant.title}</Text>
        </View>
    );

setoptions function is used to set the selected options.

<View>
{isMultiOptions ? (
    <View>
        {options?.map?.((opt) =>
            Object.values(opt?.values).map((item, index) => (
            <TouchableOpacity
                key={index}
                onPress={() => {
                    setOptions({ [opt.label]: item.id });
                    }}>
            </TouchableOpacity>
            )),
        )}
    </View>
) : null}
</View>