feat: 🎸 add basket counter

jaskaransarkaria · Jan 15, 2022 · 9a02101 · 9a02101
1 parent 8d36831
commit 9a02101
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 28 deletions.
diff --git a/.routify/config.js b/.routify/config.js
@@ -8,5 +8,5 @@ module.exports = {
   noHashScroll: false,
   distDir: 'dist',
   extensions: ['svelte', 'html', 'svx', 'md'],
-  started: '2022-01-15T15:36:09.495Z',
+  started: '2022-01-15T16:52:26.406Z',
 };
diff --git a/.routify/routes.js b/.routify/routes.js
@@ -1,10 +1,10 @@
 /**
  * @roxi/routify 2.7.3
- * File generated Sat Jan 15 2022 15:36:12 GMT+0000 (Greenwich Mean Time)
+ * File generated Sat Jan 15 2022 16:52:28 GMT+0000 (Greenwich Mean Time)
  */
 
 export const __version = '2.7.3';
-export const __timestamp = '2022-01-15T15:36:12.057Z';
+export const __timestamp = '2022-01-15T16:52:28.988Z';
 
 //buildRoutes
 import { buildClientTree } from '@roxi/routify/runtime/buildRoutes';

diff --git a/public/index.html b/public/index.html
@@ -1,19 +1,18 @@
+
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta
-      name="description"
-      content="Enki Jewellery & Craft Gallery shop in Kings Heath, Birmingham, UK"
-    />
+  <meta charset='utf-8'>
+  <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <meta name="description" content="Enki Jewellery & Craft Gallery shop in Kings Heath, Birmingham, UK">
     <title>Enki</title>
-
-    <link rel="icon" type="image/png" href="/favicon.png" />
-    <link rel="stylesheet" href="/global.css" />
-    <link rel="stylesheet" href="/build/bundle-1642260969493.css" />
-
-    <script defer src="/build/bundle-1642260969493.js"></script>
+    
+    <link rel='icon' type='image/png' href='/favicon.png'>
+    <link rel='stylesheet' href='/global.css'>
+    <link rel='stylesheet' href='/build/bundle-1642260969493.css'>
+    
+    <script defer src='/build/bundle-1642260969493.js'></script>
   </head>
-  <body></body>
-</html>
+  <body>
+  </body>
+</html>
diff --git a/src/components/Basket/Basket.svelte b/src/components/Basket/Basket.svelte
@@ -138,7 +138,6 @@
     justify-content: space-between;
     align-items: center;
     height: 100px;
-    margin: 10%;
   }
 
   .mobile-quantity-and-price {

diff --git a/src/components/Hamburger/Hamburger.svelte b/src/components/Hamburger/Hamburger.svelte
@@ -2,6 +2,11 @@
   import { goto } from '@roxi/routify';
 
   let toggleOpen = false;
+
+  const toggleAndGo = (dest: string) => {
+    toggleOpen = !toggleOpen;
+    $goto(dest);
+  };
 </script>
 
 <div
@@ -17,10 +22,10 @@
 
 {#if toggleOpen}
   <div class="menu">
-    <button on:click={$goto('/shop')}> shop </button>
-    <button on:click={$goto('/repairs')}> repairs </button>
-    <button on:click={$goto('/classes')}> classes </button>
-    <button on:click={$goto('/about')}> about </button>
+    <button on:click={() => toggleAndGo('/shop')}> shop </button>
+    <button on:click={() => toggleAndGo('/repairs')}> repairs </button>
+    <button on:click={() => toggleAndGo('/classes')}> classes </button>
+    <button on:click={() => toggleAndGo('/about')}> about </button>
   </div>
 {/if}
 
@@ -50,6 +55,7 @@
   button:focus {
     border-bottom: 3px solid orange;
   }
+
   #nav-icon3 {
     position: absolute;
     width: 40px;

diff --git a/src/components/Header/Header.svelte b/src/components/Header/Header.svelte
@@ -2,6 +2,7 @@
   import { goto } from '@roxi/routify';
   import { tweened } from 'svelte/motion';
   import { fade } from 'svelte/transition';
+  import { basket as basketStore } from '@/stores/basket';
   import Basket from '@/components/Basket/Basket.svelte';
   import SearchProducts from '@/components/SearchProducts/SearchProducts.svelte';
   import Hamburger from '@/components/Hamburger/Hamburger.svelte';
@@ -50,6 +51,7 @@
 
   $: outerWidth = 0;
   $: offset = outerWidth < 960 ? lessThan960 : moreThan960;
+  $: isMobile = outerWidth < 960;
 </script>
 
 <svelte:window bind:outerWidth />
@@ -97,12 +99,49 @@
         <SearchProducts width={growSearchWidth($width)} />
       </div>
     {/if}
-    <img
-      class="basket-icon"
-      src="https://enki.imgix.net/basket_icon.svg"
-      alt="basket"
-      on:click={showBasketItems}
-    />
+    <div
+      class={isMobile
+        ? 'mobile-basket-icon-container'
+        : 'basket-icon-container'}
+    >
+      <img
+        class="basket-icon"
+        src="https://enki.imgix.net/basket_icon.svg"
+        alt="basket"
+        on:click={() => (isMobile ? showBasketItems() : $goto('/shop/basket'))}
+      />
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        xml:space="preserve"
+        style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+        viewBox="0 0 100 100"
+        width={isMobile ? '15' : '25'}
+        height={isMobile ? '15' : '25'}
+        class="num-basket-items"
+        on:click={() => (isMobile ? showBasketItems() : $goto('/shop/basket'))}
+      >
+        <g id="UrTavla">
+          <circle
+            style="fill:#fa6603;stroke:#fa6603;stroke-width:1.6871;stroke-miterlimit:10;"
+            cx="50"
+            cy="50"
+            r="50"
+          />
+          <text
+            x="47.5%"
+            y="40%"
+            text-anchor="middle"
+            stroke="white"
+            fill="white"
+            stroke-width="2.5px"
+            dy=".45em"
+            font-size="5em"
+            >{$basketStore.reduce((acc, curr) => acc + curr.quantity, 0)}</text
+          >
+        </g>
+      </svg>
+    </div>
   </div>
 </div>
 {#if showBasket && outerWidth < 960}
@@ -135,6 +174,25 @@
     align-self: flex-end;
   }
 
+  .mobile-basket-icon-container {
+    display: flex;
+    align-self: center;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .num-basket-items {
+    position: absolute;
+    cursor: pointer;
+    transform: translate(-10%, 10%);
+  }
+
+  @media (min-width: 960px) {
+    .num-basket-items {
+      transform: translate(-120%, 100%);
+    }
+  }
+
   img:hover {
     cursor: pointer;
   }