3 files changed, 31 insertions, 4 deletions
diff --git a/examples/ssr/src/components/AddToCart.svelte b/examples/ssr/src/components/AddToCart.svelte
index b03b8180a..0f7a97a93 100644
--- a/examples/ssr/src/components/AddToCart.svelte
+++ b/examples/ssr/src/components/AddToCart.svelte
@@ -1,11 +1,18 @@
 <script>
+	import { addToUserCart } from '../api';
 	export let id = 0;
+	export let name = '';
 
-	function addToCart() {
+	function notifyCartItem(id) {
 		window.dispatchEvent(new CustomEvent('add-to-cart', {
 			detail: id
 		}));
 	}
+
+	async function addToCart() {
+		await addToUserCart(id, name);
+		notifyCartItem(id);
+	}
 </script>
 <style>
 	button {
diff --git a/examples/ssr/src/components/Cart.svelte b/examples/ssr/src/components/Cart.svelte
index 63dd1b5a5..74db0bc79 100644
--- a/examples/ssr/src/components/Cart.svelte
+++ b/examples/ssr/src/components/Cart.svelte
@@ -12,6 +12,8 @@
 	.cart {
 		display: flex;
 		align-items: center;
+		text-decoration: none;
+		color: inherit;
 	}
 	.cart :first-child {
 		margin-right: 5px;
@@ -26,7 +28,7 @@
 	}
 </style>
 <svelte:window on:add-to-cart={onAddToCart}/>
-<div class="cart">
+<a href="/cart" class="cart">
 	<span class="material-icons cart-icon">shopping_cart</span>
 	<span class="count">{count}</span>
-</div>
+</a>
diff --git a/examples/ssr/src/components/Header.astro b/examples/ssr/src/components/Header.astro
index 2839c70d3..c4d925a5f 100644
--- a/examples/ssr/src/components/Header.astro
+++ b/examples/ssr/src/components/Header.astro
@@ -1,6 +1,10 @@
 ---
 import TextDecorationSkip from './TextDecorationSkip.astro';
 import Cart from './Cart.svelte';
+import { getCart } from '../api';
+
+const cart = await getCart();
+const cartCount = cart.items.reduce((sum, item) => sum + item.count, 0);
 ---
 <style>
 	@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
@@ -21,11 +25,25 @@ import Cart from './Cart.svelte';
 		color: inherit;
 		text-decoration: none;
 	}
+
+	.right-pane {
+		display: flex;
+	}
+
+	.material-icons {
+		font-size: 36px;
+		margin-right: 1rem;
+	}
 </style>
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 <header>
 	<h1><a href="/"><TextDecorationSkip text="Online Store" /></a></h1>
 	<div class="right-pane">
-		<Cart client:idle />
+		<a href="/login">
+			<span class="material-icons">
+			login
+			</span>
+		</a>
+		<Cart client:idle count={cartCount} />
 	</div>
 </header>