🚧 Switch to swell-js to handle Shop cart

swell-node was relying too much on Node packages like crypto or events to be used with Cloudflare Pages or Vercel Edge Functions

package.json

@@ -44,7 +44,7 @@
     "svelte": "^3.50.1",
     "svelte-check": "^2.9.0",
     "svelte-preprocess": "^4.10.7",
-    "swell-node": "^4.0.10",
+    "swell-js": "^3.17.6",
     "tslib": "^2.4.0",
     "typescript": "^4.8.3",
     "vite": "^3.1.2"

pnpm-lock.yaml

@@ -27,7 +27,7 @@ specifiers:
   svelte: ^3.50.1
   svelte-check: ^2.9.0
   svelte-preprocess: ^4.10.7
-  swell-node: ^4.0.10
+  swell-js: ^3.17.6
   tslib: ^2.4.0
   tweakpane: ^3.1.0
   typescript: ^4.8.3
@@ -63,7 +63,7 @@ devDependencies:
   svelte: 3.50.1
   svelte-check: 2.9.0_shdnsuo55vjluqozcjtxyryg5e
   svelte-preprocess: 4.10.7_52dhhvjbzvlifk77xwmrmntvea
-  swell-node: 4.0.10
+  swell-js: 3.17.6
   tslib: 2.4.0
   typescript: 4.8.3
   vite: 3.1.2_sass@1.54.9
@@ -836,6 +836,13 @@ packages:
     resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
     dev: true
 
+  /call-bind/1.0.2:
+    resolution: {integrity: sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==}
+    dependencies:
+      function-bind: 1.1.1
+      get-intrinsic: 1.1.3
+    dev: true
+
   /callsites/3.1.0:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
@@ -1669,6 +1676,14 @@ packages:
       wide-align: 1.1.5
     dev: true
 
+  /get-intrinsic/1.1.3:
+    resolution: {integrity: sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==}
+    dependencies:
+      function-bind: 1.1.1
+      has: 1.0.3
+      has-symbols: 1.0.3
+    dev: true
+
   /glob-parent/5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -1734,6 +1749,11 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /has-symbols/1.0.3:
+    resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
   /has-unicode/2.0.1:
     resolution: {integrity: sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==}
     dev: true
@@ -1831,6 +1851,15 @@ packages:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
     dev: true
 
+  /isomorphic-fetch/3.0.0:
+    resolution: {integrity: sha512-qvUtwJ3j6qwsF3jLxkZ72qCgjMysPzDfeV240JHiGZsANBYd+EEuu35v7dfrJ9Up0Ak07D7GGSkGhCHTqg/5wA==}
+    dependencies:
+      node-fetch: 2.6.7
+      whatwg-fetch: 3.6.2
+    transitivePeerDependencies:
+      - encoding
+    dev: true
+
   /js-sdsl/4.1.4:
     resolution: {integrity: sha512-Y2/yD55y5jteOAmY50JbUZYwk3CP3wnLPEZnlR1w9oKhITrBEtAxwuWKebFf8hMrPMgbYwFoWK/lH2sBkErELw==}
     dev: true
@@ -1875,6 +1904,10 @@ packages:
       p-locate: 5.0.0
     dev: true
 
+  /lodash.camelcase/4.3.0:
+    resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
+    dev: true
+
   /lodash.memoize/4.1.2:
     resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==}
     dev: true
@@ -1883,10 +1916,18 @@ packages:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
     dev: true
 
+  /lodash.snakecase/4.1.1:
+    resolution: {integrity: sha512-QZ1d4xoBHYUeuouhEq3lk3Uq7ldgyFXGBhg04+oRLnIz8o9T65Eh+8YdroUwn846zchkA9yDsDl5CVVaV2nqYw==}
+    dev: true
+
   /lodash.uniq/4.5.0:
     resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==}
     dev: true
 
+  /lodash/4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+    dev: true
+
   /lru-cache/6.0.0:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
