diff --git a/public/shopping-basket.js b/public/shopping-basket.js
index 71b39646e7d69ae8b3d99782471b3a01a102128d..a305c2677fd862fc97b240421353d7a5524cc1c7 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 d0a8490f0daddda4c7141a674b624248ea7cb5c8..17f02ebc7369b88148d985e0b1f2f85afab10e67 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 4feb76698cf9e88ec2206505736fce3dd7a050f4..817777e2a4a5a14e0970669b8ca71c346ec68d8e 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 6a9bde244c6008b0c3660b5e2e0f6845397c5619..42f02534b7e71b648882c578bf6feffa8136e217 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 3db8bb175e4c7979ba2a59b63da72ef1fe3c2b07..cc5538218058daa4a9ed6fa94b20d1c89246d05e 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>