Skip to content
Snippets Groups Projects
Commit e9fd8522 authored by Tim Adams's avatar Tim Adams
Browse files

solved most of the issues and only one step lift to complete this feature.

parent 76d77dc9
Branches
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
package.json
+ 2
− 1
View file @ e9fd8522
......@@ -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"
}
}
public/search.js
+ 70
− 47
View file @ e9fd8522
//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
server.js
+ 1
− 0
View file @ e9fd8522
......@@ -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');
......
views/index.hbs
+ 2
− 1
View file @ e9fd8522
......@@ -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>
......
views/kids-shoes.hbs
+ 1
− 1
View file @ e9fd8522
......@@ -66,7 +66,7 @@
</div>
</header>
<div id="characterList" class="characterLists"></div>
<div class="container">
<div class="product">
<div class="product-card">
......
views/kids.hbs
+ 1
− 1
View file @ e9fd8522
......@@ -66,7 +66,7 @@
</div>
</header>
<div id="characterList" class="characterLists"></div>
<div class="container-1-3">
{{!-- <div class="product">
<div class="product-card">
......
views/men-shoes.hbs
+ 1
− 1
View file @ e9fd8522
......@@ -65,7 +65,7 @@
</div>
</header>
<div id="characterList" class="characterLists"></div>
<div class="container">
<div class="product">
<div class="product-card">
......
views/men.hbs
+ 2
− 2
View file @ e9fd8522
......@@ -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>
......
views/women-shoes.hbs
+ 1
− 1
View file @ e9fd8522
......@@ -64,7 +64,7 @@
</div>
</header>
<div id="characterList" class="characterLists"></div>
<div class="container">
<div class="product">
<div class="product-card">
......
views/women.hbs
+ 2
− 141
View file @ e9fd8522
......@@ -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>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

GitLab by CIM Team | RHUL