Product Variations & Sizes

Product
  └── Attribute (e.g. "Strain")
        └── Option (e.g. "Blue Dream")
              └── Size (e.g. "1g" at $29.99)
              └── Size (e.g. "3.5g" at $89.99)
        └── Option (e.g. "OG Kush")
              └── Size (e.g. "1g" at $34.99)

import dash from "@/lib/dash"

const { options } = await dash.products.getOptions("blue-dream")

// options.variations = attributes array
// Each attribute has options, each option has sizes

"use client"
import { useState, useEffect } from "react"
import dash from "@/lib/dash"

export function VariationPicker({ slug }: { slug: string }) {
  const [options, setOptions] = useState(null)
  const [selectedOption, setSelectedOption] = useState(null)
  const [selectedSize, setSelectedSize] = useState(null)

  useEffect(() => {
    dash.products.getOptions(slug).then(({ options }) => {
      setOptions(options)
      // Auto-select the main (default) option
      const mainOption = options.variations?.[0]?.options?.find(o => o.main)
      if (mainOption) {
        setSelectedOption(mainOption)
        setSelectedSize(mainOption.sizes?.[0])
      }
    })
  }, [slug])

  if (!options) return <div>Loading...</div>

  return (
    <div>
      {/* Option buttons */}
      {options.variations?.[0]?.options.map(opt => (
        <button key={opt.id} onClick={() => {
          setSelectedOption(opt)
          setSelectedSize(opt.sizes[0])
        }}>
          {opt.value}
        </button>
      ))}

      {/* Size buttons */}
      {selectedOption?.sizes.map(size => (
        <button key={size.id} onClick={() => setSelectedSize(size)}>
          {size.label} — ${size.discounted_price || size.price}
        </button>
      ))}

      {/* Add to cart */}
      <button onClick={() => dash.cart.add({
        productId: "prod_...",
        sizeId: selectedSize.id,
        quantity: 1
      })}>Add to Cart</button>
    </div>
  )
}

{
  "bulk_discounts": [
    { "min_quantity": 3, "discount_type": "percentage", "discount_value": "5" },
    { "min_quantity": 5, "discount_type": "percentage", "discount_value": "10" },
    { "min_quantity": 10, "discount_type": "percentage", "discount_value": "15" }
  ]
}

const { variations } = await dash.products.getFeaturedVariations()
// Great for homepage featured sections