# Pickup Option Cart block

> Full-Page Shopping Cart with Per-Item Delivery or Pickup Toggle and Sticky Order Summary

Cart page where each item toggles delivery or pickup with its own date and fee, plus quantity steppers, promo code, and a hero estimated total. ReUI Badge, shadcn ToggleGroup, ButtonGroup, Card, InputGroup. For ecommerce checkout, basket, bag 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-4
- MCP: `get_block("shopping-cart-4")`
- Built with: Badge, Breadcrumb, Button, Button Group, Card, Empty, Field, Input Group, Item, Separator, Toggle Group, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A delivery or store pickup switch on every line, rolled up into ready-by counts in the header and split fee rows in the summary

## Agent notes

- `handleCheckout` only sets the URL hash, Continue Shopping has no `onClick` and Back to Catalog links to a bare hash; wire all three
- Each `CART_ITEMS` entry carries both a `delivery` and a `pickup` option with its own date and `price`, and `mode` picks the active one
- The Free pickup at any store caption is a literal in `Cart`, so update it if a `pickup` option in `CART_ITEMS` has a fee

## When not to use

- Taking address, contact and card details through numbered steps to pay: use [Sign-In Checkout](https://web.dev.reui.io/blocks/ecommerce/checkout/checkout-1.md) (`get_block("checkout-1")`)
- A basket that also lets the shopper pick a payment method from logo tiles: use [Payment Method Cart](https://web.dev.reui.io/blocks/ecommerce/shopping-cart/shopping-cart-5.md) (`get_block("shopping-cart-5")`)

## Install

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

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