# ProceedToCart

> Standalone checkout/cart button. Use as a secondary CTA or in sticky bars when BuyBox is not needed.

Canonical URL: https://fa7e86e3d553:3005/islands/commerce/proceed-to-cart

Standalone checkout/cart button. Use as a secondary CTA or in sticky bars when BuyBox is not needed.

**Category**: Commerce

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| label | string | No | "Proceed to Cart" | Button text |
| checkoutUrl | string | No | "/checkout" | Checkout URL (supports Shopify `/cart` or `/checkout`) |
| variantId | string | No | - | Pre-select a variant (adds to cart before redirect) |
| quantity | number | No | 1 | Quantity to add |
| variant | enum | No | "primary" | Button style: "primary", "outline", "minimal" |
| fullWidth | boolean | No | true | Full-width button |
| showCartCount | boolean | No | false | Show current cart item count badge |

## Embed Example

```html
<lx-island name="ProceedToCart">
  <script type="application/json">
{}
  </script>
</lx-island>
```

## Usage Patterns

**In a sticky bottom bar:**
```html
<lx-island name="ProceedToCart">
  <script type="application/json">
{}
  </script>
</lx-island>
```

**Direct-to-checkout with pre-selected variant:**
```html
<lx-island name="ProceedToCart">
  <script type="application/json">
{}
  </script>
</lx-island>
```

## Events

| Event | Direction | Payload |
|-------|-----------|---------|
| cart:add | Emits | `{variantId, quantity}` when variantId is set |
| cart:navigate | Emits | `{url}` before redirect |

## Tips

- Does NOT require CartDrawer or DrawerShell (cart profile) -- navigates away to checkout
- Use alongside BuyBox for a "Buy Now" express path
- `showCartCount` reads from shared cart state (works with CartDrawer and BuyBox)
- For sticky bars, prefer StickyBar island instead (more features)