Merge pull request #30 from fac25/add-basket

Add basket
fac25 · Oct 26, 2022 · ab68f51 · ab68f51
2 parents 7b6aca5 + 132d663
commit ab68f51
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 4 deletions.
diff --git a/components/layout.js b/components/layout.js
@@ -4,6 +4,7 @@ import Link from "next/link";
 export const siteTitle = "Miss Macs";
 
 export default function Layout({ children, home }) {
+
   return (
     <div>
       <Head>

diff --git a/pages/basket.js b/pages/basket.js
@@ -0,0 +1,16 @@
+import { useEffect } from "react";
+
+const Basket = () => {
+
+    useEffect(()=>{
+      const keys = Object.keys(localStorage)
+      const value = Object.values(localStorage)
+
+console.log(keys + "" + value)
+
+    },[])
+
+  return <></>;
+};
+
+export default Basket;
diff --git a/pages/index.js b/pages/index.js
@@ -4,8 +4,12 @@ import styles from "../styles/Home.module.css";
 import { getProducts } from "../database/model.js";
 import { useState } from "react";
 
+
 export async function getStaticProps() {
   // Fetch necessary data for the blog post using params.id
+
+
+
   let products = getProducts();
   return {
     props: {

diff --git a/pages/products/[id].js b/pages/products/[id].js
@@ -1,5 +1,6 @@
 import { getProducts, getProductById } from "../../database/model.js";
 import Image from "next/image";
+import { useEffect, useState } from "react";
 
 export async function getStaticPaths() {
   let allProducts = getProducts();
@@ -30,6 +31,12 @@ export async function getStaticProps({ params }) {
 }
 
 export default function Product({ product }) {
+  const handleBasket = (e) => {
+    e.preventDefault();
+    const number = document.getElementById("quantity").value
+    localStorage.setItem(JSON.stringify(product.name), number)
+  };
+
   return (
     <div>
       <div>
@@ -46,13 +53,14 @@ export default function Product({ product }) {
       <div>
         <p>Description: {product.description}</p>
         <p>Allergens: {product.allergens}</p>
-        <p>Suitable for: {product.suitable_for}</p>
       </div>
 
       <div>
-        <label htmlFor="quantity">Quantity</label>
-        <input type="number" id="quantity" value="1" />
-        <button>Add to basket</button>
+        <form>
+          <label htmlFor="quantity">Quantity</label>
+          <input type="number" id="quantity"/>
+          <button onClick={handleBasket}>Add to basket</button>
+        </form>
       </div>
     </div>
   );
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,6 +4,7 @@ import Link from "next/link"; @@
     export const siteTitle = "Miss Macs";
     export default function Layout({ children, home }) {
       return (
         <div>
           <Head>
@@ Expand Down @@