From d5d38fe8f0517d3ab6f84c4ece4e7d370fa0507a Mon Sep 17 00:00:00 2001
From: Marcel Oomens <mail@marceloomens.com>
Date: Sat, 3 Apr 2021 16:12:29 +0200
Subject: [PATCH 1/8] Initial commit

Signed-off-by: Marcel Oomens <mail@marceloomens.com>
---
 src/components/cart.js | 48 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 src/components/cart.js

diff --git a/src/components/cart.js b/src/components/cart.js
new file mode 100644
index 0000000..4d82bf3
--- /dev/null
+++ b/src/components/cart.js
@@ -0,0 +1,48 @@
+import { writable } from 'svelte/store'
+
+const DEFAULT = 0;
+
+const stores = new Map();
+
+function createStore( identifier ) {
+
+  const value  = localStorage.getItem( identifier );
+  const { subscribe, set, update } = writable( value || DEFAULT );
+
+  subscribe(v => {
+    localStorage.setItem( identifier, v )
+  });
+
+  function add( n ) {
+    update(v => v + n);
+  }
+
+  function remove( n ) {
+    update(v => v < n ? 0 : v - n);
+  }
+
+  return {
+    subscribe,
+    add,
+    remove
+  };
+}
+
+export function getCart( a, b ) {
+
+  if ( typeof a === "undefined" )
+    throw new Error( "(cart.js) `getCart( a, b )` requires at least one parameter." );
+  const product = b ?? a;
+  const variant = b ? a : "default";
+
+  const identifier = `cart/${product}/${variant}`;
+
+  if ( stores.has(identifier) ) {
+    return stores.get(identifier);
+  }
+
+  const store = createStore( identifier );
+  stores.set( identifier, store )
+
+  return store;
+}

From 10ce959fa373cdb38fb4f862806e1a62788fcdc8 Mon Sep 17 00:00:00 2001
From: Marcel Oomens <mail@marceloomens.com>
Date: Sun, 4 Apr 2021 13:05:52 +0200
Subject: [PATCH 2/8] Basic architecture in place

Signed-off-by: Marcel Oomens <mail@marceloomens.com>
---
 src/components/CartDetail.svelte | 21 +++++++++++++++++++++
 src/components/Tile.svelte       | 31 ++++++++++++++-----------------
 src/components/cart.js           |  2 +-
 src/layouts/Layout.svelte        |  4 ++--
 src/routes/home/Home.svelte      |  2 +-
 5 files changed, 39 insertions(+), 21 deletions(-)
 create mode 100644 src/components/CartDetail.svelte

diff --git a/src/components/CartDetail.svelte b/src/components/CartDetail.svelte
new file mode 100644
index 0000000..1970b8f
--- /dev/null
+++ b/src/components/CartDetail.svelte
@@ -0,0 +1,21 @@
+<script>
+  export let product;
+
+  let { slug } = product;
+
+  import { onMount } from 'svelte/';
+  import { getCart } from './cart.js';
+
+  let cart;
+
+  onMount(() => {
+    cart = getCart( slug );
+  });
+
+</script>
+
+<style>
+
+</style>
+
+<button on:click={cart.add(1)} class="w-full border-2 border-white font-display text-white focus:bg-white active:bg-white hover:bg-white focus:border-yellow-600 active:border-yellow-600 hover:border-yellow-600 focus:text-yellow-600 active:text-yellow-600 hover:text-yellow-600 py-2 px-3 rounded-md">Add to cart ({$cart})</button>
diff --git a/src/components/Tile.svelte b/src/components/Tile.svelte
index f7d1469..6f73224 100644
--- a/src/components/Tile.svelte
+++ b/src/components/Tile.svelte
@@ -1,9 +1,10 @@
 <script>
   export let id;
-  export let name = 'J Flower Cake';
-  export let description = 'A delicious J Flower Cake made from fresh ingredients and original Asian flower cake recipes and designs.';
-  export let image;
-  export let available = true;
+  export let product;
+
+  import CartDetail from './CartDetail.svelte';
+
+  let { name, description, image, available } = product;
 
   const ASSETS_BASE = /^https:\/\/res.cloudinary.com\/jflower\/image\/upload\//;
 
@@ -17,8 +18,6 @@
   if (!image) {
     image = 'fallback';
   }
-
-  let wamsg = encodeURIComponent(`I would like to order a ${name}. (from website)`);
 </script>
 
 <style>
