diff --git a/products.js b/products.js
index ad65a90e652485df2248cd93e09793a6bbcaa377..5a01b6d77cb164b2115f9b10c8e38fe31152f83f 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 3acb333037b890502f141fba40a450e45e7ab10a..0c991635cc804dec11b07c8bd2d36ff116c3ca94 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 f4666287610cefc42bd652730a006a73ccd86608..3e3ff29da19856f058f0e85bd61fa98b0ba8bde0 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 b36fb614a7fe50a5ac68d3c7c5632834232c7362..ebd3f1aedc1c8e4c2347a9d53ad6ef837459c243 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 4626265542ea9328f48ea43c9929b01932fda531..da655631f6eaf580f24456fab394206a6d2b3450 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 54928b982398a1e92acbcfa639aabcdd96feb152..1c8b075d6b4c096617b3f6cc4cd2f593edb80cc4 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>