Select Product Variants in Storefront

In this guide, you'll learn how to select a product variant to be added to the cart in the storefront.

Overview#

Before a customer can add a product to the cart, they have to select from the product's available options.

Then, since a variant is a combination of the product options' values (for example, size S and color Blue), you must find the product variant that matches the chosen option values.

Finally, when the customer adds the product to the cart, you must add the selected variant to the cart.

In this guide, you'll learn how to show the product options and find the selected variant in a React-based storefront.

Example: React-Based Storefront#

Here's an example of a React component that shows the product options and allows the customer to select a variant:

Code
1"use client" // include with Next.js 13+2
3import { useEffect, useMemo, useState } from "react"4import { HttpTypes } from "@medusajs/types"5import { sdk } from "@/lib/sdk"6
7type Props = {8  id: string9}10
11export default function Product({ id }: Props) {12  const [loading, setLoading] = useState(true)13  const [product, setProduct] = useState<14    HttpTypes.StoreProduct | undefined15  >()16  const [selectedOptions, setSelectedOptions] = useState<Record<string, string>>({})17
18  useEffect(() => {19    if (!loading) {20      return 21    }22
23    sdk.store.product.retrieve(id)24    .then(({ product: dataProduct }) => {25      setProduct(dataProduct)26      setLoading(false)27    })28  }, [loading])29
30  const selectedVariant = useMemo(() => {31    if (32      !product?.variants ||33      !product.options || 34      Object.keys(selectedOptions).length !== product.options?.length35    ) {36      return37    }38
39    return product.variants.find((variant) => variant.options?.every(40      (optionValue) => optionValue.id === selectedOptions[optionValue.option_id!]41    ))42  }, [selectedOptions, product])43
44  return (45    <div>46      {loading && <span>Loading...</span>}47      {product && (48        <>49          <h1>{product.title}</h1>50          {(product.options?.length || 0) > 0 && (51            <ul>52              {product.options!.map((option) => (53                <li key={option.id}>54                  {option.title}55                  {option.values?.map((optionValue) => (56                    <button 57                      key={optionValue.id}58                      onClick={() => {59                        setSelectedOptions((prev) => {60                          return {61                            ...prev,62                            [option.id!]: optionValue.value!,63                          }64                        })65                      }}66                    >67                      {optionValue.value}68                    </button>69                  ))}70                </li>71              ))}72            </ul>73          )}74          {selectedVariant && (75            <>76              <span>Selected Variant: {selectedVariant.id}</span>77              {/* TODO: Show add to cart button */}78            </>79          )}80          {product.images?.map((image) => (81            <img src={image.url} key={image.id} />82          ))}83        </>84      )}85    </div>86  )87}

In this example, you:

• Retrieve the product details from Medusa.
• Show the product's options and allow the customer to select an option value.
• Store the selected options in the selectedOptions state variable. It's an object whose keys are options' ID, and values are the selected value of that option.
• Compute the selected variable whenever the selected option is changed. When the customer chooses a value for all options, you find a product variant that has the same chosen option-value combinations.
• Show the ID of the selected variant when it's found.

In your storefront, you should show the add-to-cart button instead of the variant ID. Refer to the Manage Cart's Items guide to learn how to add a product variant to the cart.