flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

🚧 Switch to swell-js to handle Shop cart

Browse Source 
swell-node was relying too much on Node packages like crypto or events to be used with Cloudflare Pages or Vercel Edge Functions
This commit is contained in:
Félix Péault
2022-09-18 12:11:44 +02:00
parent b3fdc5cea5
commit b66db25942
12 changed files with 210 additions and 351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
src/components/organisms/Cart.svelte
View File

@@ -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
const updatedCart = await fetch('/api/swell', {
method: 'POST',
body: JSON.stringify({
action: 'updateCartItem',
cartId: $cartId,
productId: id,
quantity,
})
})
if (updatedCart.ok) {
const cart = await updatedCart.json()
$cartData = cart
// Update cart item
const updatedCart = await updateCartItem(id, quantity)
if (updatedCart) {
// Store new cart data
$cartData = updatedCart
// Cart is updated
$cartIsUpdating = false
}
@@ -104,28 +41,31 @@
$cartIsUpdating = true
// Remove item from cart
const updatedCart = await fetch('/api/swell', {
method: 'POST',
body: JSON.stringify({
action: 'removeCartItem',
cartId: $cartId,
productId: id,
})
})
if (updatedCart.ok) {
const cart = await updatedCart.json()
$cartData = cart
const updatedCart = await removeCartItem(id)
if (updatedCart) {
// Store new cart data
$cartData = updatedCart
// 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"
in:fly={{ y: -24, duration: 1000, easing: quartOut }}
out:fly={{ y: -24, duration: 1000, easing: quartOut }}
>
<div class="cart-switcher" transition: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 }}
out:fly={{ y: 4, duration: 600, easing: quartOut }}
in:fly={{ y: 8, duration: 600, easing: quartOut }}
out:fly={{ y: -8, duration: 600, easing: quartOut }}
>
<p>Updating…</p>
</div>