CartDrawer
The cart in a side sheet, with quantities, the subtotal and Checkout.
SourcePackage @weft-js/warp
Preview
tsx
import { state } from '@weft-js/core'import { CartButton, CartDrawer, Stack, Text, Toaster } from '@weft-js/warp'export function Shop() { const cart = state(SHOP_CART) const open = state(false) const placed = state(false) return ( <> <Stack gap="related" align="center"> <CartButton count={cart.value.reduce((n, line) => n + line.quantity, 0)} onClick={() => (open.value = true)} /> <Text subtle>{placed.value ? 'On to checkout.' : 'Open the cart, change a quantity.'}</Text> </Stack> <CartDrawer open={open} cart={cart} onCheckout={() => (placed.value = true)} /> <Toaster /> </> )}const SHOP_CART = [ { id: 'key', name: 'Security key, USB-C', variant: 'Pack of 2', price: 58, quantity: 1 }, { id: 'hoodie', name: 'weft hoodie', variant: 'Graphite · M', price: 64, quantity: 1 }, { id: 'stickers', name: 'Sticker sheet', variant: 'Deploy on Friday', price: 6, quantity: 2 },]Installation
npm install @weft-js/warpUsage
tsx
import { CartDrawer } from '@weft-js/warp'Accessibility
- This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and warp's parts keep their roles and labels.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
open | State<boolean> | — | Whether it shows. You own this state. |
cart | State<CartLine[]> | — | The lines, as a state. |
currency | string | — | A currency code. |
locale | string | — | The locale for the amounts. |
| Event | Type | Default | Description |
|---|---|---|---|
onCheckout | () => void | — | Called after the drawer closes. |
Parts
Every element carries a stable name, so you can style it from your own CSS: [data-scope="stack"] [data-part="total"]
total
RelatedCart buttonLine itemCheckout