# QuickAdd

> Lightweight add-to-cart for product cards. Use inside grids or carousels for faster checkout.

Canonical URL: https://fa7e86e3d553:3005/islands/commerce/quick-add

> Lightweight add-to-cart for product cards. Use inside grids or carousels for faster checkout. Shows variant picker if multiple variants.

## Preview

**Category**: Commerce

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| product | object | Yes | - | Product object with title, variants array, image (optional) |
| animate | boolean | No | true | Whether to animate add-to-cart interaction |

## Embed Example

```html
<lx-island name="QuickAdd">
  <script type="application/json">
{
  "product": {
    "title": "example-title",
    "variants": []
  }
}
  </script>
</lx-island>
```

## Usage Patterns

**In ProductCarousel cards (auto-embedded):**

```html
<lx-island name="ProductCarousel">
  <script type="application/json">
{
  "products": [
    {
      "id": "example-id",
      "handle": "example-handle",
      "title": "example-title",
      "price": "example-price"
    }
  ]
}
  </script>
</lx-island>
```

**Standalone in product grid:**

```html
<lx-island name="QuickAdd">
  <script type="application/json">
{
  "product": {
    "title": "example-title",
    "variants": []
  }
}
  </script>
</lx-island>
```

**With explicit product data (no fetch):**

```html
<lx-island name="QuickAdd">
  <script type="application/json">
{
  "product": {
    "title": "example-title",
    "variants": []
  }
}
  </script>
</lx-island>
```

## Events

| Event | Direction | Payload |
|-------|-----------|---------|
| cart:add | Emits | `{variantId: string, quantity: number}` when item added |
| quickadd:open | Emits | When variant picker modal opens (multi-variant products) |
| quickadd:close | Emits | When variant picker modal closes |

## Tips

- Use inside [ProductCarousel](/islands/commerce/product-carousel) or product grids for fast add-to-cart without leaving collection page
- If product has 1 variant → instant add-to-cart (no modal)
- If product has 2+ variants → opens compact variant picker modal
- Automatically opens the configured [DrawerShell](/islands/cart/drawer-shell)
  cart profile on successful add. Legacy pages may use
  [CartDrawer](/islands/cart/cart-drawer).
- Shows loading state + checkmark animation on successful add
- For single-variant products, prefer QuickAdd over full [BuyBox](/islands/commerce/buy-box) in grids
- Use `variant:"text"` or `variant:"outline"` in button styles for subtle CTAs
- Pair with `showQuickAdd:true` on [ProductCarousel](/islands/commerce/product-carousel) for auto-embedding

## Stylable Parts

Target internal elements via `data-part` selectors in section CSS:

| Part | Description |
|------|-------------|
| `root` | Outermost container |

```css
/* Example: custom styling */
[data-section-id='SECTION'] [data-part='root'] {
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
```

## Related Islands

- [ProductCarousel](/islands/commerce/product-carousel) — Auto-embeds QuickAdd when `showQuickAdd:true`
- [BuyBox](/islands/commerce/buy-box) — Full PDP CTA; QuickAdd is the lightweight grid/carousel alternative
- [CartDrawer](/islands/cart/cart-drawer) — Legacy Cart V1 alternative;
  new pages use the configured cart profile