# CartSummary

> Displays cart subtotal, applied discounts, estimated taxes, and total. Read-only from cart state.

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

> Displays cart subtotal, applied discounts, estimated taxes, and total. Read-only from cart state.

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 |
|------|------|----------|---------|-------------|
| showTax | boolean | No | false | Show estimated tax line |
| showShipping | boolean | No | false | Show shipping estimate |
| showDiscounts | boolean | No | true | Show applied discounts |
| currency | string | No | from CartManager | Currency code (USD, INR, etc.) |
| variant | `"standard" \| "compact" \| "boxed"` | No | `"standard"` | Summary layout selected by the profile design |

## Profile module example

```json
{
  "showDiscounts": true,
  "showShipping": false,
  "showTax": false,
  "currency": "USD",
  "variant": "boxed"
}
```

## Events

| Event | Direction | Payload |
|-------|-----------|---------|
| - | - | None. CartSummary is read-only -- it reactively displays values from global cart state. |

## Tips

- Place between CartLines and CartCheckoutButton for natural visual flow
- Tax and shipping are estimates only -- final amounts calculated at checkout
- Currency defaults to the store currency from CartManager; override with `currency` prop for multi-currency stores
- Discounts line shows codes applied via [CartDiscountInput](/islands/cart/cart-discount-input)
- Updates automatically when cart state changes (no manual refresh needed)

## Stylable Parts

| Part | Description |
|------|-------------|
| `root` | Outermost container |
| `subtotal` | Subtotal line |
| `subtotal-label`, `subtotal-value` | Subtotal label and amount |
| `line` | Optional discount, shipping, or tax line |
| `line-label`, `line-value` | Optional line label and amount |

```css
/* Example: bold total with top border */
[data-lx-cart-profile] [data-part='subtotal'] {
  border-top: 2px solid #111;
  padding-top: 0.75rem;
  font-weight: 700;
}
```

## Related Islands

- [CartLines](/islands/cart/cart-lines) -- Line items that drive the summary values
- [CartDiscountInput](/islands/cart/cart-discount-input) -- Applied discounts appear in summary
- [CartCheckoutButton](/islands/cart/cart-checkout-button) -- Place below summary
- [DrawerShell](/islands/cart/drawer-shell) -- Required parent container