Add to cart to localstorage

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">