🔥 Finish Cart implementation
- Use Select component in CartItem to change quantity - Visual update when removing or changing an item quantity - API: Remove Cart item action - API: Handle Cart item adding and updating (quantity)
This commit is contained in:
@@ -1,17 +1,21 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
// Components
|
||||
import ButtonCircle from '$components/atoms/ButtonCircle.svelte'
|
||||
import Select from '$components/molecules/Select.svelte'
|
||||
|
||||
export let item: any
|
||||
export let index: number
|
||||
|
||||
// console.log(item)
|
||||
const dispatch = createEventDispatcher()
|
||||
const quantityLimit = 5
|
||||
|
||||
|
||||
// When changing item quantity
|
||||
const updateQuantity = ({ target: { value }}: any) => {
|
||||
const updateQuantity = ({ detail }: any) => {
|
||||
dispatch('updatedQuantity', {
|
||||
id: item.id,
|
||||
quantity: Number(value)
|
||||
quantity: Number(detail)
|
||||
})
|
||||
}
|
||||
|
||||
@@ -21,29 +25,39 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<aside class="cart-item shadow-small">
|
||||
<div class="cart-item shadow-small">
|
||||
<div class="cart-item__left">
|
||||
<img
|
||||
src={item.product.images[0].file.url}
|
||||
width={200}
|
||||
height={300}
|
||||
alt={item.product.name}
|
||||
>
|
||||
<img src={item.product.images[0].file.url} width={200} height={300} alt={item.product.name}>
|
||||
</div>
|
||||
<div class="cart-item__right">
|
||||
<h3>Poster</h3>
|
||||
<p>{item.product.name} – {item.price_total}€</p>
|
||||
|
||||
{#if item && item.product}
|
||||
<div class="select">
|
||||
<select on:change={updateQuantity}>
|
||||
{#each Array(5) as _, index}
|
||||
<option value={index + 1} selected={item.quantity - 1 === index}>{index + 1}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
{#if item && item.quantity}
|
||||
<Select
|
||||
name="sort" id="filter_sort"
|
||||
options={[...Array(item.quantity <= quantityLimit ? quantityLimit : item.quantity)].map((_, index) => {
|
||||
return {
|
||||
value: `${index + 1}`,
|
||||
name: `${index + 1}`,
|
||||
default: index === 0,
|
||||
selected: index + 1 === item.quantity,
|
||||
}
|
||||
})}
|
||||
on:change={updateQuantity}
|
||||
value={String(item.quantity)}
|
||||
>
|
||||
<span>Quantity:</span>
|
||||
</Select>
|
||||
{/if}
|
||||
|
||||
<button on:click={removeItem}>Remove</button>
|
||||
<ButtonCircle class="remove"
|
||||
size="tiny" color="gray"
|
||||
on:click={removeItem}
|
||||
>
|
||||
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.81 1.104a.647.647 0 1 0-.914-.915L4 3.085 1.104.19a.647.647 0 1 0-.915.915L3.085 4 .19 6.896a.647.647 0 1 0 .915.915L4 4.915 6.896 7.81a.647.647 0 1 0 .915-.915L4.915 4 7.81 1.104Z" fill="#666"/>
|
||||
</svg>
|
||||
</ButtonCircle>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
@@ -2,7 +2,7 @@
|
||||
import { onMount } from 'svelte'
|
||||
import { fade, fly } from 'svelte/transition'
|
||||
import { quartOut } from 'svelte/easing'
|
||||
import { cartOpen, cartId, cartData, cartAmount } from '$utils/store'
|
||||
import { cartOpen, cartId, cartData, cartAmount, cartIsUpdating } from '$utils/store'
|
||||
// Components
|
||||
import Button from '$components/atoms/Button.svelte'
|
||||
import CartItem from '$components/molecules/CartItem.svelte'
|
||||
@@ -25,7 +25,7 @@
|
||||
const cart = await existantCart.json()
|
||||
$cartId = cart.id
|
||||
$cartData = cart
|
||||
console.log('fetched existant cart:', $cartId, $cartData)
|
||||
// console.log('Fetched existant cart:', $cartId, $cartData)
|
||||
}
|
||||
}
|
||||
// Cart doesn't exists
|
||||
@@ -41,7 +41,7 @@
|
||||
const cart = await newCart.json()
|
||||
$cartId = cart.id
|
||||
$cartData = cart
|
||||
console.log('new cart:', localStorage.getItem('cartId'))
|
||||
// console.log('Created new cart:', localStorage.getItem('cartId'))
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -54,43 +54,53 @@
|
||||
|
||||
// Item quantity changed
|
||||
const changedQuantity = async ({ detail: { id, quantity } }) => {
|
||||
// Update item in cart
|
||||
// const updatedCart = await swell.cart.updateItem(id, {
|
||||
// quantity
|
||||
// })
|
||||
// if (updatedCart) {
|
||||
// $cartData = updatedCart
|
||||
// }
|
||||
// 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: quantity
|
||||
quantity,
|
||||
})
|
||||
})
|
||||
|
||||
if (updatedCart.ok) {
|
||||
// const cart = await updatedCart.json()
|
||||
// $cartData = cart
|
||||
// console.log('updated cart:', $cartData.items)
|
||||
const cart = await updatedCart.json()
|
||||
$cartData = cart
|
||||
// Cart is updated
|
||||
$cartIsUpdating = false
|
||||
}
|
||||
}
|
||||
|
||||
// Item removed
|
||||
const removedItem = async ({ detail: id }) => {
|
||||
// Cart is now updating
|
||||
$cartIsUpdating = true
|
||||
|
||||
// Remove item from cart
|
||||
// const removedItem = await swell.cart.removeItem(id)
|
||||
// if (removedItem) {
|
||||
// $cartData = removedItem
|
||||
// }
|
||||
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
|
||||
// Cart is updated
|
||||
$cartIsUpdating = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if $cartOpen}
|
||||
<aside class="cart shadow-box-dark"
|
||||
class:is-updating={$cartIsUpdating}
|
||||
transition:fly={{ x: 48, duration: 600, easing: quartOut }}
|
||||
>
|
||||
<header class="cart__heading">
|
||||
@@ -100,20 +110,28 @@
|
||||
|
||||
<div class="cart__content">
|
||||
{#if $cartAmount > 0}
|
||||
{#each $cartData.items as item}
|
||||
<CartItem {item}
|
||||
{#each $cartData.items as item, index}
|
||||
<CartItem {item} {index}
|
||||
on:updatedQuantity={changedQuantity}
|
||||
on:removed={removedItem}
|
||||
/>
|
||||
{/each}
|
||||
{:else}
|
||||
<div class="cart__message shadow-small">
|
||||
<div class="cart__empty shadow-small">
|
||||
<div class="icon">
|
||||
|
||||
<svg width="23" height="29" viewBox="0 0 23 29" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.95 5.83a4.94 4.94 0 0 1 1.23-3.42 3.8 3.8 0 0 1 2.8-1.2c2.07.02 4 1.67 4.04 4.62h4.13c.6 0 1.08.52 1.03 1.11l-.02.32 2.68 18.19a.94.94 0 0 1-1.26 1.02l-1.02-.38a.09.09 0 0 0-.08.01l-1.84 1.2c-.08.5-.5.88-1.02.88H1.78c-.6 0-1.07-.51-1.03-1.1l1.53-20.3c.04-.53.5-.95 1.03-.95h3.64Zm1.2 0c.01-1.2.4-2.05.9-2.6a2.6 2.6 0 0 1 1.93-.81c1.34 0 2.8 1.07 2.84 3.41H8.15Zm6.87 1.2h3.95l-.02.27-1.48 19.68H1.97l1.5-19.95h3.48v3.41a1.38 1.38 0 1 0 1.2 0v-3.4h5.67v3.4a1.38 1.38 0 1 0 1.2 0v-3.4Zm3.74 18.77.99-13.1 1.84 12.5-.62-.23c-.38-.14-.81-.1-1.15.13l-1.06.7ZM7.87 11.68a.33.33 0 1 1-.65 0 .33.33 0 0 1 .65 0Zm6.55.33a.33.33 0 1 0 0-.66.33.33 0 0 0 0 .66Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<p>Your cart is empty</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if !$cartData || $cartIsUpdating}
|
||||
<div class="cart__update">
|
||||
<p>Updating…</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<footer class="cart__total">
|
||||
|
||||
Reference in New Issue
Block a user