🛒 Shopping Cart
Add items across browser tabs — the cart is stored in session data and shared across every tab without cookies, localStorage, or Redux.
SESSION-scoped cart via a custom
cart:{sessionId} scope means the cart is shared across every tab in your browser. Open a new tab — the cart is already populated.$app->broadcast($cartScope) pushes the updated cart to all connected tabs of that session simultaneously. No polling, no cache invalidation, no client state sync.
$c->sessionData() / setSessionData() stores the cart in the framework's per-session bucket. No static class, no manual cleanup — and the cart survives a full page reload.
CSS @starting-style animates newly inserted cart rows without a single line of JavaScript. When Datastar morphs in the new item, the browser's entry transition fires automatically.
Block partial rendering — on updates only the #cart-panel fragment is sent, not the product grid. The products are rendered once on initial load and stay static in the DOM.
Products
🪣
Artisanal Bit Bucket (12L)
CHF 4.99
🦆
Blockchain-Certified Rubber Duck
CHF 29.99
📦
Enterprise-Grade Left-Pad Module
CHF 1,999.00
📄
Self-Documenting Code (PDF, signed)
Free!
🔌
Quantum-Entangled HDMI Cable (5m)
CHF 79.99
⭕
Gluten-Free Null Pointer
CHF 0.01
☕
Infinite Loop Coffee Mug
CHF 14.99
🛡️
Zero-Day Vulnerability Insurance (Annual)
CHF 999.99
🛒 Cart
Your cart is empty.
Add something — it persists across tabs.
💡 Open a new tab and visit this page — your cart will already be here.
🎯 Actions
addItem
Appends a product (by ?id= param) to the session cart and broadcasts to all session tabs.
removeItem
Removes a product by ?id= param and broadcasts the updated cart.
clearCart
Clears the session data key and broadcasts the empty state.
👁 Views
shopping_cart.html.twig
Product grid rendered once on initial load (static). Cart panel re-renders on every broadcast via block: 'cart'.