From 7acca7be7bc67bf7473036ab9f2ed037efe420f2 Mon Sep 17 00:00:00 2001
From: Tim Adams <zfac125@live.rhul.ac.uk>
Date: Sat, 2 Mar 2024 23:25:47 +0000
Subject: [PATCH] men and women shoes pages are fetching products from the DB
---
public/shopping-basket.js | 18 +++++
server.js | 24 ++++++
views/index.hbs | 8 +-
views/men-shoes.hbs | 153 ++-----------------------------------
views/women-shoes.hbs | 154 ++------------------------------------
5 files changed, 60 insertions(+), 297 deletions(-)
diff --git a/public/shopping-basket.js b/public/shopping-basket.js
index 71b3964..a305c26 100644
--- a/public/shopping-basket.js
+++ b/public/shopping-basket.js
@@ -71,6 +71,8 @@ document.addEventListener('DOMContentLoaded', (event) => {
const menProductsLink = document.getElementById('men-products');
const womenProductsLink = document.getElementById('women-products');
const kidsProductsLink = document.getElementById('kids-products');
+ const menShoesProductsLink = document.getElementById('men-s-products');
+ const womenShoesProductsLink = document.getElementById('women-s-products');
if (menProductsLink) {
menProductsLink.addEventListener('click', (e) => {
@@ -97,6 +99,22 @@ document.addEventListener('DOMContentLoaded', (event) => {
} else {
console.error("Kids' products link not found.");
}
+ if (menShoesProductsLink) {
+ menShoesProductsLink.addEventListener('click', (e) => {
+ e.preventDefault(); // Prevent the default link behavior
+ populateProducts('/men-s-products');
+ });
+ } else {
+ console.error("Men Shoes products link not found.");
+ }
+ if (womenShoesProductsLink) {
+ womenShoesProductsLink.addEventListener('click', (e) => {
+ e.preventDefault(); // Prevent the default link behavior
+ populateProducts('/women-s-products');
+ });
+ } else {
+ console.error("Women Shoes products link not found.");
+ }
});
diff --git a/server.js b/server.js
index d0a8490..17f02eb 100644
--- a/server.js
+++ b/server.js
@@ -69,6 +69,30 @@ app.get('/kids-products', async (req, res) => {
}
});
+app.get('/men-s-products', async (req, res) => {
+ try{
+ const client = await pool.connect();
+ const { rows } = await client.query("SELECT * FROM products WHERE category = 'M-shoes'");
+ res.json(rows);
+ client.release();
+ }catch(err){
+ res.status(500).send('Server error');
+ console.error('Error exucting query', err.stack);
+ }
+});
+
+app.get('/women-s-products', async (req, res) => {
+ try{
+ const client = await pool.connect();
+ const { rows } = await client.query("SELECT * FROM products WHERE category = 'W-shoes'");
+ res.json(rows);
+ client.release();
+ }catch(err){
+ res.status(500).send('Server error');
+ console.error('Error exucting query', err.stack);
+ }
+});
+
app.listen(port, () => {
console.log(`Server is listening on port ${port}`);
});
diff --git a/views/index.hbs b/views/index.hbs
index 4feb766..817777e 100644
--- a/views/index.hbs
+++ b/views/index.hbs
@@ -46,14 +46,14 @@
<a class="nav-link" id="women-products" href="/women">Women</a>
</li>
<li class="nav-item">
- <a class="nav-link" href="/kids">Kids</a>
+ <a class="nav-link" id="kids-products" href="/kids">Kids</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Footwear</a>
<ul class="dropdown-menu" id="submenu">
- <li><a class="dropdown-item" href="/men-shoes">Men Shoes</a></li>
- <li><a class="dropdown-item" href="/women-shoes">Women Shoes</a></li>
- <li><a class="dropdown-item" href="/kids-shoes">Kids Shoes</a></li>
+ <li><a class="dropdown-item" id="men-s-products" href="/men-shoes">Men Shoes</a></li>
+ <li><a class="dropdown-item" id="women-s-products" href="/women-shoes">Women Shoes</a></li>
+ <li><a class="dropdown-item" id="kids-s-products" href="/kids-shoes">Kids Shoes</a></li>
</ul>
</li>
</ul>
diff --git a/views/men-shoes.hbs b/views/men-shoes.hbs
index 6a9bde2..42f0253 100644
--- a/views/men-shoes.hbs
+++ b/views/men-shoes.hbs
@@ -36,20 +36,20 @@
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
- <a class="nav-link" href="/men">Men</a>
+ <a class="nav-link" id="men-products" href="/men">Men</a>
</li>
<li class="nav-item">
- <a class="nav-link" href="/women">Women</a>
+ <a class="nav-link" id="women-products" href="/women">Women</a>
</li>
<li class="nav-item">
- <a class="nav-link" href="/kids">Kids</a>
+ <a class="nav-link" id="kids-products" href="/kids">Kids</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Footwear</a>
<ul class="dropdown-menu" id="submenu">
- <li><a class="dropdown-item" href="/men-shoes">Men Shoes</a></li>
- <li><a class="dropdown-item" href="/women-shoes">Women Shoes</a></li>
- <li><a class="dropdown-item" href="/kids-shoes">Kids Shoes</a></li>
+ <li><a class="dropdown-item" id="men-s-products" href="/men-shoes">Men Shoes</a></li>
+ <li><a class="dropdown-item" id="women-s-producrs" href="/women-shoes">Women Shoes</a></li>
+ <li><a class="dropdown-item" id="kids-s-products" href="/kids-shoes">Kids Shoes</a></li>
</ul>
</li>
</ul>
@@ -66,146 +66,7 @@
</header>
<div id="characterList" class="characterLists"></div>
- <div class="container">
- {{!-- <div class="product">
- <div class="product-card">
- <h2 class="name">Men Shoes</h2>
- <span class="price">£60.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="/images/men-shoes.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="/images/men-shoes.jpg" alt="">
- </div>
- <div class="info">
- <h2>Men Shoes<br><span>Foot 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">£60.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">Men Shoes</h2>
- <span class="price">£73.99</span>
- <a class="popup-btn">Quick View</a>
- <img src="/images/men-shoes1.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="/images/men-shoes1.jpg" alt="">
- </div>
- <div class="info">
- <h2>Men Shoes<br><span>Foot 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">Men Shoes</h2>
- <span class="price">£89.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="/images/men-shoes2.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="/images/men-shoes2.jpg" alt="">
- </div>
- <div class="info">
- <h2>Men Shoes<br><span>Foot 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.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">Men Shoes</h2>
- <span class="price">£50.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="/images/men-shoes3.webp" 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="/images/men-shoes3.webp" alt="">
- </div>
- <div class="info">
- <h2>Men Shoes<br><span>Foot 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">Men Shoes</h2>
- <span class="price">£50.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="/images/men-shoes4.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="/images/men-shoes4.jpg" alt="">
- </div>
- <div class="info">
- <h2>Men Shoes<br><span>Foot 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">Men jeans</h2>
- <span class="price">£100.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="/images/men-shoes5.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="/images/men-shoes5.jpg" alt="">
- </div>
- <div class="info">
- <h2>Men Shoes<br><span>Foot 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">£100.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 class="container"></div>
<script src="/product-cards.js"></script>
diff --git a/views/women-shoes.hbs b/views/women-shoes.hbs
index 3db8bb1..cc55382 100644
--- a/views/women-shoes.hbs
+++ b/views/women-shoes.hbs
@@ -35,20 +35,20 @@
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
- <a class="nav-link" href="/men">Men</a>
+ <a class="nav-link" id="men-products" href="/men">Men</a>
</li>
<li class="nav-item">
- <a class="nav-link" href="/women">Women</a>
+ <a class="nav-link" id="women-products" href="/women">Women</a>
</li>
<li class="nav-item">
- <a class="nav-link" href="/kids">Kids</a>
+ <a class="nav-link" id="kids-products" href="/kids">Kids</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Footwear</a>
<ul class="dropdown-menu" id="submenu">
- <li><a class="dropdown-item" href="/men-shoes">Men Shoes</a></li>
- <li><a class="dropdown-item" href="/women-shoes">Women Shoes</a></li>
- <li><a class="dropdown-item" href="/kids-shoes">Kids Shoes</a></li>
+ <li><a class="dropdown-item" id="men-s-products" href="/men-shoes">Men Shoes</a></li>
+ <li><a class="dropdown-item" id="women-s-products" href="/women-shoes">Women Shoes</a></li>
+ <li><a class="dropdown-item" id="kids-s-products" href="/kids-shoes">Kids Shoes</a></li>
</ul>
</li>
</ul>
@@ -65,150 +65,10 @@
</header>
<div id="characterList" class="characterLists"></div>
- <div class="container">
-{{!-- <div class="product">
- <div class="product-card">
- <h2 class="name">Women Shoes</h2>
- <span class="price">£47.99</span>
- <a class="popup-btn">Quick View</a>
- <img src="/images/women-shoes.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="/images/women-shoes.jpg" alt="">
- </div>
- <div class="info">
- <h2>Women Shoes<br><span>Foot 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">£47.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">Women Shoes</h2>
- <span class="price">£87.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="/images/women-shoes1.jpeg" 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="/images/women-shoes1.jpeg" alt="">
- </div>
- <div class="info">
- <h2>Women Shoes<br><span>Foot 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">£87.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">Women Shoes</h2>
- <span class="price">£89.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="/images/women-shoes2.webp" 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="/images/women-shoes2.webp" alt="">
- </div>
- <div class="info">
- <h2>Women Shoes<br><span>Foot 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.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">Women Shoes</h2>
- <span class="price">£119.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="/images/women-shoes3.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="/images/women-shoes3.jpg" alt="">
- </div>
- <div class="info">
- <h2>Women Shoes<br><span>Foot 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">£119.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">Women Shoes</h2>
- <span class="price">£52.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="/images/women-shoes4.jpeg" 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="/images/women-shoes4.jpeg" alt="">
- </div>
- <div class="info">
- <h2>Women Shoes<br><span>Foot 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">£52.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">Women Shoes</h2>
- <span class="price">£ 60.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="/images/women-shoes5.webp" 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="/images/women-shoes5.webp" alt="">
- </div>
- <div class="info">
- <h2>Women Shoes<br><span>Foot 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">£60.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 class="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="/shopping-basket.js"></script>
<script src="/search.js"></script>
</body>
--
GitLab