​

Cart Drawer

Quero um carrinho lateral (drawer) com atualizar quantidade e checkout. Como implementar?

​

Objetivo

useCorvexCart() no parent
↓
items, subtotal, mutating, loading
↓
CartDrawer snippet (UI)
↓
updateQuantity / removeItem / goToCheckout

​

Contratos utilizados

• Cart Contract
• Cart resource — StorefrontCartItem
• @corvex/theme-sdk — formatPrice
• @corvex/runtime — SectionChrome, useCorvexCart (demo section)

​

Shape público (useCorvexCart)

​

Arquivos

snippets/cart-drawer/
├── snippet.jsx    # UI pura (props)
└── styles.css

sections/cart-drawer-demo/
├── section.jsx    # useCorvexCart + estado open local
├── schema.json
└── styles.css

​

Snippet (UI)

import CartDrawer from '@corvex/snippets/cart-drawer';

<CartDrawer
  open={open}
  onClose={() => setOpen(false)}
  items={items}
  subtotal={subtotal}
  loading={loading}
  mutating={mutating}
  error={error}
  onUpdateQuantity={(item, qty) =>
    updateQuantity(item.id, qty, item.productVariantId ?? null)
  }
  onRemove={(item) =>
    removeItem(item.id, item.productVariantId ?? null)
  }
  onCheckout={() => goToCheckout()}
/>

​

Estado open/close (local)

const [open, setOpen] = useState(false);

<button type="button" onClick={() => setOpen(true)}>Carrinho</button>

​

Abrir o drawer a partir do header

1. Link /cart — página dedicada (cart template)
2. Estado React elevado — layout theme.jsx ou provider local do tema compartilha open entre header e drawer
3. Aguardar contrato futuro — não inventar window.openCart() ou similar

​

Subtotal e preços

• Hook expõe subtotal (número) — use formatPrice(subtotal) do SDK
• Linha: item.linePrice ou item.price (contrato público)

​

Checkout

await goToCheckout();

​

Acessibilidade

• role="dialog" + aria-modal="true"
• Botão fechar com aria-label
• Escape fecha (handler no overlay)
• Overlay click fecha

​

Edge cases

​

Checklist

• useCorvexCart no parent, não no snippet de dados
• updateQuantity / removeItem com item.id
• Somente campos públicos de StorefrontCartItem
• Estado open local ou elevado no tema — sem API global inventada
• corvex validate .

​

Veja também

• Header Cookbook — itemCount + link /cart
• Variant Selector — addItem antes do drawer
• Featured Product — addItem(product, 1)