Checkout

A storefront with a root cart and a self-contained checkout flow. It combines named scopes, async handlers, error isolation and state carried over from prerendering.

How it works

Try it: reload the page and read the note under the cart. Go through checkout, and once with an email containing crash.

• Prerender persistence. SavedCartLoader fills CartState during prerendering. PersistState(…CartState) serializes it into the page, and the interactive circuit restores it instead of loading again. The time in the note is when the load ran: it stays at the page's load time, because the interactive circuit does not load a second time.
• Root vs. scoped state. CartState lives at the root and is shared by the catalog, badge, summary and checkout. CheckoutForm lives in the checkout's StateScope.
• Named route. Place order publishes OrderSubmitted with Route.Named("checkout", Broadcast). The order log outside the scope never sees it (its counter stays 0).
• Async handler + cancellation. PaymentProcessor awaits a fake payment with the handler's CancellationToken, which is cancelled if you navigate away. It then publishes OrderConfirmed, which bubbles up to the order log.
• Error isolation. With an email containing crash, AnalyticsTracker throws. Its ErrorBoundary shows the error while the payment still completes.
• Events + selectors. CartBadge re-renders for count changes (selector) and pulses on ItemAdded (event).