Svelte 48: Module E Capstone — Building a Shopping Cart
easy⏱ 5 mincoursesvelte
Everything from Module E, in one feature
The cart's public surface is { subscribe, add, remove, clear } — no raw set, exactly like lesson 42's counter. itemCount and subtotal are derived straight from the cart, exactly like lesson 41's chained totals. Header, ProductList, and Cart all retrieve the same bundle via getContext('cart'), exactly like lesson 45's widget pattern — just with real components instead of a toy counter.
derived() doesn't care that cart isn't a writable
derived(cart, ...) works even though cart is a hand-rolled object with only {subscribe, add, remove, clear} — proof that the STORE CONTRACT (lessons 42–43) is really all Svelte's reactivity primitives care about. Anything with .subscribe can be a source for derived, read with $, or passed to get().
Build the whole loop
Add a couple of products, watch the badge in the header and the subtotal in the cart update together, remove one item, then clear the cart entirely.