VariantPicker

• The VariantPicker component is designed for Minis, specifically those involved products with multiple configurable options like size, color, or material. This component provides an intuitive interface for users to select product variants through modals that present the available options for each attribute, enhancing the shopping experience by making it interactive and user-friendly.

  Embedded within this component is intelligent handling of selection states and updates, ensuring that any choice made by the user is reflected accurately across the application. By integrating with the custom useVariantPicker hook, it manages the complexities of syncing user selections with potential product configurations.

  Here’s how you can set up and utilize the VariantPicker component within your application:

• 
  

  <VariantPicker
    productOptions={product.optionTypes}
    variants={product.variants}
    initialSelectedOptions={[{name: 'Color', value: 'Red'}]}
    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

Start by importing the VariantPicker component from @shopify/shop-minis-platform-sdk:

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

Step 2: Using the VariantPicker

Incorporate the VariantPicker in the product detail screens or wherever the option to select product variants is necessary, configuring it to handle the available options and the action triggered by the variant selection:

<VariantPicker
  variants={productDetailedVariants}
  initialSelectedOptions={[{name: 'Size', value: 'M'}]}
  productOptions={productOptions}
  onProductVariantUpdated={selectedVariant =>
    handleVariantChange(selectedVariant)
  }
/>

Examples

Basic Implementation:

<VariantPicker
  productOptions={[{name: 'Size', options: ['S', 'M', 'L']}]}
  variants={shirtVariants}
  initialSelectedOptions={[{name: 'Size', value: 'M'}]}
  onProductVariantUpdated={variant => console.log('Selected variant:', variant)}
/>

Advanced Setup With Multiple Options:

<VariantPicker
  productOptions={[
    {name: 'Color', options: ['Black', 'White', 'Blue']},
    {name: 'Material', options: ['Cotton', 'Polyester']},
  ]}
  variants={jacketVariants}
  initialSelectedOptions={[
    {name: 'Color', value: 'Black'},
    {name: 'Material', value: 'Cotton'},
  ]}
  onProductVariantUpdated={variant => updateProductVariant(variant)}
/>

Props

• productOptions (ProductOption[]): Defines the different attributes available for the product.
• variants (Variant[]): All possible combinations of product options.
• initialSelectedOptions (VariantOption[]): Specifies the default settings for the picker.
• onProductVariantUpdated ((variant: Variant | null) => void): Callback triggered when a variant is selected or altered.

For more details on the props, please refer to the VariantPicker Props.