Add to cart to localstorage

3 files changed, 59 insertions, 4 deletions

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