diff --git a/package.json b/package.json
index fdc6dac6f560033a31ef3a38eb20beb5aeda4c9e..3309096aeeee5627cd47770df5bf809331276f2c 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 962922ed1cd95208907013bfc2bb1cf9095b8214..6a1a7b428921ad9149361d5a694607a7c3f99f15 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 766f8f4201b98bd311a29fe2b62674e8b9dbebcb..8f6753ac166d31c7383ba2bbe58d8660d1d3ad2d 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 c21e252b29a8396a675c338d1f7169f5d854fdd0..eb88992d94648a1d2c5ca751eed341d31837f618 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 2fb3fa1b080896de0d796f8877cf1d85aa7a4239..6ec7ac6ecce5c9ea5c2458bba303f41fec18f137 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 ebd3f1aedc1c8e4c2347a9d53ad6ef837459c243..690d6b8ff014c7b0203d985ca9099c4f89753731 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 d4fda80ae2bfdabc1eb11b881237a10daffaddbb..a760f65ef76ae757bc417758129c20d8d241e95d 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 920e5102419b3da7d8e14f0a7264a27c5d3c8c61..8b7b86a95829fec2c02b647eb90705a8e861b3be 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 5bc02bd053e23fb3d3274bb66f7fac94eb0f85cf..85b2b96f60dee818243473c9a68183a02281b9e0 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 1c8b075d6b4c096617b3f6cc4cd2f593edb80cc4..c05630b2afc1b49887ddeea6d3876717b5d5dbe8 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>