@@ -2093,6 +2134,17 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /object-inspect/1.12.2:
+    resolution: {integrity: sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==}
+    dev: true
+
+  /object-keys-normalizer/1.0.1:
+    resolution: {integrity: sha512-bQk7HLUK9UxmOlniNcwaESebtOM7i8eJhTnqDQCwkukVA72XRnO0RIvs+a5EIJsH8tWEK9m96NryugxdXQ6AXg==}
+    dependencies:
+      lodash.camelcase: 4.3.0
+      lodash.snakecase: 4.1.1
+    dev: true
+
   /ogl/0.0.97:
     resolution: {integrity: sha512-8VGNwb+BnVgg80uF2MDJGX+rLja8DPvmSsW1a3KCZO4pQF8sszRCgQVQmUA2EnoIYXtMUEztChkB0fuoFcWLxw==}
     dev: false
@@ -2852,6 +2904,13 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /qs/6.10.3:
+    resolution: {integrity: sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==}
+    engines: {node: '>=0.6'}
+    dependencies:
+      side-channel: 1.0.4
+    dev: true
+
   /queue-microtask/1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
     dev: true
@@ -3006,6 +3065,14 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /side-channel/1.0.4:
+    resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}
+    dependencies:
+      call-bind: 1.0.2
+      get-intrinsic: 1.1.3
+      object-inspect: 1.12.2
+    dev: true
+
   /signal-exit/3.0.7:
     resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
     dev: true
@@ -3224,9 +3291,17 @@ packages:
       stable: 0.1.8
     dev: true
 
-  /swell-node/4.0.10:
+  /swell-js/3.17.6:
-    resolution: {integrity: sha512-b+7jRxN/RewaSapi5Q5eKclLfgrg/LJLlHD1zm5jMKiht6/dM4O2ny/J4Sg9CI+J72t/PWiwtkLI4SGm/Npsig==}
+    resolution: {integrity: sha512-4Fo8LWOQzn5QP+qxhpoHo8gykxdQ8noTRxNAARj4nO2wnQhmxFLjsGTjkAFxKo1orId8zM79h5sj3Cx5Xp/6qw==}
-    engines: {node: '>= v12.21.0'}
+    engines: {node: 14.19.1, npm: '>=8'}
+    dependencies:
+      deepmerge: 4.2.2
+      isomorphic-fetch: 3.0.0
+      lodash: 4.17.21
+      object-keys-normalizer: 1.0.1
+      qs: 6.10.3
+    transitivePeerDependencies:
+      - encoding
     dev: true
 
   /tar/6.1.11:
@@ -3380,6 +3455,10 @@ packages:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
     dev: true
 
+  /whatwg-fetch/3.6.2:
+    resolution: {integrity: sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==}
+    dev: true
+
   /whatwg-url/5.0.0:
     resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
     dependencies:

src/components/layouts/PosterLayout.svelte

@@ -3,7 +3,6 @@
 </style>
 
 <script lang="ts">
-    import { cartId } from '$utils/stores/shop'
     import { addToCart } from '$utils/functions/shop'
     import { capitalizeFirstLetter } from '$utils/functions'
     // Components
@@ -83,7 +82,7 @@
                 text={hasStock ? 'Add to cart' : 'Sold out'}
                 color="pinklight"
                 disabled={!hasStock}
-                on:click={() => addToCart($cartId, shopProduct)}
+                on:click={() => addToCart(shopProduct)}
             />
         </div>
 

src/components/molecules/Poster.svelte

@@ -3,7 +3,6 @@
 </style>
 
 <script lang="ts">
-    import { cartId } from '$utils/stores/shop'
     import { addToCart } from '$utils/functions/shop'
     import { smoothScroll } from '$utils/functions'
     // Components
@@ -43,7 +42,7 @@
             size="xsmall"
             text="Add to cart"
             color="pink"
-            on:click={() => addToCart($cartId, product)}
+            on:click={() => addToCart(product)}
         />
     </div>
 </div>