@@ -45,23 +44,21 @@ aside:target {
     <figcaption class="hidden">{name}</figcaption>
   </figure>
 </a>
-<aside id="tile-{id}" class="fixed inset-0 top-1/4 sm:top-0 sm:left-1/2 z-10 flex-col justify-end p-3 bg-black bg-opacity-90 text-center">
+<aside id="tile-{id}" class="fixed inset-0 top-1/4 sm:top-0 sm:left-1/2 z-10 p-4 bg-black bg-opacity-90">
   <a href="#/" class="absolute block top-0 right-0 p-3 text-xl">&#x2715;</a>
-  <h2 class="font-display text-2xl">{name}</h2>
-  <div class="overflow-hidden">
-    <figure class="h-full">
+  <div class="flex flex-col justify-end content-center sm:max-w-screen-sm mx-auto">
+    <figure class="w-3/4 overflow-hidden mx-auto">
       <picture>
         <source media="(min-width: 320px)" type="image/webp" srcset="//res.cloudinary.com/jflower/image/upload/t_landscape-640/{image}.webp, //res.cloudinary.com/jflower/image/upload/t_landscape-1280/{image}.webp 2x">
         <source type="image/webp" srcset="//res.cloudinary.com/jflower/image/upload/t_landscape-320/{image}.webp, //res.cloudinary.com/jflower/image/upload/t_landscape-640/{image}.webp 2x">
-        <img class="object-contain w-full h-full" src="//res.cloudinary.com/jflower/image/upload/t_landscape-640/{image}.jpg" sizes="(min-width: 640px) 50vw, 100vw" alt="{name}">
+        <img class="object-contain h-full rounded-lg" src="//res.cloudinary.com/jflower/image/upload/t_landscape-640/{image}.jpg" sizes="(min-width: 640px) 50vw, 100vw" alt="{name}">
       </picture>
     </figure>
+    <h2 class="font-display text-center text-2xl">{name}</h2>
+    <p class="max-w-prose">{description}</p>
+    {#if available}
+      <CartDetail hydrate-client={{product}} />
+    {/if}
   </div>
-  <p>{description}</p>
-  {#if available}
-  <a href="https://wa.me/31611134040?text={wamsg}" target="_blank" class="w-1/2 max-w-xs self-center mt-2" rel="external nofollow noopener noreferrer">
-    <button disabled class="w-full border-2 border-white font-display text-white focus:bg-white active:bg-white hover:bg-white focus:border-yellow-600 active:border-yellow-600 hover:border-yellow-600 focus:text-yellow-600 active:text-yellow-600 hover:text-yellow-600 py-2 px-3 rounded-md">Order now</button>
-  </a>
-  {/if}
 </aside>
 </article>
diff --git a/src/components/cart.js b/src/components/cart.js
index 4d82bf3..6865968 100644
--- a/src/components/cart.js
+++ b/src/components/cart.js
@@ -6,7 +6,7 @@ const stores = new Map();
 
 function createStore( identifier ) {
 
-  const value  = localStorage.getItem( identifier );
+  const value = Number( localStorage.getItem( identifier ) );
   const { subscribe, set, update } = writable( value || DEFAULT );
 
   subscribe(v => {
diff --git a/src/layouts/Layout.svelte b/src/layouts/Layout.svelte
index 2fa905a..54f9098 100644
--- a/src/layouts/Layout.svelte
+++ b/src/layouts/Layout.svelte
@@ -26,7 +26,7 @@
 
 <header class="px-2 py-4 text-center bg-gradient-to-b from-green-900">
   <h1 class="font-cursive text-4xl sm:text-6xl">J Flower Cake</h1>
-  <p class="font-serif"><i>Delicious cakes, desert and snacks, made with love using locally-sourced ingredients and traditional Asian and Western recipes.</i></p>
+  <p class="font-display">Delicious cakes, desert and snacks, made with love using locally-sourced ingredients and traditional Asian and Western recipes.</p>
 </header>
 
 <main class="flex-grow">
@@ -34,7 +34,7 @@
 </main>
 
 <footer class="px-2 py-4 text-center bg-gradient-to-t from-green-900">
-  <address class="text-sm">
+  <address class="not-italic text-sm">
     <span class="font-cursive text-3xl">J Flower Cake</span><br />
     Middenmolenlaan 9<br />
     2807 DL Gouda
diff --git a/src/routes/home/Home.svelte b/src/routes/home/Home.svelte
index a180a09..b1ceff4 100644
--- a/src/routes/home/Home.svelte
+++ b/src/routes/home/Home.svelte
@@ -33,6 +33,6 @@ section {
 
 <section class="grid justify-center">
 {#each products as product, i}
-  <Tile id={i} {...product.frontmatter} />
+  <Tile id={i} product={product.frontmatter} />
 {/each}
 </section>

From 2645345c0aa59a1fb5e122c3f3cd895037de8490 Mon Sep 17 00:00:00 2001
From: Marcel Oomens <mail@marceloomens.com>
Date: Sun, 4 Apr 2021 17:46:26 +0200
Subject: [PATCH 3/8] Introduce shopping cart

Refactor Cart into CartDetail

Signed-off-by: Marcel Oomens <mail@marceloomens.com>
---
 src/components/Cart.svelte       | 39 ++++++++++++++++++++++++++++++++
 src/components/CartDetail.svelte | 13 ++++-------
 src/components/Tile.svelte       | 11 ++++-----
 src/routes/home/Home.svelte      | 16 ++++++++-----
 4 files changed, 59 insertions(+), 20 deletions(-)
 create mode 100644 src/components/Cart.svelte

diff --git a/src/components/Cart.svelte b/src/components/Cart.svelte
new file mode 100644
index 0000000..4882d78
--- /dev/null
+++ b/src/components/Cart.svelte
@@ -0,0 +1,39 @@
+<script>
+  import CartDetail from './CartDetail.svelte';
+
+  export let products;
+</script>
+
+<style>
+
+</style>
+
+<table>
+  <caption>Shopping cart</caption>
+  <thead>
+    <tr>
+      <th scope="col">Product</th>
+      <th scope="col">Unit price</th>
+      <th scope="col">Units</th>
+      <th scope="col">Total</th>
+    </tr>
+  </thead>
+  <tbody>
+  {#each products as {name, slug}}
+    <tr>
+      <th scope="row">{name}</th>
+      <td></td>
+      <td><CartDetail hydrate-client={{slug}} /></td>
+      <td></td>
+    </tr>
+  {/each}
+  </tbody>
+  <tfoot>
+    <tr>
+      <th scope="row">Grand total</th>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+  </tfoot>
+</table>
diff --git a/src/components/CartDetail.svelte b/src/components/CartDetail.svelte
index 1970b8f..f21acda 100644
--- a/src/components/CartDetail.svelte
+++ b/src/components/CartDetail.svelte
@@ -1,12 +1,10 @@
 <script>
-  export let product;
-
-  let { slug } = product;
+  export let slug;
 
   import { onMount } from 'svelte/';
   import { getCart } from './cart.js';
 
-  let cart;
+  var cart;
 
   onMount(() => {
     cart = getCart( slug );
@@ -14,8 +12,7 @@
 
 </script>
 
-<style>
-
-</style>
+<button on:click={cart.remove(1)}>-</button>
+{$cart}
+<button on:click={cart.add(1)}>+</button>
 
-<button on:click={cart.add(1)} class="w-full border-2 border-white font-display text-white focus:bg-white active:bg-white hover:bg-white focus:border-yellow-600 active:border-yellow-600 hover:border-yellow-600 focus:text-yellow-600 active:text-yellow-600 hover:text-yellow-600 py-2 px-3 rounded-md">Add to cart ({$cart})</button>
diff --git a/src/components/Tile.svelte b/src/components/Tile.svelte
index 6f73224..bde658c 100644
--- a/src/components/Tile.svelte
+++ b/src/components/Tile.svelte
@@ -1,10 +1,9 @@
 <script>
   export let id;
-  export let product;
-
-  import CartDetail from './CartDetail.svelte';
-
-  let { name, description, image, available } = product;
+  export let name;
+  export let description;
+  export let image;
+  export let available;
 
   const ASSETS_BASE = /^https:\/\/res.cloudinary.com\/jflower\/image\/upload\//;
 
@@ -57,7 +56,7 @@ aside:target {
     <h2 class="font-display text-center text-2xl">{name}</h2>
     <p class="max-w-prose">{description}</p>
     {#if available}
-      <CartDetail hydrate-client={{product}} />
+      <button disabled class="w-full border-2 border-white font-display text-white focus:bg-white active:bg-white hover:bg-white focus:border-yellow-600 active:border-yellow-600 hover:border-yellow-600 focus:text-yellow-600 active:text-yellow-600 hover:text-yellow-600 py-2 px-3 rounded-md">Add to cart</button>
     {/if}
   </div>
 </aside>
diff --git a/src/routes/home/Home.svelte b/src/routes/home/Home.svelte
index b1ceff4..9ace96e 100644
--- a/src/routes/home/Home.svelte
+++ b/src/routes/home/Home.svelte
@@ -1,13 +1,15 @@
 <script>
   import Tile from '../../components/Tile.svelte';
+  import Cart from '../../components/Cart.svelte';
 
   export let data;
 
-  const products = data.markdown.products;
-  products.filter( a => a.frontmatter.promoted );
+  const products = (data.markdown.products)
+    .map(p => p.frontmatter);
+  products.filter( a => a.promoted );
   products.sort( (a, b) => {
-    if (a.frontmatter.order > b.frontmatter.order ) { return 1; }
-    else if (a.frontmatter.order < b.frontmatter.order ) { return -1; }
+    if (a.order > b.order ) { return 1; }
+    else if (a.order < b.order ) { return -1; }
     else { return 0; }
   } );
 </script>
@@ -32,7 +34,9 @@ section {
 </style>
 
 <section class="grid justify-center">
-{#each products as product, i}
-  <Tile id={i} product={product.frontmatter} />
+{#each products as product, id}
+  <Tile {id} {...product} />
 {/each}
 </section>
+
+<Cart products={products} />

From e3969d7af350738f6807adb8a1f6545481ba03b4 Mon Sep 17 00:00:00 2001
From: Marcel Oomens <mail@marceloomens.com>
Date: Sun, 4 Apr 2021 17:59:08 +0200
Subject: [PATCH 4/8] Add variations

Add cake variations to the Netlify CMS config

Signed-off-by: Marcel Oomens <mail@marceloomens.com>
---
 assets/editor/config.yml | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/assets/editor/config.yml b/assets/editor/config.yml
index cafed7f..c6b6e10 100644
--- a/assets/editor/config.yml
+++ b/assets/editor/config.yml
@@ -47,6 +47,20 @@ collections:
       - {label: "Slug", name: "slug", widget: "string"}
       - {label: "Description", name: "description", widget: "string"}
       - {label: "Image", name: "image", widget: "image", allow_multiple: false}
+      - label: Variations
+        name: variations
+        widget: list
+        allow_add: true
+        collapsed: false
+        summary: "{{fields.description}} (€ {{fields.price}})"
+        minimize_collapsed: false
+        label_singular: Variation
+        fields:
+          - {label: "Description", name: "description", widget: "string", default: "Regular"}
+          - {label: "Price", name: "price", widget: "number", value_type: "float", default: 35.0, min: 0.0, step: 1.0}
+        # max:
+        min: 1
+        add_to_top: false
       - {label: "Available", name: "available", widget: "boolean", default: true, hint: "Products on sale can be ordered. Products not on sale cannot."}
       - {label: "Promoted", name: "promoted", widget: "boolean", default: true, hint: "Promoted products are displayed on the home page."}
       - {label: "Order", name: "order", widget: "number", value_type: "int", default: 10, min: 1, max: 100, step: 1}

From f3b7546ef18f307cce7d27f060d944bab07b3118 Mon Sep 17 00:00:00 2001
From: Marcel Oomens <mail@marceloomens.com>
Date: Mon, 5 Apr 2021 10:31:25 +0200
Subject: [PATCH 5/8] WIP: refactor

[skip ci]

Signed-off-by: Marcel Oomens <mail@marceloomens.com>
---
 src/components/Cart.svelte       | 22 ++++++++++++++++------
 src/components/CartDetail.svelte |  6 +-----
 src/components/Tile.svelte       |  2 +-
 src/routes/home/Home.svelte      | 13 ++-----------
 src/routes/home/route.js         | 12 ++++++++++++
 5 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/src/components/Cart.svelte b/src/components/Cart.svelte
index 4882d78..5a6884e 100644
--- a/src/components/Cart.svelte
+++ b/src/components/Cart.svelte
@@ -1,15 +1,21 @@
 <script>
-  import CartDetail from './CartDetail.svelte';
-
   export let products;
+  // export let summary = false;
+  export let header = true;
+  export let footer = true;
+  export let caption = "";
+
+  import CartDetail from './CartDetail.svelte';
 </script>
 
 <style>
 
 </style>
 
+{#if products.length > 0}
 <table>
-  <caption>Shopping cart</caption>
+  {#if caption}<caption>Shopping cart</caption>{/if}
+  {#if header}
   <thead>
     <tr>
       <th scope="col">Product</th>
@@ -18,16 +24,18 @@
       <th scope="col">Total</th>
     </tr>
   </thead>
+  {/if}
   <tbody>
-  {#each products as {name, slug}}
+  {#each products as product}
     <tr>
-      <th scope="row">{name}</th>
+      <th scope="row">{product.name}</th>
       <td></td>
-      <td><CartDetail hydrate-client={{slug}} /></td>
+      <td><CartDetail hydrate-client={{slug: product.slug}} /></td>
       <td></td>
     </tr>
   {/each}
   </tbody>
+  {#if footer}
   <tfoot>
     <tr>
       <th scope="row">Grand total</th>
@@ -36,4 +44,6 @@
       <td></td>
     </tr>
   </tfoot>
+  {/if}
 </table>
+{/if}
diff --git a/src/components/CartDetail.svelte b/src/components/CartDetail.svelte
index f21acda..a8c13ae 100644
--- a/src/components/CartDetail.svelte
+++ b/src/components/CartDetail.svelte
@@ -6,13 +6,9 @@
 
   var cart;
 
-  onMount(() => {
-    cart = getCart( slug );
-  });
-
+  onMount(() => cart = getCart( slug ) );
 </script>
 
 <button on:click={cart.remove(1)}>-</button>
 {$cart}
 <button on:click={cart.add(1)}>+</button>
-
diff --git a/src/components/Tile.svelte b/src/components/Tile.svelte
index bde658c..4f2bc24 100644
--- a/src/components/Tile.svelte
+++ b/src/components/Tile.svelte
@@ -5,8 +5,8 @@
   export let image;
   export let available;
 
+  // Could be a nice piece of code to move to a filter
   const ASSETS_BASE = /^https:\/\/res.cloudinary.com\/jflower\/image\/upload\//;
-
   if (image) {
     image = image
       // Remove Cloudinary base url
diff --git a/src/routes/home/Home.svelte b/src/routes/home/Home.svelte
index 9ace96e..07fc819 100644
--- a/src/routes/home/Home.svelte
+++ b/src/routes/home/Home.svelte
@@ -3,15 +3,6 @@
   import Cart from '../../components/Cart.svelte';
 
   export let data;
-
-  const products = (data.markdown.products)
-    .map(p => p.frontmatter);
-  products.filter( a => a.promoted );
-  products.sort( (a, b) => {
-    if (a.order > b.order ) { return 1; }
-    else if (a.order < b.order ) { return -1; }
-    else { return 0; }
-  } );
 </script>
 
 <style>
@@ -34,9 +25,9 @@ section {
 </style>
 
 <section class="grid justify-center">
-{#each products as product, id}
+{#each data.products as product, id}
   <Tile {id} {...product} />
 {/each}
 </section>
 
-<Cart products={products} />
+<Cart products={data.products} />
diff --git a/src/routes/home/route.js b/src/routes/home/route.js
index 8509119..ced60c3 100644
--- a/src/routes/home/route.js
+++ b/src/routes/home/route.js
@@ -4,6 +4,18 @@ module.exports = {
   // the permalink function takes a 'request' object and returns a relative permalink. In this case "/"
   permalink: ({ request }) => request.slug,
   data: ({ data }) => {
+
+    const products = (data.markdown.products)
+      .map(p => p.frontmatter);
+    products.filter( a => a.promoted );
+    products.sort( (a, b) => {
+      if (a.order > b.order ) { return 1; }
+      else if (a.order < b.order ) { return -1; }
+      else { return 0; }
+    } );
+
+    data.products = products;
+
     return data
   },
   // template: 'Home.svelte' // this is auto-detected.

From a565dbdec7b940576724652e525b13d94e02d5f3 Mon Sep 17 00:00:00 2001
From: Marcel Oomens <mail@marceloomens.com>
Date: Mon, 5 Apr 2021 20:28:41 +0200
Subject: [PATCH 6/8] store.js refactor

Signed-off-by: Marcel Oomens <mail@marceloomens.com>
---
 src/components/Cart.svelte       | 17 ++++++++--
 src/components/CartDetail.svelte | 14 ---------
 src/components/cart.js           | 48 ----------------------------
 src/components/store.js          | 54 ++++++++++++++++++++++++++++++++
 src/routes/home/Home.svelte      |  2 +-
 5 files changed, 70 insertions(+), 65 deletions(-)
 delete mode 100644 src/components/CartDetail.svelte
 delete mode 100644 src/components/cart.js
 create mode 100644 src/components/store.js

diff --git a/src/components/Cart.svelte b/src/components/Cart.svelte
index 5a6884e..97cad83 100644
--- a/src/components/Cart.svelte
+++ b/src/components/Cart.svelte
@@ -5,7 +5,14 @@
   export let footer = true;
   export let caption = "";
 
-  import CartDetail from './CartDetail.svelte';
+  import { onMount } from 'svelte/';
+  import { getStore } from './store.js';
+
+  let store = getStore();
+
+  onMount(() => {
+    store.persist();
+  });
 </script>
 
 <style>
@@ -27,12 +34,18 @@
   {/if}
   <tbody>
   {#each products as product}
+    <!-- {#if $store[product.slug]} -->
     <tr>
       <th scope="row">{product.name}</th>
       <td></td>
-      <td><CartDetail hydrate-client={{slug: product.slug}} /></td>
+      <td>
+        <button on:click={store.decrement(product.slug)}>-</button>
+        {$store[product.slug]}
+        <button on:click={store.increment(product.slug)}>+</button>
+      </td>
       <td></td>
     </tr>
+    <!-- {/if} -->
   {/each}
   </tbody>
   {#if footer}
diff --git a/src/components/CartDetail.svelte b/src/components/CartDetail.svelte
deleted file mode 100644
index a8c13ae..0000000
--- a/src/components/CartDetail.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script>
-  export let slug;
-
-  import { onMount } from 'svelte/';
-  import { getCart } from './cart.js';
-
-  var cart;
-
-  onMount(() => cart = getCart( slug ) );
-</script>
-
-<button on:click={cart.remove(1)}>-</button>
-{$cart}
-<button on:click={cart.add(1)}>+</button>
diff --git a/src/components/cart.js b/src/components/cart.js
deleted file mode 100644
index 6865968..0000000
--- a/src/components/cart.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import { writable } from 'svelte/store'
-
-const DEFAULT = 0;
-
-const stores = new Map();
-
-function createStore( identifier ) {
-
-  const value = Number( localStorage.getItem( identifier ) );
-  const { subscribe, set, update } = writable( value || DEFAULT );
-
-  subscribe(v => {
-    localStorage.setItem( identifier, v )
-  });
-
-  function add( n ) {
-    update(v => v + n);
-  }
-
-  function remove( n ) {
-    update(v => v < n ? 0 : v - n);
-  }
-
-  return {
-    subscribe,
-    add,
-    remove
-  };
-}
-
-export function getCart( a, b ) {
-
-  if ( typeof a === "undefined" )
-    throw new Error( "(cart.js) `getCart( a, b )` requires at least one parameter." );
-  const product = b ?? a;
-  const variant = b ? a : "default";
-
-  const identifier = `cart/${product}/${variant}`;
-
-  if ( stores.has(identifier) ) {
-    return stores.get(identifier);
-  }
-
-  const store = createStore( identifier );
-  stores.set( identifier, store )
-
-  return store;
-}
diff --git a/src/components/store.js b/src/components/store.js
new file mode 100644
index 0000000..02a81a8
--- /dev/null
+++ b/src/components/store.js
@@ -0,0 +1,54 @@
+import { writable } from 'svelte/store';
+
+// We're not currently honouring anything but "THEIRS"
+const MERGE_STRATEGY = "THEIRS";
+const STORE_IDENTIFIER = "jflower-shopping-cart";
+
+export function getStore() {
+
+  const { subscribe, set, update } = writable({});
+
+  function add( n, product) {
+    update((store) => {
+      if (product in store) {
+        store[product] += n;
+      } else {
+        store[product] = n;
+      }
+      return store;
+    });
+  }
+
+  function remove( n, product ) {
+    update((store) => {
+      if (product in store && store[product] < n) {
+        store[product] = 0;
+      } else if (product in store) {
+        store[product] -= n;
+      } else {
+        store[product] = 0;
+      }
+      return store;
+    });
+  }
+
+  function increment( product ) { add( 1, product ); }
+  function decrement( product ) { remove( 1, product ); }
+
+  function trash( product ) {
+    update((store) => {
+      store[product] = 0;
+      return store;
+    });
+  }
+
+  function persist( identifier=STORE_IDENTIFIER, storage=localStorage, stategy=MERGE_STRATEGY ) {
+    const store = storage.getItem(identifier);
+    if (store) {
+      update((_) => JSON.parse(store));
+    }
+    subscribe((store) => storage.setItem(identifier, JSON.stringify(store)));
+  }
+
+  return { subscribe, add, remove, increment, decrement, trash, persist };
+}
diff --git a/src/routes/home/Home.svelte b/src/routes/home/Home.svelte
index 07fc819..7a7b945 100644
--- a/src/routes/home/Home.svelte
+++ b/src/routes/home/Home.svelte
@@ -30,4 +30,4 @@ section {
 {/each}
 </section>
 
-<Cart products={data.products} />
+<Cart hydrate-client={{products: data.products}} />

From 7583165217f247b69b731942ebbb3ef9182504d5 Mon Sep 17 00:00:00 2001
From: Marcel Oomens <mail@marceloomens.com>
Date: Mon, 5 Apr 2021 23:27:28 +0200
Subject: [PATCH 7/8] WIP: Add Cart to Tile

Signed-off-by: Marcel Oomens <mail@marceloomens.com>
---
 src/components/Cart.svelte  | 12 +++---
 src/components/Tile.svelte  | 13 +++---
 src/components/store.js     | 83 +++++++++++++++++++------------------
 src/routes/home/Home.svelte |  2 +-
 4 files changed, 55 insertions(+), 55 deletions(-)

diff --git a/src/components/Cart.svelte b/src/components/Cart.svelte
index 97cad83..42d7386 100644
--- a/src/components/Cart.svelte
+++ b/src/components/Cart.svelte
@@ -1,18 +1,18 @@
 <script>
   export let products;
-  // export let summary = false;
+  export let summary = false;
   export let header = true;
   export let footer = true;
   export let caption = "";
 
   import { onMount } from 'svelte/';
-  import { getStore } from './store.js';
-
-  let store = getStore();
+  import { store } from './store.js';
 
   onMount(() => {
+    // `persist` returns an unsubscribe callback
     store.persist();
   });
+
 </script>
 
 <style>
@@ -34,7 +34,7 @@
   {/if}
   <tbody>
   {#each products as product}
-    <!-- {#if $store[product.slug]} -->
+    {#if !summary || $store[product.slug]}
     <tr>
       <th scope="row">{product.name}</th>
       <td></td>
@@ -45,7 +45,7 @@
       </td>
       <td></td>
     </tr>
-    <!-- {/if} -->
+    {/if}
   {/each}
   </tbody>
   {#if footer}
diff --git a/src/components/Tile.svelte b/src/components/Tile.svelte
index 96523ba..887bc22 100644
--- a/src/components/Tile.svelte
+++ b/src/components/Tile.svelte
@@ -1,9 +1,10 @@
 <script>
+  import Cart from './Cart.svelte';
+
   export let id;
-  export let name;
-  export let description;
-  export let image;
-  export let available;
+  export let product;
+
+  let {name, description, image, available} = product;
 
   // Could be a nice piece of code to move to a filter
   const ASSETS_BASE = /^https:\/\/res.cloudinary.com\/jflower\/image\/upload\//;
@@ -58,9 +59,7 @@ aside:target {
     <h2 class="font-display text-center text-2xl">{name}</h2>
     <p class="max-w-prose">{description}</p>
     {#if available}
-      <a href="https://wa.me/31611134040?text={wamsg}" target="_blank" class="w-1/2 max-w-xs self-center mt-2" rel="external nofollow noopener noreferrer">
-        <button class="w-full border-2 border-white font-display text-white focus:bg-white active:bg-white hover:bg-white focus:border-yellow-600 active:border-yellow-600 hover:border-yellow-600 focus:text-yellow-600 active:text-yellow-600 hover:text-yellow-600 py-2 px-3 rounded-md">Add to cart</button>
-      </a>
+      <Cart hydrate-client={{products: [product]}} />
     {/if}
   </div>
 </aside>
diff --git a/src/components/store.js b/src/components/store.js
index 02a81a8..6bcf776 100644
--- a/src/components/store.js
+++ b/src/components/store.js
@@ -1,54 +1,55 @@
 import { writable } from 'svelte/store';
 
-// We're not currently honouring anything but "THEIRS"
+// I'm not currently honouring anything but "THEIRS"
 const MERGE_STRATEGY = "THEIRS";
 const STORE_IDENTIFIER = "jflower-shopping-cart";
 
-export function getStore() {
+const { subscribe, set, update } = writable({});
 
-  const { subscribe, set, update } = writable({});
+let unsubscribe, isPersistent = false;
 
-  function add( n, product) {
-    update((store) => {
-      if (product in store) {
-        store[product] += n;
-      } else {
-        store[product] = n;
-      }
-      return store;
-    });
-  }
+function add( n, product) {
+  update((store) => {
+    if (product in store) {
+      store[product] += n;
+    } else {
+      store[product] = n;
+    }
+    return store;
+  });
+}
 
-  function remove( n, product ) {
-    update((store) => {
-      if (product in store && store[product] < n) {
-        store[product] = 0;
-      } else if (product in store) {
-        store[product] -= n;
-      } else {
-        store[product] = 0;
-      }
-      return store;
-    });
-  }
+function remove( n, product ) {
+  update((store) => {
+    if (product in store && store[product] < n) {
+      store[product] = 0;
+    } else if (product in store) {
+      store[product] -= n;
+    } else {
+      store[product] = 0;
+    }
+    return store;
+  });
+}
 
-  function increment( product ) { add( 1, product ); }
-  function decrement( product ) { remove( 1, product ); }
+function increment( product ) { add( 1, product ); }
+function decrement( product ) { remove( 1, product ); }
 
-  function trash( product ) {
-    update((store) => {
-      store[product] = 0;
-      return store;
-    });
-  }
+function trash( product ) {
+  update((store) => {
+    store[product] = 0;
+    return store;
+  });
+}
 
-  function persist( identifier=STORE_IDENTIFIER, storage=localStorage, stategy=MERGE_STRATEGY ) {
-    const store = storage.getItem(identifier);
-    if (store) {
-      update((_) => JSON.parse(store));
-    }
-    subscribe((store) => storage.setItem(identifier, JSON.stringify(store)));
+function persist( identifier=STORE_IDENTIFIER, storage=localStorage, stategy=MERGE_STRATEGY ) {
+  if (isPersistent) return console.warn("J Flower Cake: Store is already persistent");
+  const store = storage.getItem(identifier);
+  if (store) {
+    update((_) => JSON.parse(store));
   }
-
-  return { subscribe, add, remove, increment, decrement, trash, persist };
+  unsubscribe = subscribe((store) => storage.setItem(identifier, JSON.stringify(store)));
+  return isPersistent = true && unsubscribe;
 }
+
+export const store = { subscribe, add, remove, increment, decrement, trash, persist };
diff --git a/src/routes/home/Home.svelte b/src/routes/home/Home.svelte
index 7a7b945..2861979 100644
--- a/src/routes/home/Home.svelte
+++ b/src/routes/home/Home.svelte
@@ -26,7 +26,7 @@ section {
 
 <section class="grid justify-center">
 {#each data.products as product, id}
-  <Tile {id} {...product} />
+  <Tile {id} {product} />
 {/each}
 </section>
 

From a7d1fcb9231ba41c049db0e3f0586273b84782a1 Mon Sep 17 00:00:00 2001
From: Marcel Oomens <mail@marceloomens.com>
Date: Sun, 11 Apr 2021 21:59:52 +0200
Subject: [PATCH 8/8] WIP: cake variations

Signed-off-by: Marcel Oomens <mail@marceloomens.com>
---
 src/components/Cart.svelte | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/Cart.svelte b/src/components/Cart.svelte
index 42d7386..7035acb 100644
--- a/src/components/Cart.svelte
+++ b/src/components/Cart.svelte
@@ -34,19 +34,21 @@
   {/if}
   <tbody>
   {#each products as product}
-    {#if !summary || $store[product.slug]}
+  {#each product.variations as variation}
+    {#if !summary || $store[`${variation.slug}/${product.slug}`]}
     <tr>
-      <th scope="row">{product.name}</th>
+      <th scope="row">{variation.description} {product.name}</th>
       <td></td>
       <td>
-        <button on:click={store.decrement(product.slug)}>-</button>
-        {$store[product.slug]}
-        <button on:click={store.increment(product.slug)}>+</button>
+        <button on:click={store.decrement(`${variation.slug}/${product.slug}`)}>-</button>
+        {$store[`${variation.slug}/${product.slug}`]}
+        <button on:click={store.increment(`${variation.slug}/${product.slug}`)}>+</button>
       </td>
       <td></td>
     </tr>
     {/if}
   {/each}
+  {/each}
   </tbody>
   {#if footer}
   <tfoot>