# Delivery Summary Cart block

> Two-Column Shopping Cart Page with Sticky Order Summary Frame and Coupon Field

Cart page: item list with thumbnails, size badges, and quantity steppers beside a sticky order summary with delivery, tax, total, coupon, and checkout. ReUI Frame, Badge plus shadcn Item, ButtonGroup, InputGroup, Empty. Bag, basket, order review.

- Type: Pro block
- Category: [Shopping Cart](https://web.dev.reui.io/blocks/ecommerce/shopping-cart.md)
- Page: https://web.dev.reui.io/blocks/ecommerce/shopping-cart/shopping-cart-2
- MCP: `get_block("shopping-cart-2")`
- Built with: Badge, Button, Button Group, Empty, Field, Frame, Input Group, Item, Separator, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A summary that recaps each line by quantity, names the courier and ship-to address, and prints the total on the checkout button

## Agent notes

- `handleCheckout` only sets the URL hash; the Change address link and Continue Shopping also go nowhere, so wire all three to your routes
- `COURIER`, `SHIP_TO` and `TAX_RATE` are fixed demo values; the Delivery by 9 PM today line in `Cart` is a separate literal
- `PROMO_CODE` prefills the coupon field and the promo starts applied, so `getOrderTotals` takes `PROMO_DISCOUNT` off at load

## When not to use

- Every line toggles between delivery and store pickup, each with its own date and fee: use [Pickup Option Cart](https://web.dev.reui.io/blocks/ecommerce/shopping-cart/shopping-cart-4.md) (`get_block("shopping-cart-4")`)
- Lines laid out as table rows under Price and Total Price column headers: use [Data Table Cart](https://web.dev.reui.io/blocks/ecommerce/shopping-cart/shopping-cart-3.md) (`get_block("shopping-cart-3")`)

## Install

```bash
npx shadcn@latest add @reui/shopping-cart-2
```

## About Shopping Cart blocks

### When to use

- A cart page where shoppers change quantities, remove lines and see the totals before paying
- A mini cart that drops from a header Cart button or slides in from the side after an add

### When not to use

- Rows of funds, coins, transactions or integrations, with no quantities or order total: use the [List blocks](https://web.dev.reui.io/blocks/application/list.md)
- A side panel over an app page for a record, a form or an assistant, with no prices: use the [Sheet blocks](https://web.dev.reui.io/blocks/application/sheet.md)
- Taking contact, shipping address and card details to place and pay for the order: use the [Checkout blocks](https://web.dev.reui.io/blocks/ecommerce/checkout.md)

### Agent notes

- Lines live in local `useState` seeded from `CART_ITEMS` or `CART_LINES` in data.tsx; read them from your cart store and write each quantity change back
- The empty state's Restore Sample Cart button reloads the demo lines through `handleRestoreCart` or `handleRestore`; point it at your catalog
- Each priced file declares its own `formatCurrency` fixed to en-US and USD; change every copy to show another currency or locale

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.