✨ Show a notification when adding a product to Cart

src/components/layouts/PosterLayout.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
     import { capitalizeFirstLetter } from '$utils/functions'
+    import { cartId, cartData } from '$utils/store'
+    import { addNotification } from '$utils/notifications'
     // Components
     import Button from '$components/atoms/Button.svelte'
     import Image from '$components/atoms/Image.svelte'
     import Carousel from '$components/organisms/Carousel.svelte'
-import { cartData, cartId } from '$utils/store';
 
     export let product: any
     export let productShop: any
@@ -59,12 +60,7 @@ import { cartData, cartId } from '$utils/store';
      * Handling add to cart
      */
     const addToCart = async () => {
-        // const addedReturn = await swell.cart.addItem({
-        //     product_id: product.product_id,
-        //     quantity: 1,
-        // })
-
-        const addedReturn = await fetch('/api/swell', {
+        const updatedCart = await fetch('/api/swell', {
             method: 'POST',
             body: JSON.stringify({
                 action: 'addToCart',
@@ -73,11 +69,16 @@ import { cartData, cartId } from '$utils/store';
                 quantity: 1,
             })
         })
-
-        if (addedReturn.ok) {
-            const newCart = await addedReturn.json()
+        if (updatedCart.ok) {
+            const newCart = await updatedCart.json()
             $cartData = newCart
-            console.log('Show mini product added to cart')
+
+            // Show notification
+            addNotification({
+                title: 'Added to cart',
+                name: `${productShop.name} - x1`,
+                image: productShop.images[0].file.url,
+            })
         }
     }
 </script>

src/components/molecules/NotificationCart.svelte

@@ -1,19 +1,28 @@
 <script lang="ts">
-    import { getContext } from 'svelte'
-    // Components
-    import Button from '$components/atoms/Button.svelte'
-    import Image from '$components/atoms/Image.svelte'
+    import { fly } from 'svelte/transition'
+    import { quartOut } from 'svelte/easing'
+    import { cartOpen } from '$utils/store'
 
-    const { locations, shop } = getContext('global')
+    export let title: string
+    export let name: string
+    export let image: string
 
+
+    const closeNotification = () => {
+        // Open cart
+        $cartOpen = true
+    }
 </script>
 
-<aside class="notification-cart shadow-small">
+<div class="notification-cart shadow-small"
+    on:click={closeNotification}
+    transition:fly={{ y: 20, duration: 700, easing: quartOut }}
+>
     <div class="notification-cart__left">
-        <img src="/images/issue-1.jpg" width={58} height={88} alt="">
+        <img src={image} width={58} height={88} alt={title}>
     </div>
     <div class="notification-cart__right">
-        <h3>Added to cart</h3>
-        <p>Houses Of Melbourne</p>
+        <h3>{title}</h3>
+        <p>{name}</p>
     </div>
-</aside>
+</div>