VTEX Cart v2 — Modular, Granular, Framework-Agnostic

The problem with the legacy cart

The legacy VTEX cart (loaders/cart.ts, hooks/useCart.ts, hooks/createUseCart.ts) has three structural inefficiencies:

1. Every mutation returns the full OrderForm. All 15 expectedOrderFormSections are hardcoded. Adding one item, changing a quantity, or applying a coupon all return the same ~40 KB payload — even when the UI only needs to update a badge number.

2. Cart created on page load for every visitor. createUseCart calls getOrCreateCart inside a useEffect on mount. A VTEX OrderForm is provisioned for ~70–90% of visitors who never click "add to cart". This is a real cost: the VTEX Checkout API creates a session, writes to their order-management store, and starts tracking an order — for a user who is just browsing.

3. No granularity, no cache opportunity. There is no way to ask "just the gifts", "just the drawer shipping options", or "just the coupon fields". Because all data is fetched together and from the browser (with credentials: "include"), there is no server-side projection layer and nothing to cache.

The Cart v2 thesis

Two independent knobs per operation:

• sections — what you ask VTEX to compute (expectedOrderFormSections). Fewer sections = smaller VTEX payload + less server-side compute.
• projection — what the server sends to the browser. Independent of sections. You can request a full VTEX OrderForm and project only the badge totals, or request SECTIONS_MINIMAL and project the full drawer.