Theme development, Module 4, lesson 13, 10 min

Add to cart without a page reload: the cart drawer

From

Sarah Okonkwo

Lead Developer

Friday, 10:15am

Cart drawer: wire the Add to cart buttons

The cart drawer is built and styled, but the "Add to cart" buttons do nothing yet. Wire them up: add the item, re-read the cart, then slide the drawer open. Read the count back from the cart, don't track it yourself.

Sarah

How this works

Modern stores add to cart without a page reload. They use Shopify's Ajax API, JSON endpoints under /cart. Use POST /cart/add.js to add an item, then GET /cart.js to read the whole cart. Add, re-read, then render.

fetch("/cart/add.js", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ id: variantId, quantity: 1 }),
})
  .then(function () { return fetch("/cart.js"); })
  .then(function (r) { return r.json(); })
  .then(render);

Re-read because the server decides the real cart. It can merge a line, apply a discount, or drop a sold-out variant. The /cart.js response is the truth, your local guess isn't.

Why this matters in production

The slide-in cart drawer is on nearly every modern Shopify store, it's the single most common piece of custom theme JS you'll be asked to build or fix. Getting the 'server is the source of truth' pattern right is what separates a drawer that works from one that quietly desyncs on real orders.

Report a bug or suggestion

assets/cart-drawer.js

Task

Find the YOUR TASK block at the top of the file. Inside each Add-to-cart button's click handler, POST { id: id, quantity: 1 } to /cart/add.js as a JSON body (JSON.stringify it, like the primer shows), then call refresh() (it re-reads the cart and redraws the drawer) and openDrawer(). The money, render, refresh, and openDrawer helpers are written for you lower down.