# CartProgressBar

> Free shipping or tiered discount progress bar for cart profiles. Shows how close the customer is to unlocking a reward.

Canonical URL: https://fa7e86e3d553:3005/islands/cart/cart-progress-bar

> Free shipping or tiered discount progress bar for cart profiles. Shows how close the customer is to unlocking a reward.

The effective Cart V2 profile creates this module. Do not embed it in page
source.

## Preview

**Category**: Commerce (Cart Profiles)

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| threshold | number | No | Profile setting | Target in minor currency units (e.g., 9900 = $99) |
| message | string | No | `"{remaining} away from free shipping"` | Message template (below threshold) |
| completedMessage | string | No | "Free shipping unlocked!" | Message when threshold met |
| tiers | `Array<{ threshold: number; label: string }>` | No | - | Multi-tier progress (overrides single threshold) |
| currency | string | No | Cart currency | Currency code |
| celebrationEnabled | boolean | No | Profile setting | Enable completion celebration |

Template variables in `message`: `{remaining}` (formatted remaining amount), `{total}` (cart total), `{threshold}` (target amount).

## Profile module example

```json
{
  "threshold": 7500,
  "message": "{remaining} away from free shipping!",
  "completedMessage": "Free shipping unlocked!",
  "currency": "USD",
  "celebrationEnabled": true
}
```

## Events

| Event | Direction | Payload |
|-------|-----------|---------|
| - | - | None. CartProgressBar reactively reads cart total from global state. |

## Tips

- Place at the top of DrawerShell for maximum visibility (first thing customer sees)
- Threshold values are in cents (7500 = $75.00, 9900 = $99.00)
- Use `tiers` for multi-level rewards -- overrides the single `threshold` prop when provided
- Progress bar fills proportionally based on cart total vs threshold
- Animates smoothly when cart total changes
- Pairs well with [CartLines](/islands/cart/cart-lines) below it for natural layout

## Stylable Parts

| Part | Description |
|------|-------------|
| `root` | Outermost container |
| `track` | Progress bar background track |
| `bar` | Progress bar filled portion |
| `message` | Text message below the bar |

```css
/* Example: gradient progress fill */
[data-lx-cart-profile] [data-part='bar'] {
  background: linear-gradient(90deg, #10b981, #059669);
  border-radius: 9999px;
}
[data-lx-cart-profile] [data-part='track'] {
  background: #e5e7eb;
  border-radius: 9999px;
  height: 8px;
}
```

## Related Islands

- [DrawerShell](/islands/cart/drawer-shell) -- Required parent container
- [CartLines](/islands/cart/cart-lines) -- Updates progress as items are added/removed
- [CartSummary](/islands/cart/cart-summary) -- Shows the same total in text form