# CartDrawer

> Legacy Cart V1 component. New pages use Cart Profiles.

Canonical URL: https://fa7e86e3d553:3005/islands/cart/cart-drawer

> **Legacy Cart V1 component.** New pages must use Cart Profiles:
> configure the effective profile in Lexsis and do not author CartDrawer
> markup in page source. Cart V2 is already enabled by default.

> See [Cart Profiles](/guides/cart-v2) for the supported authoring workflow.

## Preview

**Category**: Commerce

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| items | array | Yes | - | Cart items array with id, title, variant, price, quantity, image, handle |
| currency | string | No | "₹" | Currency symbol to display |
| checkoutUrl | string | No | "/checkout" | URL for checkout button |
| animate | boolean | No | true | Whether to animate drawer open/close |

## Embed Example

```html
<lx-island name="CartDrawer">
  <script type="application/json">
{
  "items": [
    {
      "id": "example-id",
      "title": "example-title",
      "variant": "example-variant",
      "price": "example-price",
      "quantity": 0
    }
  ]
}
  </script>
</lx-island>
```

## Usage Patterns

**Standard placement (hidden section, ONE per page):**

```html
<lx-island name="CartDrawer">
  <script type="application/json">
{
  "items": [
    {
      "id": "example-id",
      "title": "example-title",
      "variant": "example-variant",
      "price": "example-price",
      "quantity": 0
    }
  ]
}
  </script>
</lx-island>
```

**With free shipping threshold (in cents):**

```html
<lx-island name="CartDrawer">
  <script type="application/json">
{
  "items": [
    {
      "id": "example-id",
      "title": "example-title",
      "variant": "example-variant",
      "price": "example-price",
      "quantity": 0
    }
  ]
}
  </script>
</lx-island>
```

**Left-side drawer (alternative placement):**

```html
<lx-island name="CartDrawer">
  <script type="application/json">
{
  "items": [
    {
      "id": "example-id",
      "title": "example-title",
      "variant": "example-variant",
      "price": "example-price",
      "quantity": 0
    }
  ]
}
  </script>
</lx-island>
```

## Events

| Event | Direction | Payload |
|-------|-----------|---------|
| cart:add | Listens | `{variantId: string, quantity: number}` from BuyBox, StickyBar, QuickAdd, BundleBuilder |
| cart:update | Listens | `{itemId: string, quantity: number}` from internal quantity changes |
| cart:remove | Listens | `{itemId: string}` from internal remove button |
| cart:open | Listens | Opens drawer (triggered by add-to-cart actions) |
| cart:close | Emits | When drawer is manually closed by user |

## Tips

- **ONE per page** — multiple CartDrawer instances conflict
- Place in a `<section class="hidden">` at the top of your page (first section) or in a dedicated invisible section
- `freeShippingThreshold` in cents (e.g., 99900 = ₹999, 5000 = $50)
- Position `"right"` is default and most common; `"left"` is alternative for RTL layouts or design preference
- Drawer opens automatically when BuyBox, StickyBar, QuickAdd, or BundleBuilder triggers `cart:add`
- Integrates with Shopify Cart API automatically — cart state persists across page loads
- Shows mini-cart summary, line items with images, quantity controls, and checkout CTA
- If `freeShippingThreshold` set, displays progress bar ("Add $X more for free shipping")

## 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

- [BuyBox](/islands/commerce/buy-box) — Triggers cart:add on "Add to Cart" click
- [StickyBar](/islands/commerce/sticky-bar) — Triggers cart:add from scroll-triggered bottom CTA
- [QuickAdd](/islands/commerce/quick-add) — Triggers cart:add from product cards/grids
- [BundleBuilder](/islands/commerce/bundle-builder) — Triggers cart:add for multi-product bundles