diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/helpers/cart.js | 54 | ||||
| -rw-r--r-- | src/icons/chevron-left.svg | 3 | ||||
| -rw-r--r-- | src/pages/404.js | 4 | ||||
| -rw-r--r-- | src/pages/shop/cart.js | 51 | ||||
| -rw-r--r-- | src/pages/shop/product/[slug].js | 8 |
5 files changed, 116 insertions, 4 deletions
diff --git a/src/helpers/cart.js b/src/helpers/cart.js new file mode 100644 index 00000000..07e47324 --- /dev/null +++ b/src/helpers/cart.js @@ -0,0 +1,54 @@ +const getCart = () => { + const cart = localStorage.getItem('cart'); + if (cart) return JSON.parse(cart); + return []; +} + +const setCart = (cart) => { + localStorage.setItem('cart', JSON.stringify(cart)); + return true; +} + +const getItemIndex = (product_id) => { + const cart = getCart(); + return cart.findIndex((item) => item.product_id == product_id); +} + +const addToCart = (product_id, quantity) => { + let cart = getCart(); + let itemIndexByProductId = getItemIndex(product_id); + if (itemIndexByProductId > -1) { + updateItemCart(product_id, quantity); + } else { + cart.push({ product_id, quantity }); + } + setCart(cart); + return true; +} + +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; + } + setCart(cart); + return true; +} + +export { + getCart, + addToCart, + deleteItemCart, + updateItemCart +}
\ No newline at end of file diff --git a/src/icons/chevron-left.svg b/src/icons/chevron-left.svg new file mode 100644 index 00000000..a22ce386 --- /dev/null +++ b/src/icons/chevron-left.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left"> + <polyline points="15 18 9 12 15 6"></polyline> +</svg>
\ No newline at end of file diff --git a/src/pages/404.js b/src/pages/404.js index 3eafbb08..b7f8b8ef 100644 --- a/src/pages/404.js +++ b/src/pages/404.js @@ -13,10 +13,10 @@ export default function PageNotFound() { <Image src={PageNotFoundImage} alt="Halaman Tidak Ditemukan - Indoteknik" className="w-full" /> <p className="mt-3 h1 text-center">Halaman tidak ditemukan</p> <div className="mt-6 flex px-4 gap-x-3"> - <Link href="/" className="btn-light flex-1"> + <Link href="/" className="btn-light text-gray_r-12 flex-1"> Kembali ke beranda </Link> - <a href="https://send.whatsapp.com" className="btn-yellow flex-1 h-fit"> + <a href="https://send.whatsapp.com" className="btn-yellow text-gray_r-12 flex-1 h-fit"> Tanya admin </a> </div> diff --git a/src/pages/shop/cart.js b/src/pages/shop/cart.js new file mode 100644 index 00000000..2de1a7ac --- /dev/null +++ b/src/pages/shop/cart.js @@ -0,0 +1,51 @@ +import { useEffect } from "react"; +import Header from "../../components/Header"; +import Layout from "../../components/Layout"; +import Link from "../../components/Link"; +import { getCart } from "../../helpers/cart"; +import ChevronLeftIcon from "../../icons/chevron-left.svg"; + +export default function Cart() { + useEffect(() => { + console.log(getCart()); + }) + return ( + <> + <Header title={`Keranjang Belanja - Indoteknik`}/> + <Layout> + <div className="p-4"> + {/* Progress Bar */} + <div className="bg-gray_r-2 flex gap-x-2 p-4 rounded-md mb-4"> + <div className="flex gap-x-2 items-center"> + <div className="bg-yellow_r-9 leading-none p-2 rounded-full w-7 text-center text-gray_r-12">1</div> + <p className="font-medium">Keranjang</p> + </div> + <div className="flex-1 flex items-center"> + <div className="h-0.5 w-full bg-gray_r-7"></div> + </div> + <div className="flex gap-x-2 items-center"> + <div className="bg-gray_r-3 leading-none p-2 rounded-full w-7 text-center text-gray_r-11">2</div> + <p className="font-medium text-gray_r-11">Pembayaran</p> + </div> + <div className="flex-1 flex items-center"> + <div className="h-0.5 w-full bg-gray_r-7"></div> + </div> + <div className="flex gap-x-2 items-center"> + <div className="bg-gray_r-3 leading-none p-2 rounded-full w-7 text-center text-gray_r-11">3</div> + <p className="font-medium text-gray_r-11">Selesai</p> + </div> + </div> + {/* [End] Progress Bar */} + {/* Title */} + <div className="flex gap-x-2"> + <Link href="/" className="pr-2"> + <ChevronLeftIcon className="w-6 stroke-gray_r-12"/> + </Link> + <h1>Keranjang Saya</h1> + </div> + {/* [End] Title */} + </div> + </Layout> + </> + ); +}
\ No newline at end of file diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js index 5fce1c85..e44cfeca 100644 --- a/src/pages/shop/product/[slug].js +++ b/src/pages/shop/product/[slug].js @@ -9,6 +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"; export async function getServerSideProps( context ) { const { slug } = context.query; @@ -80,7 +81,10 @@ export default function ProductDetail({ product }) { setQuantity("1"); } - let addToCart = () => { + let addItemToCart = () => { + if (quantity > 0) { + addToCart(activeVariant.id, parseInt(quantity)); + } return true; } @@ -136,7 +140,7 @@ export default function ProductDetail({ product }) { <div className="flex gap-x-2 mt-2"> <button className="btn-light w-full">+ Quotation</button> - <button className="btn-yellow w-full" onClick={addToCart} disabled={(product.lowest_price.price == 0 ? true : false)}>+ Keranjang</button> + <button className="btn-yellow w-full" onClick={addItemToCart} disabled={(product.lowest_price.price == 0 ? true : false)}>+ Keranjang</button> </div> <div className="mt-10"> |
