From 6230fe26387bd123b438a147eebe55f88e6e6412 Mon Sep 17 00:00:00 2001
From: Tim Adams <zfac125@live.rhul.ac.uk>
Date: Sat, 10 Feb 2024 00:21:39 +0000
Subject: [PATCH] most of the pages are populated from the backend.
---
products.js | 226 ++++++++++++++++++++++++++++++++++++--
public/shopping-basket.js | 101 ++++++++++-------
public/style.css | 18 ++-
views/kids.hbs | 6 +-
views/men.hbs | 2 +-
views/women.hbs | 2 +-
6 files changed, 294 insertions(+), 61 deletions(-)
diff --git a/products.js b/products.js
index ad65a90..5a01b6d 100644
--- a/products.js
+++ b/products.js
@@ -1,8 +1,8 @@
exports.productList = [
- // [
+ [
{
name: 'Blue Shirt',
- description: 'This is a Blue Shirt',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
tag: 'BlueShirt',
price: 29.99,
inCart: 0,
@@ -10,7 +10,7 @@ exports.productList = [
},
{
name: 'Black Shirt',
- description: 'This is a Black Shirt',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
tag: 'BlackShirt',
price: 23.99,
inCart: 0,
@@ -19,7 +19,7 @@ exports.productList = [
},
{
name: 'White Shirt',
- description: 'This is a White Shirt',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
tag: 'WhiteShirt',
price: 89.99,
inCart: 0,
@@ -27,7 +27,7 @@ exports.productList = [
},
{
name: 'Denim jeans',
- description: 'This is a Denim jeans',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
tag: 'DenimJeans',
price: 150.00,
inCart: 0,
@@ -35,7 +35,7 @@ exports.productList = [
},
{
name: 'Light blue jeans',
- description: 'This is a Light blue jeans',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
tag: 'LightBlue',
price: 50.00,
inCart: 0,
@@ -43,14 +43,14 @@ exports.productList = [
},
{
name: 'Cotton jeans',
- description: 'This is a Cotton jeans',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
tag: 'Cottonjeans',
price: 200.00,
inCart: 0,
Image: 'https://static-01.daraz.pk/p/5838623fb612626ae33c2f67d1b7179c.jpg'
- },
-//],
-//[
+ }
+],
+[
{
name: 'Blue blouse',
description: 'This is a Blue blouse',
@@ -99,5 +99,209 @@ exports.productList = [
inCart: 0,
Image: 'https://imagescdn.planetfashion.in/img/app/product/7/738426-8259061.jpg?auto=format'
}
-//]
+],
+[
+ {
+ name: 'Girls dress',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+ tag: 'GirlsDress',
+ price: 64.00,
+ inCart: 0,
+ Image: '/images/girls-dress.jpg'
+ },
+ {
+ name: 'Girls dress',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+ tag: 'GirlsDress',
+ price: 57.00,
+ inCart: 0,
+ Image: '/images/girls-dress1.webp',
+
+ },
+ {
+ name: 'Girls dress',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+ tag: 'GirlsDress',
+ price: 89.99,
+ inCart: 0,
+ Image: '/images/girls-dress2.webp'
+ },
+ {
+ name: 'Boys jumper',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+ tag: 'BoysJumper',
+ price: 80.00,
+ inCart: 0,
+ Image: '/images/boys-jumper.avif'
+ },
+ {
+ name: 'Boys jumper',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+ tag: 'BoysJumper',
+ price: 50.00,
+ inCart: 0,
+ Image: '/images/boys-jumper1.webp'
+ },
+ {
+ name: 'Boys jumper',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+ tag: 'BoysJumper',
+ price: 70.00,
+ inCart: 0,
+ Image: '/images/boys-jumper2.webp'
+ }
+],
+[ // from this position down to be fixed at a later date or until a better solution is found
+ {
+ name: 'Blue Shirt',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+ tag: 'BlueShirt',
+ price: 29.99,
+ inCart: 0,
+ Image: 'https://img.fruugo.com/product/2/90/617160902_max.jpg'
+ },
+ {
+ name: 'Black Shirt',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+ tag: 'BlackShirt',
+ price: 23.99,
+ inCart: 0,
+ Image: 'https://ng.jumia.is/unsafe/fit-in/680x680/filters:fill(white)/product/85/0545391/3.jpg?5946',
+
+ },
+ {
+ name: 'White Shirt',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+ tag: 'WhiteShirt',
+ price: 89.99,
+ inCart: 0,
+ Image: 'https://img.fruugo.com/product/6/45/507046456_max.jpg'
+ },
+ {
+ name: 'Denim jeans',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+ tag: 'DenimJeans',
+ price: 150.00,
+ inCart: 0,
+ Image: 'https://i8.amplience.net/i/egl/MensJeans-220407-slim.jpg'
+ },
+ {
+ name: 'Light blue jeans',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+ tag: 'LightBlue',
+ price: 50.00,
+ inCart: 0,
+ Image: 'https://eg.jumia.is/unsafe/fit-in/500x500/filters:fill(white)/product/33/055233/1.jpg?5486'
+ },
+ {
+ name: 'Cotton jeans',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+ tag: 'Cottonjeans',
+ price: 200.00,
+ inCart: 0,
+ Image: 'https://static-01.daraz.pk/p/5838623fb612626ae33c2f67d1b7179c.jpg'
+ }
+],
+[
+ {
+ name: 'Blue Shirt',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+ tag: 'BlueShirt',
+ price: 29.99,
+ inCart: 0,
+ Image: 'https://img.fruugo.com/product/2/90/617160902_max.jpg'
+ },
+ {
+ name: 'Black Shirt',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+ tag: 'BlackShirt',
+ price: 23.99,
+ inCart: 0,
+ Image: 'https://ng.jumia.is/unsafe/fit-in/680x680/filters:fill(white)/product/85/0545391/3.jpg?5946',
+
+ },
+ {
+ name: 'White Shirt',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+ tag: 'WhiteShirt',
+ price: 89.99,
+ inCart: 0,
+ Image: 'https://img.fruugo.com/product/6/45/507046456_max.jpg'
+ },
+ {
+ name: 'Denim jeans',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+ tag: 'DenimJeans',
+ price: 150.00,
+ inCart: 0,
+ Image: 'https://i8.amplience.net/i/egl/MensJeans-220407-slim.jpg'
+ },
+ {
+ name: 'Light blue jeans',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+ tag: 'LightBlue',
+ price: 50.00,
+ inCart: 0,
+ Image: 'https://eg.jumia.is/unsafe/fit-in/500x500/filters:fill(white)/product/33/055233/1.jpg?5486'
+ },
+ {
+ name: 'Cotton jeans',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+ tag: 'Cottonjeans',
+ price: 200.00,
+ inCart: 0,
+ Image: 'https://static-01.daraz.pk/p/5838623fb612626ae33c2f67d1b7179c.jpg'
+ }
+],
+[
+ {
+ name: 'Blue Shirt',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+ tag: 'BlueShirt',
+ price: 29.99,
+ inCart: 0,
+ Image: 'https://img.fruugo.com/product/2/90/617160902_max.jpg'
+ },
+ {
+ name: 'Black Shirt',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+ tag: 'BlackShirt',
+ price: 23.99,
+ inCart: 0,
+ Image: 'https://ng.jumia.is/unsafe/fit-in/680x680/filters:fill(white)/product/85/0545391/3.jpg?5946',
+
+ },
+ {
+ name: 'White Shirt',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+ tag: 'WhiteShirt',
+ price: 89.99,
+ inCart: 0,
+ Image: 'https://img.fruugo.com/product/6/45/507046456_max.jpg'
+ },
+ {
+ name: 'Denim jeans',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+ tag: 'DenimJeans',
+ price: 150.00,
+ inCart: 0,
+ Image: 'https://i8.amplience.net/i/egl/MensJeans-220407-slim.jpg'
+ },
+ {
+ name: 'Light blue jeans',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+ tag: 'LightBlue',
+ price: 50.00,
+ inCart: 0,
+ Image: 'https://eg.jumia.is/unsafe/fit-in/500x500/filters:fill(white)/product/33/055233/1.jpg?5486'
+ },
+ {
+ name: 'Cotton jeans',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+ tag: 'Cottonjeans',
+ price: 200.00,
+ inCart: 0,
+ Image: 'https://static-01.daraz.pk/p/5838623fb612626ae33c2f67d1b7179c.jpg'
+ }
+]
];
\ No newline at end of file
diff --git a/public/shopping-basket.js b/public/shopping-basket.js
index 3acb333..0c99163 100644
--- a/public/shopping-basket.js
+++ b/public/shopping-basket.js
@@ -10,60 +10,77 @@ async function getProducts() {
// console.log(response.data);
products = response.data.products;
+ //assuming 6 dimensions: pages and sections
+ const numPages = 6;
+ const numSectionsPerPage = 6;
+ products = chunckArray(products, numPages * numSectionsPerPage); // splits products into pages and sections
+
populateProducts();
}
getProducts();
-function populateProducts() {
-
-
- const container = document.querySelector('.container');
-
- const productsHtml = products.map((product, i) => {
+//splits an array into chuncks
+function chunckArray(arr, chunckSize) {
+ const chunckedArray = [];
+ for (let i = 0; i < arr.length; i += chunckSize) {
+ chunckedArray.push(arr.slice(i, i + chunckSize));
+ }
+ return chunckedArray;
+}
- return (
- `
-
- <div class="product">
- <div class="product-card">
- <h2 class="name">${product.name}</h2>
- <span class="price">£${product.price}</span>
- <a class="popup-btn">Quick View</a>
- <img src="${product.Image}" class="product-img" alt="${product.description}">
- </div>
- <div class="popup-view">
- <div class="popup-card">
- <a><i class="fas fa-times close-btn"></i></a>
- <div class="product-img">
- <img src="${product.Image}" alt="${product.description}">
- </div>
- <div class="info">
- <h2>Men clothes<br><span>Men's wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+function populateProducts() {
+ for (let page = 0; page < products.length; page++) {
+ for (let section = 0; section < products[page].length; section++) {
+ const container = document.querySelector('.container-' + (page + 1) + '-' + (section + 1));
+
+ const productsHtml = products[page][section].map((product, i) => {
+
+ return (
+ `
+
+ <div class="product">
+ <div class="product-card">
+ <h2 class="name">${product.name}</h2>
<span class="price">£${product.price}</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
+ <a class="popup-btn">Quick View</a>
+ <img src="${product.Image}" class="product-img" alt="${product.description}">
+ </div>
+ <div class="popup-view">
+ <div class="popup-card">
+ <a><i class="fas fa-times close-btn"></i></a>
+ <div class="product-img">
+ <img src="${product.Image}" alt="${product.description}">
+ </div>
+ <div class="info">
+ <h2>Your fashion<br><span>Modern styles</span></h2>
+ <p>${product.description}</p>
+ <span class="price">£${product.price}</span>
+ <a href="#" class="add-cart-btn">Add to Cart</a>
+ <a href="#" class="add-wish">Add to Wishlist</a>
+ </div>
+ </div>
</div>
</div>
- </div>
- </div>
-
- `
- )
+
+ `
+ )
- });
-
- if (container) {
- container.innerHTML = productsHtml.toString();
- addCartActions();
+ });
+
+ if (container) {
+ container.innerHTML = productsHtml.toString();
+ addCartActions(container);
+ }
}
}
+}
+
-function addCartActions() {
+function addCartActions(container) {
var popupViews = document.querySelectorAll('.popup-view');
var popupBtns = document.querySelectorAll('.popup-btn');
@@ -93,7 +110,7 @@ function addCartActions() {
cardsNumbers(products[i]);
totalCost(products[i]);
- })
+ });
}
}
@@ -256,7 +273,7 @@ function displayCart() {
// Get the unique identifier of the clicked add button
const productId = event.target.className.split(' ').find(cls => cls.startsWith('add-btn-')).split('-')[2];
- //Increaments the quantity of the selected item
+ //Increments the quantity of the selected item
const productToUpdate = Object.values(cartItems).find(item => item.id === productId);
if (productToUpdate) {
productToUpdate.inCart += 1;
@@ -273,10 +290,10 @@ function displayCart() {
for (let i = 0; i < removeItem.length; i++) {
let button = removeItem[i];
button.addEventListener('click', (event) => {
- // Get the unique identifier of the clicked add button
+ // Get the unique identifier of the clicked remove button
const productId = event.target.className.split(' ').find(cls => cls.startsWith('remove-btn-')).split('-')[2];
- //Increaments the quantity of the selected item
+ //decrements the quantity of the selected item
const productToUpdate = Object.values(cartItems).find(item => item.id === productId);
if (productToUpdate) {
productToUpdate.inCart -= 1;
diff --git a/public/style.css b/public/style.css
index f466628..3e3ff29 100644
--- a/public/style.css
+++ b/public/style.css
@@ -172,6 +172,18 @@ header{
top: 200px;
}
+.container-1-1, .container-1-2, .container-1-3, .container-1-4, .container-1-5, .container-1-6{
+ position: relative;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100vh;
+ top: 200px;
+ margin-top: 50px;
+}
+
/*Styles for product card*/
.product .product-card {
@@ -180,7 +192,7 @@ header{
position: relative;
width: 300px;
height: 500px;
- margin: 40px;
+ margin: 60px;
border-radius: 10px;
}
@@ -200,8 +212,8 @@ header{
.product .product-card .product-img {
z-index: 1;
position: absolute;
- max-width: 370px;
- max-height: 430px;
+ max-width: 270px;
+ max-height: 300px;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
diff --git a/views/kids.hbs b/views/kids.hbs
index b36fb61..ebd3f1a 100644
--- a/views/kids.hbs
+++ b/views/kids.hbs
@@ -67,8 +67,8 @@
</header>
- <div class="container">
- <div class="product">
+ <div class="container-1-3">
+{{!-- <div class="product">
<div class="product-card">
<h2 class="name">Girls dress</h2>
<span class="price">£ 64.00</span>
@@ -205,7 +205,7 @@
</div>
</div>
</div>
- </div>
+ </div> --}}
</div>
diff --git a/views/men.hbs b/views/men.hbs
index 4626265..da65563 100644
--- a/views/men.hbs
+++ b/views/men.hbs
@@ -68,7 +68,7 @@
</header>
<br>
- <div class="container">
+ <div class="container-1-1">
{{!-- <div class="product">
<div class="product-card">
<h2 class="name">Blue Shirt</h2>
diff --git a/views/women.hbs b/views/women.hbs
index 54928b9..1c8b075 100644
--- a/views/women.hbs
+++ b/views/women.hbs
@@ -66,7 +66,7 @@
</header>
- <div class="container">
+ <div class="container-1-2">
{{!-- <div class="product">
<div class="product-card">
<h2 class="name">Blue blouse</h2>
--
GitLab