From e9fd8522874868f8270b3e6a8c6be7eb9f6c253d Mon Sep 17 00:00:00 2001
From: Tim Adams <zfac125@live.rhul.ac.uk>
Date: Sun, 18 Feb 2024 23:10:23 +0000
Subject: [PATCH] solved most of the issues and only one step lift to complete
this feature.
---
package.json | 3 +-
public/search.js | 117 ++++++++++++++++++++--------------
server.js | 1 +
views/index.hbs | 3 +-
views/kids-shoes.hbs | 2 +-
views/kids.hbs | 2 +-
views/men-shoes.hbs | 2 +-
views/men.hbs | 4 +-
views/women-shoes.hbs | 2 +-
views/women.hbs | 143 +-----------------------------------------
10 files changed, 83 insertions(+), 196 deletions(-)
diff --git a/package.json b/package.json
index fdc6dac..3309096 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
"hbs": "^4.2.0",
"nodemon": "^3.0.3",
"type": "module",
- "content-type": "1.0.5"
+ "content-type": "1.0.5",
+ "head": "1.0.0"
}
}
diff --git a/public/search.js b/public/search.js
index 962922e..6a1a7b4 100644
--- a/public/search.js
+++ b/public/search.js
@@ -1,41 +1,55 @@
-//let products = []; // Declare the products variable
+// Declare the products variable
-const characterList = document.getElementById('characterList');
+const { productList } = require("../products");
+
+const characterList = document.getElementsByClassName('container-');
const searchBar = document.getElementById('search-input');
//console.log('search running');
//console.log(searchBar);
+let products1 = productList;
+
+
+const flattenProducts = (products1) => {
+ return products1.flatMap(page => page.flatMap(section => section));
+};
+
+searchBar.addEventListener('input', (e) => {
-searchBar.addEventListener('keyup', (event) => {
- console.log(event.target.value);
- const searchString = event.target.value.toLowerCase(); // Convert to lower case for case-insensitive comparison
- const filteredProducts = products.filter((product) => {
+
+ const searchString = e.target.value.toLowerCase(); // Convert to lower case for case-insensitive comparison
+
+ //const filteredProducts = products;
+
+ console.log(e.target.value);
+ if (Array.isArray(products1)) {
+ const filteredProducts = products1.filter((product) => {
console.log('Product:', product);
- return (
- (product.name?.toLowerCase().includes(searchString) || false) ||
- (product.tag?.toLowerCase().includes(searchString) || false)
- );
+ return (
+ (product.name?.toLowerCase().includes(searchString) || false) ||
+ (product.price?.toLowerCase().includes(searchString) || false)
+ );
});
+ displayCarts(filteredProducts);
- console.log('Search String:', searchString);
-products.forEach((products) => {
- console.log('Product Name:', products.name);
- console.log('Product Tag:', products.tag);
-});
+ } else {
+ console.log('Products array is empty or undefined. Waiting for data to load.');
+ }
- //console.log(filteredProducts);
- displayCart(filteredProducts); // Pass filtered products to displayCart
+ //console.log(filteredProducts);
+ // Pass filtered products to displayCart
});
+const displayCarts = (products1) => {
+ console.log('Products:', products1);
+ for (let page = 0; page < products1.length; page++) {
+ for (let section = 0; section < products1[page].length; section++) {
+ const characterList = document.querySelector('.characterLists' + (page + 1) + '-' + (section + 1));
-
- displayCart = (products) => {
- console.log('Products:', products);
- if (Array.isArray(products)) {
- const htmlString = products.map((product) => {
- return `
+ const htmlString = products1[page][section].map((product) => {
+ return `
<div class="product">
<div class="product-card">
<h2 class="name">${product.name}</h2>
@@ -60,37 +74,46 @@ products.forEach((products) => {
</div>
</div>
`;
- }).join('');
+ });
+
+ if (characterList) {
characterList.innerHTML = htmlString;
- } else {
- console.error('Products is not an array:', products);
+ loadProducts(characterList);
+ }
}
+ }
};
+/* function flat(products){
+ return products.reduce((acc, val) =>
+ Array.isArray(val) ? acc.concat(flat(val)) : acc.concat(val), [],
+ );
+}
+flat(products); */
const loadProducts = async () => {
- try {
- const res = await fetch('http://localhost:5000/products', {
- headers:{
- accept: 'application/json',
- 'User-agent': 'learning app',
- }
- });
-
- if (!res.ok) {
- throw new Error('Network response was not ok');
- }
- const data = await res.json();
- const products = Object.values(data).flat(); // Extract products from the object and flatten them into a single array
- console.log('Products:', products);
- displayCart(products);
- } catch (err) {
- console.error('Error fetching products:', err);
- }
-};
-
+ try {
+ const res = await fetch('http://localhost:5000/products', {
+ headers: {
+ accept: 'application/json',
+ 'User-agent': 'learning app',
+ }
+ });
-loadProducts();
+ if (!res.ok) {
+ throw new Error('Network response was not ok');
+ }
+
+
+ const data = await res.json();
+ products1 = flattenProducts(data); // Extract products from the object and flatten them into a single array
+ //console.log('Products:', products);
+ displayCarts(products1);
+ } catch (err) {
+ console.error('Error fetching products:', err);
+ }
+};
+loadProducts();
\ No newline at end of file
diff --git a/server.js b/server.js
index 766f8f4..8f6753a 100644
--- a/server.js
+++ b/server.js
@@ -10,6 +10,7 @@ app.set('view engine', 'hbs');
app.use('/', require('./routes/pages'));
app.use('/products', require('./routes/productsRouteFile'));
+
/* app.use('http://localhost:5000/products'); */
/* const productList = require('./products');
diff --git a/views/index.hbs b/views/index.hbs
index c21e252..eb88992 100644
--- a/views/index.hbs
+++ b/views/index.hbs
@@ -20,7 +20,7 @@
<body class="responsive">
- <!--<script src="css/app.js"></script>-->
+
<header>
<div class="your-fashion-text-box">
<a href="/" class="shopname">Your Fashion</a>
@@ -67,6 +67,7 @@
</div>
</header>
+ <div id="characterList" class="characterLists"></div>
<main class="cont">
{{!-- <div class="search-display"></div> --}}
<div id="characterList"></div>
diff --git a/views/kids-shoes.hbs b/views/kids-shoes.hbs
index 2fb3fa1..6ec7ac6 100644
--- a/views/kids-shoes.hbs
+++ b/views/kids-shoes.hbs
@@ -66,7 +66,7 @@
</div>
</header>
-
+ <div id="characterList" class="characterLists"></div>
<div class="container">
<div class="product">
<div class="product-card">
diff --git a/views/kids.hbs b/views/kids.hbs
index ebd3f1a..690d6b8 100644
--- a/views/kids.hbs
+++ b/views/kids.hbs
@@ -66,7 +66,7 @@
</div>
</header>
-
+ <div id="characterList" class="characterLists"></div>
<div class="container-1-3">
{{!-- <div class="product">
<div class="product-card">
diff --git a/views/men-shoes.hbs b/views/men-shoes.hbs
index d4fda80..a760f65 100644
--- a/views/men-shoes.hbs
+++ b/views/men-shoes.hbs
@@ -65,7 +65,7 @@
</div>
</header>
-
+ <div id="characterList" class="characterLists"></div>
<div class="container">
<div class="product">
<div class="product-card">
diff --git a/views/men.hbs b/views/men.hbs
index 920e510..8b7b86a 100644
--- a/views/men.hbs
+++ b/views/men.hbs
@@ -69,14 +69,14 @@
</header>
<br>
- <div id="characterList"></div>
+ <div id="characterList" class="characterLists"></div>
<div class="container-1-1" id="container"></div>
{{!-- <script src="/product-cards.js"></script> --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.7/axios.min.js" integrity="sha512-NQfB/bDaB8kaSXF8E77JjhHG5PM6XVRxvHzkZiwl3ddWCEPBa23T76MuWSwAJdMGJnmQqM0VeY9kFszsrBEFrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
- <script src="/search.js"></script>
+ <script src="/search.js" type="module"></script>
<script src="/shopping-basket.js"></script>
</body>
diff --git a/views/women-shoes.hbs b/views/women-shoes.hbs
index 5bc02bd..85b2b96 100644
--- a/views/women-shoes.hbs
+++ b/views/women-shoes.hbs
@@ -64,7 +64,7 @@
</div>
</header>
-
+ <div id="characterList" class="characterLists"></div>
<div class="container">
<div class="product">
<div class="product-card">
diff --git a/views/women.hbs b/views/women.hbs
index 1c8b075..c05630b 100644
--- a/views/women.hbs
+++ b/views/women.hbs
@@ -65,147 +65,8 @@
</div>
</header>
-
- <div class="container-1-2">
-{{!-- <div class="product">
- <div class="product-card">
- <h2 class="name">Blue blouse</h2>
- <span class="price">£ 59.99</span>
- <a class="popup-btn">Quick View</a>
- <img src="https://peacocks.imgix.net/media/imagery/2/0/7/5/6/1_75adccf069ea5a2/207561pls_ee4d8736435c6a4.jpg" class="product-img" alt="">
- </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="https://peacocks.imgix.net/media/imagery/2/0/7/5/6/1_75adccf069ea5a2/207561pls_ee4d8736435c6a4.jpg" alt="">
- </div>
- <div class="info">
- <h2>Women clothes<br><span>Women'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>
- <span class="price">£ 59.99</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 class="product">
- <div class="product-card">
- <h2 class="name">Off White blouse</h2>
- <span class="price">£ 73.99</span>
- <a class="popup-btn">Quick View</a>
- <img src="https://www.marie-claire.com/cdn/shop/files/498765525638-01.jpg?v=1693493574&width=720" class="product-img" alt="">
- </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="https://www.marie-claire.com/cdn/shop/files/498765525638-01.jpg?v=1693493574&width=720" alt="">
- </div>
- <div class="info">
- <h2>Women clothes<br><span>Women'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>
- <span class="price">£ 73.99</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 class="product">
- <div class="product-card">
- <h2 class="name">White blouse</h2>
- <span class="price">£ 89.99</span>
- <a class="popup-btn">Quick View</a>
- <img src="https://m.media-amazon.com/images/I/61GDvPjdmtL.jpg" class="product-img" alt="">
- </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="https://m.media-amazon.com/images/I/61GDvPjdmtL.jpg" alt="">
- </div>
- <div class="info">
- <h2>Women clothes<br><span>Women'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>
- <span class="price">£ 89.99</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 class="product">
- <div class="product-card">
- <h2 class="name">Brown trouser</h2>
- <span class="price">£ 140.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="https://m.media-amazon.com/images/I/61+0NJn8oyL._AC_UF894,1000_QL80_.jpg" class="product-img" alt="">
- </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="https://m.media-amazon.com/images/I/61+0NJn8oyL._AC_UF894,1000_QL80_.jpg" alt="">
- </div>
- <div class="info">
- <h2>Women clothes<br><span>Women'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>
- <span class="price">£140.00</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 class="product">
- <div class="product-card">
- <h2 class="name">Cream trouser</h2>
- <span class="price">£ 59.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="https://m.media-amazon.com/images/I/61E3wB99TIL._AC_UY580_.jpg" class="product-img" alt="">
- </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="https://m.media-amazon.com/images/I/61E3wB99TIL._AC_UY580_.jpg" alt="">
- </div>
- <div class="info">
- <h2>Women clothes<br><span>Women'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>
- <span class="price">£59.00</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 class="product">
- <div class="product-card">
- <h2 class="name">Grey trouser</h2>
- <span class="price">£ 201.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="https://imagescdn.planetfashion.in/img/app/product/7/738426-8259061.jpg?auto=format" class="product-img" alt="">
- </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="https://imagescdn.planetfashion.in/img/app/product/7/738426-8259061.jpg?auto=format" alt="">
- </div>
- <div class="info">
- <h2>Women clothes<br><span>Women'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>
- <span class="price">£201.00</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 id="characterList" class="characterLists"></div>
+ <div class="container-1-2"></div>
<script src="/product-cards.js"></script>
--
GitLab