How to use variations in Product Detail page

This guide will help you to understand how to use variations in product detail page.

Steps

1. Add your blocks in the Product Detail Page

const productDetailPage = {
  blocks: [
    {
      name: 'appmaker/shopify-variation-listner',
      clientId: 'de9b066c-ae0d-4f7c-a3dd-123',
      attributes: {},
    },    
    {
      name: 'custom/shopify-product-image',
      attributes: {
        centerPagination: 1,
      },
    },    
    {
      name: "custom/shopify-product-data",
      clientId: "product-data",
      attributes: {},
    },
    {
      name: "custom/shopify-product-variation",
      attributes: {},
    },
    ],
};

export default productDetailPage;

note

appmaker/shopify-variation-listner block is used to listen to the product variations and it must be added as the first block in the product detail page.

You can refer to the Product Detail Page to know about the other existing blocks.

2. Register the blocks in blocks/index.js

import ProductVariation from './product-variation';
const blocks = {
  // other blocks
  {
    name: 'custom/shopify-product-variation',
    View: ProductVariation,
  },
  {
     name: 'custom/shopify-product-image',
     View: ProductImage, // ProductImage is a custom component that we have created to render the product images.
  },
  {
    name: "custom/shopify-product-data",
    View: ProductData, // ProductData is a custom component that we have created to render the product data like title, price, etc.
  },

};

export { blocks };

3. Create a component in components folder .

import { useProductOptions, useProductImages, useProductDetail } 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>
  );
}

note

You need to use useProductImages hook in your custom/shopify-product-image block to get the product images and use useProductDetail hook in your custom/shopify-product-data block to set the variant price.

Only then you can see the image and price for the selected variation in the product detail page.

Hooks

useProductOptions - This hook is used to get the product variations in productDetail page.

useProductDetail - This hook is used to get the data of a product.

useProductImages - This hook is used to get the product images and handle the image swiper actions. Used in the product detail page.