From 8c9c823a6f5c4bf7fe0a16d64105007aca6931e6 Mon Sep 17 00:00:00 2001
From: Tim Adams <zfac125@live.rhul.ac.uk>
Date: Fri, 16 Feb 2024 00:34:23 +0000
Subject: [PATCH] working to debug the search function but still facing a
fetching problem
---
controllers/productsCtrlFile.js | 9 --
package.json | 4 +-
products.js | 4 +-
public/search.js | 222 +++++++++-----------------------
server.js | 12 +-
views/index.hbs | 1 +
views/men.hbs | 145 +--------------------
7 files changed, 85 insertions(+), 312 deletions(-)
diff --git a/controllers/productsCtrlFile.js b/controllers/productsCtrlFile.js
index 771b7d8..39b2f9a 100644
--- a/controllers/productsCtrlFile.js
+++ b/controllers/productsCtrlFile.js
@@ -1,14 +1,5 @@
const { productList } = require('../products');
-/*exports.productCtrlFunction = (req, res) => {
- try{
- res.status(200).json({
- products: productList
- });
- }catch(error){
- console.log(error);
- }
-} */
// productsCtrlFile.js
const productsCtrlFunction = (req, res) => {
diff --git a/package.json b/package.json
index caabb46..fdc6dac 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,8 @@
"dependencies": {
"express": "^4.18.2",
"hbs": "^4.2.0",
- "nodemon": "^3.0.3"
+ "nodemon": "^3.0.3",
+ "type": "module",
+ "content-type": "1.0.5"
}
}
diff --git a/products.js b/products.js
index 5a01b6d..df4dc47 100644
--- a/products.js
+++ b/products.js
@@ -304,4 +304,6 @@ exports.productList = [
Image: 'https://static-01.daraz.pk/p/5838623fb612626ae33c2f67d1b7179c.jpg'
}
]
-];
\ No newline at end of file
+];
+
+//module.exports = productList;
\ No newline at end of file
diff --git a/public/search.js b/public/search.js
index 1c65271..f5e6825 100644
--- a/public/search.js
+++ b/public/search.js
@@ -1,175 +1,79 @@
-/* // Please note: This code is meant to be run in a browser environment, not in Node.js
+//let products = []; // Declare the products variable
-let postsData = [];
-const postsContainer = document.querySelector(".posts-container");
+const characterList = document.getElementById('characterList');
+const searchBar = document.getElementById('search-input');
-fetch(
- //this to be replaced with the actual website link in later stage.
- "http://localhost:5000/products"
-)
- .then(response => response.json())
- .then(data => {
- postsData = data;
- postsData.map(post => createPost(post));
- });
-
-const createPost = postData => {
- const { title, link, image, categories } = postData;
- const post = document.createElement("div");
- post.className = "post";
- post.innerHTML = `
- <a class="post-preview" href="${link}" target="_blank">
- <img class="post-image" src="${image}" alt="Post Image"></img>
- </a>
- <div class="post-content">
- <p class="post-title">${title}</p>
- <div class="post-tags">
- ${categories.map(category => `<span class="post-tag">${category}</span>`).join("")}
- </div>
- </div>
- `;
- postsContainer.append(post);
-};
-
-const search = document.getElementById("search-input");
-
-let timer;
-const debounce = (callback, time) => {
- window.clearTimeout(timer);
- timer = window.setTimeout(callback, time);
-};
+console.log('search running');
+console.log(searchBar);
-search.addEventListener(
- 'input',
- event => {
- const query = event.target.value;
- debounce(() => handleSearchPosts(query), 500);
- },
- false
-);
+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) => {
+ return (
+ product.name.toLowerCase().includes(searchString) ||
+ product.tag.toLowerCase().includes(searchString)
+ );
+ });
-const handleSearchPosts = query => {
- const searchQuery = query.trim().toLowerCase();
- let searchResults = postsData.filter(
- post =>
- post.categories.some(category => category.toLowerCase().includes(searchQuery)) ||
- post.title.toLowerCase().includes(searchQuery)
- );
+ console.log(filteredProducts);
+ displayCart(filteredProducts); // Pass filtered products to displayCart
+});
- const searchDisplay = document.querySelector('.search-display');
- if (searchResults.length === 0) {
- searchDisplay.innerHTML = "No results found";
- } else if (searchResults.length === 1) {
- searchDisplay.innerHTML = `1 result found for your query: ${query}`;
+ displayCart = (products) => {
+ console.log('Products:', products);
+ if (Array.isArray(products)) {
+ const htmlString = products.map((product) => {
+ 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>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>
+ `;
+ }).join('');
+ characterList.innerHTML = htmlString;
} else {
- searchDisplay.innerHTML = `${searchResults.length} results found for your query: ${query}`;
+ console.error('Products is not an array:', products);
}
-
- postsContainer.innerHTML = "";
- searchResults.map(post => createPost(post));
};
-const resetPosts = () => {
- const searchDisplay = document.querySelector('.search-display');
- searchDisplay.innerHTML = "";
- postsContainer.innerHTML = "";
- postsData.map(post => createPost(post));
-};
- */
-document.addEventListener("DOMContentLoaded", function() {
-
-
- let postsData = [];
- const postsContainer = document.querySelector(".posts-container");
- const searchInput = document.getElementById("search-input");
- const searchDisplay = document.querySelector('.search-display');
- let debounceTimer;
-
- // Fetch posts data from the server
- const fetchPosts = async () => {
- try {
- const response = await fetch("http://localhost:5000/products");
- if (!response.ok) {
- throw new Error('Failed to fetch data');
- }
- const data = await response.json();
- if (!Array.isArray(data)) {
- throw new Error('Data is not an array');
- }
- postsData = data;
- displayPosts(postsData);
- } catch (error) {
- console.log('Error fetching data:', error.message);
+const loadProducts = async () => {
+ try {
+ const res = await fetch('http://localhost:5000');
+ if (!res.ok) {
+ throw new Error('Network response was not ok');
}
- };
-
- // Display posts in the UI
- const displayPosts = (data) => {
- postsContainer.innerHTML = "";
- data.forEach(post => {
- const postElement = createPostElement(post);
- postsContainer.appendChild(postElement);
- });
- };
-
- // Create HTML element for a single post
- const createPostElement = (postData) => {
- const { title, link, image, categories } = postData;
- const post = document.createElement("div");
- post.className = "post";
- post.innerHTML = `
- <a class="post-preview" href="${link}" target="_blank">
- <img class="post-image" src="${image}" alt="Post Image"></img>
- </a>
- <div class="post-content">
- <p class="post-title">${title}</p>
- <div class="post-tags">
- ${categories.map(category => `<span class="post-tag">${category}</span>`).join("")}
- </div>
- </div>
- `;
- return post;
- };
+ 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);
+ }
+};
- // Handle search input
- const handleSearchInput = () => {
- const query = searchInput.value.trim().toLowerCase();
- const searchResults = postsData.filter(post =>
- post.categories.some(category => category.toLowerCase().includes(query)) ||
- post.title.toLowerCase().includes(query)
- );
- displaySearchResults(searchResults, query);
- };
- // Display search results in the UI
- const displaySearchResults = (results, query) => {
- if (results.length === 0) {
- searchDisplay.textContent = "No results found";
- } else if (results.length === 1) {
- searchDisplay.textContent = `1 result found for your query: ${query}`;
- } else {
- searchDisplay.textContent = `${results.length} results found for your query: ${query}`;
- }
- displayPosts(results);
- };
+loadProducts();
- // Debounce search input to reduce function calls
- //let debounceTimer;
- const debounceSearch = () => {
- clearTimeout(debounceTimer);
- debounceTimer = setTimeout(handleSearchInput, 500);
- };
- // Event listener for search input
- searchInput.addEventListener('input', debounceSearch);
- // Reset posts to initial state
- const resetPosts = () => {
- searchDisplay.textContent = "";
- searchInput.value = "";
- displayPosts(postsData);
- };
- // Initial fetch of posts data
- fetchPosts();
-});
diff --git a/server.js b/server.js
index e04d77c..a126142 100644
--- a/server.js
+++ b/server.js
@@ -2,6 +2,7 @@ const express = require('express');
const path = require('path');
const app = express();
const publicDirectory = path.join(__dirname, './public');
+
/* console.log(__dirname);
console.log(publicDirectory); */
app.use(express.static(publicDirectory));
@@ -10,6 +11,15 @@ app.set('view engine', 'hbs');
app.use('/', require('./routes/pages'));
app.use('/products', require('./routes/productsRouteFile'));
+const productList = require('./products');
+
+// Route to get products
+app.get('/products', (req, res) => {
+ // Send the products as JSON
+ res.setHeader('Content-Type', 'application/json');
+ res.json(productList);
+ });
+
app.listen(5000, () => {
console.log("Server is listening on port 5000");
-})
\ No newline at end of file
+});
diff --git a/views/index.hbs b/views/index.hbs
index 2b813a5..b179a27 100644
--- a/views/index.hbs
+++ b/views/index.hbs
@@ -69,6 +69,7 @@
</header>
<main class="cont">
<div class="search-display"></div>
+ <div id="characterList"></div>
<div class="posts-container"></div>
</main>
<br>
diff --git a/views/men.hbs b/views/men.hbs
index da65563..ba94f32 100644
--- a/views/men.hbs
+++ b/views/men.hbs
@@ -66,154 +66,17 @@
</div>
+
</header>
<br>
- <div class="container-1-1">
- {{!-- <div class="product">
- <div class="product-card">
- <h2 class="name">Blue Shirt</h2>
- <span class="price">£29.99</span>
- <a class="popup-btn">Quick View</a>
- <img src="https://img.fruugo.com/product/2/90/617160902_max.jpg" class="product-img" alt="https://images.app.goo.gl/uHt6sGNihxAXW8h1A">
- </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://img.fruugo.com/product/2/90/617160902_max.jpg" alt="https://images.app.goo.gl/uHt6sGNihxAXW8h1A">
- </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>
- <span class="price">£29.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">Black Shirt</h2>
- <span class="price">£23.99</span>
- <a class="popup-btn">Quick View</a>
- <img src="https://ng.jumia.is/unsafe/fit-in/680x680/filters:fill(white)/product/85/0545391/3.jpg?5946" class="product-img" alt="https://ng.jumia.is/unsafe/fit-in/680x680/filters:fill(white)/product/85/0545391/3.jpg?5946">
- </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://ng.jumia.is/unsafe/fit-in/680x680/filters:fill(white)/product/85/0545391/3.jpg?5946" alt="https://ng.jumia.is/unsafe/fit-in/680x680/filters:fill(white)/product/85/0545391/3.jpg?5946">
- </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>
- <span class="price">£23.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 Shirt</h2>
- <span class="price">£89.99</span>
- <a class="popup-btn">Quick View</a>
- <img src="https://img.fruugo.com/product/6/45/507046456_max.jpg" class="product-img" alt="https://img.fruugo.com/product/6/45/507046456_max.jpg">
- </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://img.fruugo.com/product/6/45/507046456_max.jpg" alt="https://img.fruugo.com/product/6/45/507046456_max.jpg">
- </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>
- <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">Denim jeans</h2>
- <span class="price">£150.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="https://i8.amplience.net/i/egl/MensJeans-220407-slim.jpg" class="product-img" alt="https://i8.amplience.net/i/egl/MensJeans-220407-slim.jpg">
- </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://i8.amplience.net/i/egl/MensJeans-220407-slim.jpg" alt="https://i8.amplience.net/i/egl/MensJeans-220407-slim.jpg">
- </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>
- <span class="price">£150.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">Light blue jeans</h2>
- <span class="price">£50.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="https://eg.jumia.is/unsafe/fit-in/500x500/filters:fill(white)/product/33/055233/1.jpg?5486" class="product-img" alt="https://eg.jumia.is/unsafe/fit-in/500x500/filters:fill(white)/product/33/055233/1.jpg?5486">
- </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://eg.jumia.is/unsafe/fit-in/500x500/filters:fill(white)/product/33/055233/1.jpg?5486" alt="https://eg.jumia.is/unsafe/fit-in/500x500/filters:fill(white)/product/33/055233/1.jpg?5486">
- </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>
- <span class="price">£50.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">Cotton jeans</h2>
- <span class="price">£200.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="https://static-01.daraz.pk/p/5838623fb612626ae33c2f67d1b7179c.jpg" class="product-img" alt="https://static-01.daraz.pk/p/5838623fb612626ae33c2f67d1b7179c.jpg">
- </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://static-01.daraz.pk/p/5838623fb612626ae33c2f67d1b7179c.jpg" alt="https://static-01.daraz.pk/p/5838623fb612626ae33c2f67d1b7179c.jpg">
- </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>
- <span class="price">£200.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"></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 type="module" src="/search.js"></script>
<script src="/shopping-basket.js"></script>
</body>
--
GitLab