src/components/organisms/Cart.svelte

@@ -6,7 +6,8 @@
     import { onMount } from 'svelte'
     import { fade, fly } from 'svelte/transition'
     import { quartOut } from 'svelte/easing'
-    import { cartOpen, cartId, cartData, cartAmount, cartIsUpdating } from '$utils/stores/shop'
+    import { cartOpen, cartData, cartAmount, cartIsUpdating } from '$utils/stores/shop'
+    import { initSwell, getCart, updateCartItem, removeCartItem } from '$utils/functions/shop'
     // Components
     import Button from '$components/atoms/Button.svelte'
     import Icon from '$components/atoms/Icon.svelte'
@@ -14,62 +15,6 @@
     import ShopLocationSwitcher from '$components/molecules/ShopLocationSwitcher.svelte'
 
 
-    onMount(async () => {
-        // Cart already exists
-        if ($cartId && $cartId !== 'null') {
-            // Fetch stored cart
-            const existantCart = await fetch('/api/swell', {
-                method: 'POST',
-                body: JSON.stringify({
-                    action: 'fetchCart',
-                    cartId: $cartId
-                })
-            })
-            if (existantCart.ok) {
-                const cart = await existantCart.json()
-
-                // Cart is active / has not been ordered
-                if (cart.active || !cart.order_id) {
-                    // Keep current cart
-                    $cartId = cart.id
-                    $cartData = cart
-                    return
-                }
-
-                // Cart is inactive / has been ordered
-                const newCart = await fetch('/api/swell', {
-                    method: 'POST',
-                    body: JSON.stringify({
-                        action: 'createCart'
-                    })
-                })
-                if (newCart.ok) {
-                    const cart = await newCart.json()
-                    // Save new cart
-                    $cartId = cart.id
-                    $cartData = cart
-                }
-            }
-        }
-        // Cart doesn't exists
-        else {
-            // Create a new cart and store it
-            const newCart = await fetch('/api/swell', {
-                method: 'POST',
-                body: JSON.stringify({
-                    action: 'createCart'
-                })
-            })
-            if (newCart.ok) {
-                const cart = await newCart.json()
-                $cartId = cart.id
-                $cartData = cart
-                // console.log('Created new cart:', localStorage.getItem('cartId'))
-            }
-        }
-    })
-
-
     // Closing the cart
     const handleCloseCart = () => {
         $cartOpen = false
@@ -80,19 +25,11 @@
         // Cart is now updating
         $cartIsUpdating = true
 
-        // Get updated cart
+        // Update cart item
-        const updatedCart = await fetch('/api/swell', {
+        const updatedCart = await updateCartItem(id, quantity)
-            method: 'POST',
+        if (updatedCart) {
-            body: JSON.stringify({
+            // Store new cart data
-                action: 'updateCartItem',
+            $cartData = updatedCart
-                cartId: $cartId,
-                productId: id,
-                quantity,
-            })
-        })
-        if (updatedCart.ok) {
-            const cart = await updatedCart.json()
-            $cartData = cart
             // Cart is updated
             $cartIsUpdating = false
         }
@@ -104,28 +41,31 @@
         $cartIsUpdating = true
 
         // Remove item from cart
-        const updatedCart = await fetch('/api/swell', {
+        const updatedCart = await removeCartItem(id)
-            method: 'POST',
+        if (updatedCart) {
-            body: JSON.stringify({
+            // Store new cart data
-                action: 'removeCartItem',
+            $cartData = updatedCart
-                cartId: $cartId,
-                productId: id,
-            })
-        })
-        if (updatedCart.ok) {
-            const cart = await updatedCart.json()
-            $cartData = cart
             // Cart is updated
             $cartIsUpdating = false
         }
     }
+
+
+    onMount(async () => {
+        // Init Swell
+        initSwell()
+
+        // Fetch cart
+        const cart = await getCart()
+        if (cart) {
+            // Store cart data
+            $cartData = cart
+        }
+    })
 </script>
 
 {#if $cartOpen}
-    <div class="cart-switcher"
+    <div class="cart-switcher" transition:fly={{ y: -24, duration: 1000, easing: quartOut }}>
-        in:fly={{ y: -24, duration: 1000, easing: quartOut }}
-        out:fly={{ y: -24, duration: 1000, easing: quartOut }}
-    >
         <ShopLocationSwitcher isOver={true} />
     </div>
 
@@ -155,10 +95,10 @@
                 </div>
             {/if}
 
-            {#if !$cartData || $cartIsUpdating}
+            {#if (!$cartData && $cartData !== 'null') || $cartIsUpdating}
                 <div class="cart__update"
-                    in:fly={{ y: -4, duration: 600, easing: quartOut }}
+                    in:fly={{ y: 8, duration: 600, easing: quartOut }}
-                    out:fly={{ y: 4, duration: 600, easing: quartOut }}
+                    out:fly={{ y: -8, duration: 600, easing: quartOut }}
                 >
                     <p>Updating…</p>
                 </div>

src/routes/api/swell/+server.ts

@@ -1,52 +0,0 @@
-import { error } from '@sveltejs/kit'
-import type { RequestHandler } from './$types'
-import * as swell from '$utils/functions/swell'
-
-
-export const POST: RequestHandler = async ({ request }) => {
-    try {
-        const body = await request.json()
-        const { action, cartId, productId } = body
-        let result = {}
-
-        if (body) {
-            switch (action) {
-                case 'getProducts': {
-                    result = await swell.getProducts(body.category)
-                    break
-                }
-                case 'getProduct': {
-                    result = await swell.getProduct(productId)
-                    break
-                }
-                case 'createCart': {
-                    result = await swell.createCart()
-                    break
-                }
-                case 'fetchCart': {
-                    result = await swell.fetchCart(cartId)
-                    break
-                }
-                case 'addToCart': {
-                    result = await swell.addToCart(cartId, productId, body.quantity)
-                    break
-                }
-                case 'updateCartItem': {
-                    result = await swell.updateCartItem(cartId, productId, body.quantity)
-                    break
-                }
-                case 'removeCartItem': {
-                    result = await swell.removeCartItem(cartId, productId)
-                    break
-                }
-                default: break
-            }
-
-            return new Response(JSON.stringify({
-                ...result
-            }))
-        }
-    } catch (err) {
-        throw error(500, err.message || `Can't fetch query`)
-    }
-}

src/routes/shop/+layout.server.ts

@@ -1,7 +1,7 @@
 import { error } from '@sveltejs/kit'
 import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
-import { getProducts } from '$utils/functions/swell'
+import { getProducts } from '$utils/functions/shop'
 
 export const load: PageServerLoad = async () => {
     try {

src/routes/shop/+page.server.ts

@@ -1,7 +1,7 @@
 import { error } from '@sveltejs/kit'
 import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
-import { getProduct } from '$utils/functions/swell'
+import { getProduct } from '$utils/functions/shop'
 import { getRandomItem } from '$utils/functions'
 
 export const load: PageServerLoad = async ({}) => {
@@ -36,7 +36,7 @@ export const load: PageServerLoad = async ({}) => {
         }`)
 
         if (data) {
-            const randomPoster = getRandomItem(data.data.posters)
+            const randomPoster: any = getRandomItem(data.data.posters)
 
             // Fetch Swell API for product
             const shopProduct = await getProduct(randomPoster.product_id)

src/routes/shop/[type]-[name]/+page.server.ts

@@ -1,7 +1,7 @@
 import { error } from '@sveltejs/kit'
 import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
-import { getProduct } from '$utils/functions/swell'
+import { getProduct } from '$utils/functions/shop'
 
 export const load: PageServerLoad = async ({ params }) => {
     try {

src/utils/functions/shop.ts

@@ -1,34 +1,99 @@
+import swell from 'swell-js'
 import { addNotification } from '$utils/functions/notifications'
 import { cartData } from '$utils/stores/shop'
+import { PUBLIC_SWELL_STORE_ID, PUBLIC_SWELL_API_PUBLIC_TOKEN } from '$env/static/public'
 
 
+// Init Swell
+export const initSwell = () => {
+    swell.init(PUBLIC_SWELL_STORE_ID, PUBLIC_SWELL_API_PUBLIC_TOKEN)
+}
+
+
+/**
+ * Get current cart
+ */
+export const getCart = async () => {
+    const cart = await swell.cart.get()
+
+    if (cart) {
+        return cart
+    }
+}
+
 /**
  * Add a product to a cart
  */
-export const addToCart = async (cartId: string, product: any, quantity: number = 1) => {
+export const addToCart = async (product: any, quantity: number = 1) => {
-    if (cartId && cartId !== 'null') {
+    const updatedCart = await swell.cart.addItem({
-        const updatedCart = await fetch('/api/swell', {
+        product_id: product.id,
-            method: 'POST',
+        quantity,
-            body: JSON.stringify({
+    })
-                action: 'addToCart',
+
-                cartId,
+    if (updatedCart) {
-                productId: product.id,
+        // Update cart data
-                quantity,
+        cartData.set(updatedCart)
-            })
+
+        // Show notification
+        addNotification({
+            title: 'Added to cart',
+            name: `${product.name} - x1`,
+            image: product.images[0].file.url,
         })
+    }
+}
 
-        if (updatedCart.ok) {
+/**
-            const newCart = await updatedCart.json()
+ * Update Cart item
-            cartData.set(newCart)
+ */
+export const updateCartItem = async (productId: string, quantity: number) => {
+    const updatedCart = await swell.cart.updateItem(productId, {
+        quantity,
+    })
 
-            // Show notification
+    if (updatedCart) {
-            addNotification({
+        return updatedCart
-                title: 'Added to cart',
+    }
-                name: `${product.name} - x1`,
+}
-                image: product.images[0].file.url,
+
-            })
+/**
-        }
+ * Remove Cart item
-    } else {
+ */
-        console.log('No active cart')
+export const removeCartItem = async (productId: string) => {
+    const updatedCart = await swell.cart.removeItem(productId)
+
+    if (updatedCart) {
+        return updatedCart
+    }
+}
+
+
+
+/**
+ * Fetch products
+ */
+export const getProducts = async (category?: string, limit: number = 25, page: number = 1) => {
+    const products = await swell.products.list({
+        where: {
+            active: true,
+        },
+        category,
+        limit,
+        page
+    })
+
+    if (products) {
+        return products
+    }
+}
+
+/**
+ * Retrieve a product
+ */
+export const getProduct = async (id: string) => {
+    const product = await swell.products.get(id)
+
+    if (product) {
+        return product
     }
 }

src/utils/functions/swell.ts

@@ -1,157 +0,0 @@
-import swell from 'swell-node'
-import { SWELL_API_TOKEN, SWELL_STORE_ID } from '$env/static/private'
-
-// Init Swell
-swell.init(SWELL_STORE_ID, SWELL_API_TOKEN)
-
-
-
-/**
- * Fetch products
- */
-export const getProducts = async (category?: string, limit: number = 25, page: number = 1) => {
-    const products = await swell.get('/products', {
-        where: {
-            active: true,
-        },
-        category,
-        limit,
-        page
-    })
-
-    if (products) {
-        return products
-    }
-}
-
-
-/**
- * Retrieve a product
- */
-export const getProduct = async (id: string) => {
-    const product = await swell.get('/products/{id}', {
-        id
-    })
-
-    if (product) {
-        return product
-    }
-}
-
-
-/**
- * Create a cart
- */
-export const createCart = async () => {
-    const cart = await swell.post('/carts')
-
-    if (cart) {
-        return cart
-    }
-}
-
-
-/**
- * Retrieve cart
- */
-export const fetchCart = async (id: string) => {
-    const cart = await swell.get('/carts/{id}', {
-        id,
-        expand: [
-            'items.product',
-            'items.variant',
-        ]
-    })
-
-    if (cart) {
-        return cart
-    }
-}
-
-
-/**
- * Add product to cart
- */
-export const addToCart = async (cartId: string, productId: string, quantity: number) => {
-    // Fetch current cart data
-    const currentCart = await fetchCart(cartId)
-
-    // Updated cart with new items
-    const updatedCart = await swell.put('/carts/{id}', {
-        id: cartId,
-        items: [
-            ...currentCart.items || [],
-            {
-                product_id: productId,
-                quantity,
-            }
-        ],
-    })
-    if (updatedCart) {
-        // Fetch latest cart with updates
-        const cart = await fetchCart(cartId)
-        if (cart) {
-            return cart
-        }
-    }
-}
-
-
-/**
- * Update cart item
- */
-export const updateCartItem = async (cartId: string, productId: string, quantity: number) => {
-    // Fetch current cart data
-    const currentCart = await fetchCart(cartId)
-
-    // Updated items with replacing new item quantity
-    const updatedCartItems = currentCart.items.map((item: any) => {
-        // Replace item quantity with selected one
-        if (item.id === productId) {
-            item.quantity = quantity
-        }
-        return item
-    })
-
-    const updatedCart = await swell.put('/carts/{id}', {
-        id: cartId,
-        $set: {
-            items: updatedCartItems,
-        }
-    })
-    if (updatedCart) {
-        // Fetch latest cart with updates
-        const cart = await fetchCart(cartId)
-        if (cart) {
-            return cart
-        }
-    }
-}
-
-
-/**
- * Remove cart item
- */
-export const removeCartItem = async (cartId: string, productId: string) => {
-    // Fetch current cart data
-    const currentCart = await fetchCart(cartId)
-
-    // Updated items and remove selected item
-    const updatedCartItems = [...currentCart.items.filter((item: any) => {
-        return item.id !== productId
-    })]
-
-    const updatedCart = await swell.put('/carts/{id}', {
-        id: cartId,
-        $set: {
-            items: updatedCartItems,
-        }
-    })
-    if (updatedCart) {
-        // Fetch latest cart with updates
-        const cart = await fetchCart(cartId)
-        if (cart) {
-            return cart
-        }
-    }
-}

src/utils/stores/shop.ts

@@ -6,6 +6,9 @@ import { writable, derived, type Writable, type Readable } from 'svelte/store'
  */
 export const shopCurrentProductSlug: Writable<string> = writable(null)
 
+/** Notifications */
+export const cartNotifications: Writable<any[]> = writable([])
+
 
 /**
  * Cart
@@ -13,17 +16,6 @@ export const shopCurrentProductSlug: Writable<string> = writable(null)
 /** Cart open state */
 export const cartOpen: Writable<boolean> = writable(false)
 
-/** Cart open state */
-export const cartId: Writable<string> = writable(null)
-
-// Write to localStorage when changing cartId
-if (typeof localStorage !== 'undefined') {
-    const id = localStorage.getItem('cartId')
-    id && cartId.set(id ? id : null)
-
-    cartId.subscribe(value => localStorage.setItem('cartId', value))
-}
-
 /** Raw Cart data */
 export const cartData: Writable<any> = writable(null)
 
@@ -33,10 +25,4 @@ export const cartIsUpdating: Writable<boolean> = writable(false)
 /** Amount of products present in cart */
 export const cartAmount: Readable<number> = derived(cartData, ($cart) => {
     return $cart && $cart.item_quantity > 0 ? $cart.item_quantity : 0
-})
+})
-
-
-/**
- * Notifications
- */
-export const cartNotifications: Writable<any[]> = writable([])