How Do I Implement Dynamic Variant Selector for Shopify in Next.js?

[VienDinhCom]

Challenge

Building the UI/UX for a dynamic product options selector for Shopify could be difficult if you try to code it from scratch. In this article, I will show you how to build flexible UI/UX for this feature for your e-commerce site.

Solution

The answer to this challenge is in the @maxvien/shopify npm package. I aimed to create a general-purpose React hook to implement a customizable UI for the product variant selecting feature. So I can use select elements or even button elements to build the UI in the code examples below.

npm install --save-dev @maxvien/shopify

Use Variant Selector React Hook

First, we must query the product data from a Shopify Storefront API. And the return data must satisfy the type below; so we can use it with the useVariantSelector hook.

interface Product {
  variants: {
    nodes: {
      id: string;
      availableForSale: boolean;
      selectedOptions: {
        name: string;
        value: string;
      }[];
    }[];
  };
  options: {
    name: string;
    values: string[];
  }[];
}

Next, we can use the product data with the useVariantSelector hook like the code below.

const { options, selectOption, variantId } = useVariantSelector(product);

• options is an array that useVariantSelector takes from the product data to help us render the options with button elements or select elements.
• selectOption is a function that helps us to select an option and store it in the useVariantSelector's state.
• variantId: If the options we select that match with a variant in the product data, the useVariantSelector will return it as the variantId. And we can use the variantId to add the product variant to the cart.

Implement the Hook with Button Elements

import { useVariantSelector } from '@maxvien/shopify';

export function ProductSingleSection(props: Props) {
  const { variantId, options, selectOption } = useVariantSelector(props.product);

  return (
    <section>
      <div>
        {options.map(({ name, values }) => (
          <div key={name}>
            <h3>{name}</h3>

            {values.map(({ value, selected, disabled }) => {
              return (
                <button
                  key={value}
                  disabled={disabled}
                  style={{ background: selected ? 'yellow' : 'inherit' }}
                  onClick={() => selectOption(name, value)}
                >
                  {value}
                </button>
              );
            })}
          </div>
        ))}
      </div>

      <button disabled={!!variantId} onClick={() => addTocart(variantId)}>
        Add to Cart
      </button>
    </section>
  );
}

Implement the Hook with Select Elements

import { useVariantSelector } from '@maxvien/shopify';

export function ProductSingleSection(props: Props) {
  const { variantId, options, selectOption } = useVariantSelector(props.product);

  return (
    <section>
      <div>
        {options.map(({ name, values }) => {
          return (
            <div key={name}>
              <h3>{name}</h3>

              <select onChange={(event) => selectOption(name, event.target.value)}>
                <option value="">Choose {name}</option>
                {values.map(({ value, disabled, selected }) => (
                  <option key={value} value={value} selected={selected} disabled={disabled}>
                    {value}
                  </option>
                ))}
              </select>
            </div>
          );
        })}
      </div>

      <button disabled={!!variantId} onClick={() => addTocart(variantId)}>
        Add to Cart
      </button>
    </section>
  );
}

Conclusion

That is how I implement dynamic variant selectors for Shopify in Next.js. I hope my little solution can help you increase your conversion rate by building effective UI/UX for your product pages. Thank you for reading!