edit basket

fac25 · Oct 27, 2022 · e897fa2 · e897fa2
2 parents 05b9202 + bd1bac3
commit e897fa2
Show file tree

Hide file tree

Showing 7 changed files with 152 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -2,33 +2,35 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next
 
 ## Getting Started
 
+
 First, run the development server:
 
 ```bash
+npm install
 npm run dev
-# or
-yarn dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+<img width="1208" alt="Screenshot 2022-10-27 at 16 46 47" src="https://user-images.githubusercontent.com/90449646/198337945-12a97b98-0fe5-4d1c-b92e-25d5bdb73dce.png">
 
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
 
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
 
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
 
-## Learn More
+## Acceptance criteria
 
-To learn more about Next.js, take a look at the following resources:
+- [X] Server-rendered with Next.js
+- [X] Homepage with product listings
+- [X] Individual product pages, containing quantity/colour/variant pickers
+- [X] Data stored in a SQLite database
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+## Stretch criteria
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+- [X] “Add to basket” button on product pages
+- [X] Basket page showing all saved items
+  - [X] Basket contents persisted for future visits
+- [X] Filter products by category
+- [ ] Sort products by price
+- [ ] End-to-end tests
 
-## Deploy on Vercel
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/pages/index.js b/pages/index.js
@@ -56,12 +56,12 @@ export default function Home({ products }) {
         }));
 
     return (
-      <ul>
+      <ul className="mainBody">
         {filtered.map((product, index) => {
           return (
             <li key={index}>
               <Link href={"/products/" + product.id}>
-                <div>
+                <div className="productImageContainer">
                   <p>{product.name}</p>
                   <Image
                     src={"/images/" + product.src} // Route of the image file
@@ -71,10 +71,12 @@ export default function Home({ products }) {
                   />
                 </div>
               </Link>
-              <p>{product.price}</p>
-              <button onClick={() => handleBasket(product.id)}>
-                Add to basket
-              </button>
+              <div className="priceBasketContainer">
+                <p>{product.price}</p>
+                <button onClick={() => handleBasket(product.id)}>
+                  Add to basket
+                </button>
+              </div>
             </li>
           );
         })}
@@ -108,7 +110,7 @@ export default function Home({ products }) {
         </div>
       </nav>
       <section>
-        <div>{filterByCategory()}</div>
+        <div >{filterByCategory()}</div>
       </section>
     </div>
   );

diff --git a/pages/products/[id].js b/pages/products/[id].js
@@ -69,19 +69,19 @@ export default function Product({ product }) {
   };
 
   return (
-    <div>
-      <div>
+    <div className="productPage">
+      <div className="stack">
+      <p>{product.name}</p>
         <Image
           src={"/images/" + product.src} // Route of the image file
           height={144} // Desired size with correct aspect ratio
           width={144} // Desired size with correct aspect ratio
           alt={product.name}
         />
-        <p>{product.name}</p>
         <p>Price: £{product.price}</p>
       </div>
 
-      <div>
+      <div className="stack">
         <p>Description: {product.description}</p>
         <p>Allergens: {product.allergens}</p>
       </div>

diff --git a/styles/_home.scss b/styles/_home.scss
@@ -1,3 +1,5 @@
+@use "variables";
+
 nav {
     display: flex;
     justify-content: space-around;
@@ -6,9 +8,14 @@ nav {
         display: flex;
         gap: 2rem;
         li{
-            font-size: 20px;
+            font-size: 30px;
+            padding: 10px;
+            border-radius: 5px;
             cursor: pointer;
         }
+        li:hover{
+            background-color:  variables.$warning;
+        }
     }
     a{
         display: flex;
@@ -20,4 +27,53 @@ nav {
             font-size: 20px;
         }
     }
+
+}
+
+.mainBody{
+    width: 80%;
+    height: 100vh;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(20rem,1fr));
+    gap: 1.5rem;
+
+
+    .productImageContainer{
+        // display: flex;
+        // flex-direction: column;
+
+        p{
+            font-size: 20px;
+            margin: 0.5rem 0;
+        }
+
+        img{
+            display: block;
+            margin-left: auto;
+            margin-right: auto;
+            width: 50%;
+        }
+    }
+
+
+    .priceBasketContainer{
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1rem;
+        align-items: center;
+
+        button{
+            cursor: pointer;
+            padding: 6px;
+            border-radius: 5px;
+            background-color: variables.$secondary;
+            color: variables.$primary-text;
+        }
+
+        button:hover{
+            background-color: variables.$primary-text;
+            color: variables.$secondary;
+        }
+    }
 }
diff --git a/styles/_products.scss b/styles/_products.scss
@@ -0,0 +1,14 @@
+@use "variables";
+
+.productPage{
+    width: 80%;
+    height: 100vh;
+    margin: 2rem auto;
+    font-size: 20px;
+
+    .stack > * + * {
+        margin-top: 2rem;
+    }
+
+
+}
diff --git a/styles/_variables.scss b/styles/_variables.scss
@@ -1,5 +1,5 @@
-$secondary: #003049;
 $primary: #FCBF49;
+$secondary: #003049;
 $primary-text: #EAE2B7;
 $secondary-text: #F77F00;
 $warning: #D62828;
diff --git a/styles/globals.css b/styles/globals.css
@@ -36,9 +36,14 @@ nav ul {
   gap: 2rem;
 }
 nav ul li {
-  font-size: 20px;
+  font-size: 30px;
+  padding: 10px;
+  border-radius: 5px;
   cursor: pointer;
 }
+nav ul li:hover {
+  background-color: #D62828;
+}
 nav a {
   display: flex;
   gap: 0.75rem;
@@ -49,3 +54,49 @@ nav a p {
 nav a span {
   font-size: 20px;
 }
+
+.mainBody {
+  width: 80%;
+  height: 100vh;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+  gap: 1.5rem;
+}
+.mainBody .productImageContainer p {
+  font-size: 20px;
+  margin: 0.5rem 0;
+}
+.mainBody .productImageContainer img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: 50%;
+}
+.mainBody .priceBasketContainer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  align-items: center;
+}
+.mainBody .priceBasketContainer button {
+  cursor: pointer;
+  padding: 6px;
+  border-radius: 5px;
+  background-color: #003049;
+  color: #EAE2B7;
+}
+.mainBody .priceBasketContainer button:hover {
+  background-color: #EAE2B7;
+  color: #003049;
+}
+
+.productPage {
+  width: 80%;
+  height: 100vh;
+  margin: 2rem auto;
+  font-size: 20px;
+}
+.productPage .stack > * + * {
+  margin-top: 2rem;
+}