CompactVariantPicker

• The CompactVariantPicker component is designed to facilitate the selection of product variants and manage quantities for Minis. It integrates a modal-driven selection process with a quantity adjustment feature, providing a seamless and interactive user experience.

  This component is particularly useful in scenarios where products have multiple variants, such as size or color, and users need to specify quantities before adding items to their cart.

• 
  

  <CompactVariantPicker
    variants={variants}
    productOptions={productOptions}
    initialSelectedOptions={[]}
    selectedOptions={selectedOptions}
    onProductVariantUpdated={variant => console.log(variant)}
  />

Requirements:

• Ensure your project environment is set up with access to @shopify/shop-minis-platform-sdk. See the quickstart for requirements and to set up a Shop Mini.

Integration

Step 1: Importing the Component

Firstly, ensure the CompactVariantPicker component is accessible by importing it at the top of your file:

import {CompactVariantPicker} from '@shopify/shop-minis-platform-sdk'

Step 2: Using the CompactVariantPicker Component

Incorporate the CompactVariantPicker into your component structure by using it in the return statement of your component, providing all necessary props as needed:

const [selectedOptions, setSelectedOptions] = useState<VariantOption[]>(initialSelectedOptions)

// Use this function to update the selected options when a variant is updated
const onProductVariantUpdated = (variant: Variant | null) => {
  setSelectedOptions(variant?.selectedOptions || [])

  // You can also use it to update the ProductCard if you are using the component with ProductCard
  setSelectedProduct(products.find(product =>
    product.variants.includes(variant as Variant)
  ))
}

<Box flexDirection="row" paddingTop="m" gap="xs">
  <TouchableProduct product={selectedProduct}>
    <ProductCard shopId={SHOP_GID} product={selectedProduct} />
  </TouchableProduct>
  <Box paddingVertical="xs">
    <CompactVariantPicker
      variants={variants}
      productOptions={productOptions}
      initialSelectedOptions={initialSelectedOptions}
      selectedOptions={selectedOptions}
      onProductVariantUpdated={onProductVariantUpdated}
    />
  </Box>
</Box>

Props

• variants (Variant[]): The available variants for a product.
• productOptions (ProductOption[]): The options available for the product variants.
• initialSelectedOptions (VariantOption[]): Initially selected variant options.
• selectedOptions (VariantOption[]): Selected variant options.
• onProductVariantUpdated ((variant: Variant | null, quantity?: number) => void): Callback when a product variant is updated.
• maxQuantity (number): The maximum quantity for the product variant, is an optional property, if not defined the quantity will be the defined by the "quantityAvailable" in the variant.