✨ Add product to cart from anywhere

Make a global function that adds a product to the current cart

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>
 

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>

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) => {
+export const addToCart = async (cartId: string, product: any, quantity: number = 1) => {
-    if (cart && cart !== 'null') {
+    if (cartId && cartId !== 'null') {
         const updatedCart = await fetch('/api/swell', {
             method: 'POST',
             body: JSON.stringify({
                 action: 'addToCart',
-                cartId: cart,
+                cartId,
                 productId: product.id,
                 quantity,
             })