From 378a64f2b028288548e533fc810bbd568b0415ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Mon, 8 Nov 2021 13:00:31 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20product=20to=20cart=20from=20?=
 =?UTF-8?q?anywhere?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Make a global function that adds a product to the current cart
---
 src/components/layouts/PosterLayout.svelte | 33 ++--------------------
 src/components/molecules/Poster.svelte     |  5 ++++
 src/utils/functions/shop.ts                |  9 +++---
 3 files changed, 13 insertions(+), 34 deletions(-)

diff --git a/src/components/layouts/PosterLayout.svelte b/src/components/layouts/PosterLayout.svelte
index 5a2a944..6108c43 100644
--- a/src/components/layouts/PosterLayout.svelte
+++ b/src/components/layouts/PosterLayout.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-    import { capitalizeFirstLetter } from '$utils/functions'
     import { cartId, cartData } from '$utils/stores/shop'
-    import { addNotification } from '$utils/notifications'
+    import { addToCart } from '$utils/functions/shop'
+    import { capitalizeFirstLetter } from '$utils/functions'
     // Components
     import Button from '$components/atoms/Button.svelte'
     import Image from '$components/atoms/Image.svelte'
@@ -55,33 +55,6 @@
             ratio: 0.68,
         },
     ]
-
-
-    /**
-     * Handling add to cart
-     */
-    const addToCart = async () => {
-        const updatedCart = await fetch('/api/swell', {
-            method: 'POST',
-            body: JSON.stringify({
-                action: 'addToCart',
-                cartId: $cartId,
-                productId: product.product_id,
-                quantity: 1,
-            })
-        })
-        if (updatedCart.ok) {
-            const newCart = await updatedCart.json()
-            $cartData = newCart
-
-            // Show notification
-            addNotification({
-                title: 'Added to cart',
-                name: `${productShop.name} - x1`,
-                image: productShop.images[0].file.url,
-            })
-        }
-    }
 </script>
 
 <section class="poster-layout grid">
@@ -98,7 +71,7 @@
             <Button
                 text="Add to cart"
                 color="pinklight"
-                on:click={addToCart}
+                on:click={() => addToCart($cartId, shopProduct)}
             />
         </div>
 
diff --git a/src/components/molecules/Poster.svelte b/src/components/molecules/Poster.svelte
index 32b31eb..7ca6937 100644
--- a/src/components/molecules/Poster.svelte
+++ b/src/components/molecules/Poster.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
+    import { cartId } from '$utils/stores/shop'
+    import { addToCart } from '$utils/functions/shop'
+    // Components
     import Button from '$components/atoms/Button.svelte'
     import Image from '$components/atoms/Image.svelte'
 
+    export let product: any
     export let location: { name: string, slug: string }
     export let image: any
 </script>
@@ -33,6 +37,7 @@
             text="Add to cart"
             color="pinklight"
             size="xsmall"
+            on:click={() => addToCart($cartId, product)}
         />
     </div>
 </div>
\ No newline at end of file
diff --git a/src/utils/functions/shop.ts b/src/utils/functions/shop.ts
index 29bfe70..b4e375f 100644
--- a/src/utils/functions/shop.ts
+++ b/src/utils/functions/shop.ts
@@ -1,17 +1,18 @@
 import { addNotification } from '$utils/functions/notifications'
-import type { Writable } from 'svelte/store'
+import { cartData } from '$utils/stores/shop'
+
 
 
 /**
  * Add a product to a cart
  */
-export const addToCart = async (cart: string, cartData: Writable<any>, product: any, quantity: number = 1) => {
-    if (cart && cart !== 'null') {
+export const addToCart = async (cartId: string, product: any, quantity: number = 1) => {
+    if (cartId && cartId !== 'null') {
         const updatedCart = await fetch('/api/swell', {
             method: 'POST',
             body: JSON.stringify({
                 action: 'addToCart',
-                cartId: cart,
+                cartId,
                 productId: product.id,
                 quantity,
             })