From bd4008ac5c2a22c1d99239ba0691cfb8ef0e9aea Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Wed, 14 Dec 2022 17:48:03 +0700 Subject: add to cart, cart page, change cart item quantity --- src/helpers/cart.js | 39 +++------ src/icons/minus.svg | 3 + src/icons/plus.svg | 4 + src/pages/shop/brands/[slug].js | 4 +- src/pages/shop/cart.js | 167 ++++++++++++++++++++++++++++++++------- src/pages/shop/product/[slug].js | 4 +- 6 files changed, 163 insertions(+), 58 deletions(-) create mode 100644 src/icons/minus.svg create mode 100644 src/icons/plus.svg (limited to 'src') diff --git a/src/helpers/cart.js b/src/helpers/cart.js index 07e47324..8712c03a 100644 --- a/src/helpers/cart.js +++ b/src/helpers/cart.js @@ -1,7 +1,7 @@ const getCart = () => { const cart = localStorage.getItem('cart'); if (cart) return JSON.parse(cart); - return []; + return {}; } const setCart = (cart) => { @@ -9,18 +9,18 @@ const setCart = (cart) => { return true; } -const getItemIndex = (product_id) => { - const cart = getCart(); - return cart.findIndex((item) => item.product_id == product_id); +const getItemCart = (product_id) => { + let cart = getCart(); + return cart[product_id]; } -const addToCart = (product_id, quantity) => { +const createOrUpdateItemCart = (product_id, quantity) => { let cart = getCart(); - let itemIndexByProductId = getItemIndex(product_id); - if (itemIndexByProductId > -1) { - updateItemCart(product_id, quantity); + let isFoundInCart = cart[product_id]; + if (isFoundInCart) { + cart[product_id].quantity = quantity; } else { - cart.push({ product_id, quantity }); + cart[product_id] = { product_id, quantity }; } setCart(cart); return true; @@ -28,27 +28,14 @@ const addToCart = (product_id, quantity) => { const deleteItemCart = (product_id) => { let cart = getCart(); - let itemIndexByProductId = getItemIndex(product_id); - if (itemIndexByProductId > -1) { - cart.splice(itemIndexByProductId, 1) - } - setCart(cart); - return true; -} - -const updateItemCart = (product_id, quantity) => { - let cart = getCart(); - let itemIndexByProductId = getItemIndex(product_id); - if (itemIndexByProductId > -1) { - cart[itemIndexByProductId].quantity += quantity; - } + delete cart[product_id] setCart(cart); return true; } export { getCart, - addToCart, - deleteItemCart, - updateItemCart + getItemCart, + createOrUpdateItemCart, + deleteItemCart } \ No newline at end of file diff --git a/src/icons/minus.svg b/src/icons/minus.svg new file mode 100644 index 00000000..12a10199 --- /dev/null +++ b/src/icons/minus.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/icons/plus.svg b/src/icons/plus.svg new file mode 100644 index 00000000..2923c684 --- /dev/null +++ b/src/icons/plus.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/pages/shop/brands/[slug].js b/src/pages/shop/brands/[slug].js index 320c4454..b04d2715 100644 --- a/src/pages/shop/brands/[slug].js +++ b/src/pages/shop/brands/[slug].js @@ -88,8 +88,8 @@ export default function BrandDetail({ -

Produk

-
+

Produk

+
{productFound > 0 ? ( <> Menampilkan  diff --git a/src/pages/shop/cart.js b/src/pages/shop/cart.js index 635d4efd..5e7ff822 100644 --- a/src/pages/shop/cart.js +++ b/src/pages/shop/cart.js @@ -1,49 +1,160 @@ -import { useEffect } from "react"; +import { useEffect, useState } from "react"; import Header from "../../components/Header"; import Layout from "../../components/Layout"; import Link from "../../components/Link"; -import { getCart } from "../../helpers/cart"; +import { createOrUpdateItemCart, deleteItemCart, getCart, getItemCart } from "../../helpers/cart"; import ChevronLeftIcon from "../../icons/chevron-left.svg"; +import MinusIcon from "../../icons/minus.svg"; +import PlusIcon from "../../icons/plus.svg"; +import { LazyLoadImage } from "react-lazy-load-image-component"; + +import 'react-lazy-load-image-component/src/effects/blur.css'; +import apiOdoo from "../../helpers/apiOdoo"; +import currencyFormat from "../../helpers/currencyFormat"; export default function Cart() { + const [products, setProducts] = useState([]); + + const getProducts = async () => { + let cart = getCart(); + let productIds = Object.keys(cart); + if (productIds.length > 0) { + productIds = productIds.join(','); + let dataProducts = await apiOdoo('GET', `/api/v1/product_variant/${productIds}`); + dataProducts = dataProducts.map((product) => ({ + ...product, + quantity: cart[product.id].quantity + })); + setProducts(dataProducts); + } + } + useEffect(() => { - console.log(getCart()); - }) + getProducts(); + }, []); + + const updateCart = (productId, quantity) => { + let productIndexToUpdate = products.findIndex((product) => product.id == productId); + if (quantity != '') createOrUpdateItemCart(productId, quantity); + setProducts((products) => { + products[productIndexToUpdate].quantity = quantity; + return [...products]; + }); + }; + + const blurQuantity = (productId, quantity) => { + quantity = quantity == ('' || 0) ? 1 : parseInt(quantity); + updateCart(productId, quantity); + }; + + const updateQuantity = (productId, quantity) => { + quantity = quantity == '' ? '' : parseInt(quantity); + updateCart(productId, quantity); + }; + + const plusQuantity = (productId) => { + let productIndexToUpdate = products.findIndex((product) => product.id == productId); + let quantity = products[productIndexToUpdate].quantity + 1; + updateCart(productId, quantity); + } + + const minusQuantity = (productId) => { + let productIndexToUpdate = products.findIndex((product) => product.id == productId); + let quantity = products[productIndexToUpdate].quantity - 1; + if (quantity <= 0) { + deleteItemCart(productId); + setProducts((products) => { + products.splice(productIndexToUpdate, 1); + return [...products]; + }); + } else { + updateCart(productId, quantity); + } + } + return ( <>
-
- {/* Progress Bar */} -
-
-
1
-

Keranjang

-
-
-
-
-
-
2
-

Pembayaran

-
-
-
-
-
-
3
-

Selesai

-
+ {/* jsx-start: Progress Bar */} +
+
+
1
+

Keranjang

+
+
+
+
+
+
2
+

Pembayaran

- {/* [End] Progress Bar */} - {/* Title */} -
+
+
+
+
+
3
+

Selesai

+
+
+ {/* [End] Progress Bar */} +
+ + {/* [Start] Title */} +

Keranjang Saya

{/* [End] Title */} + + {/* [Start] Product List */} +
+ {products.map((product, index) => ( +
+
+ +
+
+ + {product.parent.name} + +

{product.code ? product.code : '-'}

+
+

{currencyFormat(product.price.price_discount)}

+ {product.price.discount_percentage > 0 ? ( + <> + {product.price.discount_percentage}% +

{currencyFormat(product.price.price)}

+ + ) : ''} + +
+
+

{currencyFormat(product.quantity * product.price.price_discount)}

+
+ + blurQuantity(product.id, e.target.value)} + onChange={(e) => updateQuantity(product.id, e.target.value)} + value={product.quantity} + /> + +
+
+
+
+ ))} +
+ {/* [End] Product List */} +
diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js index e44cfeca..cabda175 100644 --- a/src/pages/shop/product/[slug].js +++ b/src/pages/shop/product/[slug].js @@ -9,7 +9,7 @@ import { LazyLoadImage } from "react-lazy-load-image-component"; import "react-lazy-load-image-component/src/effects/blur.css"; import ProductSlider from "../../../components/product/ProductSlider"; import Layout from "../../../components/Layout"; -import { addToCart } from "../../../helpers/cart"; +import { createOrUpdateItemCart } from "../../../helpers/cart"; export async function getServerSideProps( context ) { const { slug } = context.query; @@ -83,7 +83,7 @@ export default function ProductDetail({ product }) { let addItemToCart = () => { if (quantity > 0) { - addToCart(activeVariant.id, parseInt(quantity)); + createOrUpdateItemCart(activeVariant.id, parseInt(quantity)); } return true; } -- cgit v1.2.3