From 62efb018e250bbd789de2092a68dd289f5573f0e Mon Sep 17 00:00:00 2001
From: Tim Adams <zfac125@live.rhul.ac.uk>
Date: Sun, 3 Mar 2024 19:16:53 +0000
Subject: [PATCH] all pages are fetching products from the DB
---
public/shopping-basket.js | 17 +++--
server.js | 14 +++-
views/kids-shoes.hbs | 156 ++------------------------------------
views/kids.hbs | 6 +-
views/men-shoes.hbs | 2 +-
views/men.hbs | 12 +--
views/women-shoes.hbs | 4 +-
views/women.hbs | 9 ++-
8 files changed, 51 insertions(+), 169 deletions(-)
diff --git a/public/shopping-basket.js b/public/shopping-basket.js
index a305c26..fdddd2b 100644
--- a/public/shopping-basket.js
+++ b/public/shopping-basket.js
@@ -11,9 +11,7 @@ async function populateProducts(endpoint) {
try{
const response = await fetch(endpoint);
const products = await response.json();
-/* const response1 = await fetch('/women-products');
- const womenProducts = await response1.json();
- const products = menProducts.concat(womenProducts); */
+
container.innerHTML = '';
@@ -73,6 +71,7 @@ document.addEventListener('DOMContentLoaded', (event) => {
const kidsProductsLink = document.getElementById('kids-products');
const menShoesProductsLink = document.getElementById('men-s-products');
const womenShoesProductsLink = document.getElementById('women-s-products');
+ const kidsShoesProductsLink = document.getElementById('kids-s-products');
if (menProductsLink) {
menProductsLink.addEventListener('click', (e) => {
@@ -115,7 +114,15 @@ document.addEventListener('DOMContentLoaded', (event) => {
} else {
console.error("Women Shoes products link not found.");
}
-});
+ if (kidsShoesProductsLink) {
+ kidsShoesProductsLink.addEventListener('click', (e) => {
+ e.preventDefault(); // Prevent the default link behavior
+ populateProducts('/kids-s-products');
+ });
+ } else {
+ console.error("Women Shoes products link not found.");
+ }
+});
@@ -370,4 +377,4 @@ function displayCart() {
onLoadCardsNumbers();
-displayCart();
+displayCart();
\ No newline at end of file
diff --git a/server.js b/server.js
index 17f02eb..ed6cf1e 100644
--- a/server.js
+++ b/server.js
@@ -2,7 +2,7 @@ const express = require('express');
const path = require('path');
const {Pool} = require('pg');
const app = express();
-const port = 5000;
+const port = 7000;
const pool = new Pool({
host: 'localhost',
@@ -93,6 +93,18 @@ app.get('/women-s-products', async (req, res) => {
}
});
+ app.get('/kids-s-products', async (req, res) => {
+ try{
+ const client = await pool.connect();
+ const { rows } = await client.query("SELECT * FROM products WHERE category = 'K-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/kids-shoes.hbs b/views/kids-shoes.hbs
index 51082c4..6230f7c 100644
--- a/views/kids-shoes.hbs
+++ b/views/kids-shoes.hbs
@@ -37,20 +37,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>
@@ -67,150 +67,10 @@
</header>
<div id="characterList" class="characterLists"></div>
- <div class="container">
- <div class="product">
- <div class="product-card">
- <h2 class="name">Boys Shoes</h2>
- <span class="price">£31.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="/images/boys-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/boys-shoes.jpg" alt="">
- </div>
- <div class="info">
- <h2>Boys 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">£31.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">Boys Shoes</h2>
- <span class="price">£25.99</span>
- <a class="popup-btn">Quick View</a>
- <img src="/images/boys-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/boys-shoes1.jpg" alt="">
- </div>
- <div class="info">
- <h2>Boys 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">£25.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">Boys Shoes</h2>
- <span class="price">£40.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="/images/boys-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/boys-shoes2.jpg" alt="">
- </div>
- <div class="info">
- <h2>Boys 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">£40.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">Girls Shoes</h2>
- <span class="price">£50.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="/images/girls-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/girls-shoes.jpg" alt="">
- </div>
- <div class="info">
- <h2>Girls 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">Girls Shoes</h2>
- <span class="price">£55.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="/images/girls-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/girls-shoes1.jpg" alt="">
- </div>
- <div class="info">
- <h2>Girls 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">£55.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">Girls Shoes</h2>
- <span class="price">£28.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="/images/girls-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/girls-shoes2.jpg" alt="">
- </div>
- <div class="info">
- <h2>Girls 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">£28.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" 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="/product-cards.js"></script> --}}
<script src="/shopping-basket.js"></script>
<script src="/search.js"></script>
</body>
diff --git a/views/kids.hbs b/views/kids.hbs
index 8a9b3b8..be17038 100644
--- a/views/kids.hbs
+++ b/views/kids.hbs
@@ -48,9 +48,9 @@
<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 42f0253..6deb12a 100644
--- a/views/men-shoes.hbs
+++ b/views/men-shoes.hbs
@@ -66,7 +66,7 @@
</header>
<div id="characterList" class="characterLists"></div>
- <div class="container"></div>
+ <div class="container" id="container"></div>
<script src="/product-cards.js"></script>
diff --git a/views/men.hbs b/views/men.hbs
index 0a3384f..322028d 100644
--- a/views/men.hbs
+++ b/views/men.hbs
@@ -49,9 +49,9 @@
<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>
@@ -71,15 +71,17 @@
</header>
<br>
+
<div id="characterList" class="characterLists"></div>
- <div class="container" 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="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" type="module"></script>
<script src="/shopping-basket.js"></script>
+ <div class="container" id="container"></div>
</body>
</html>
\ No newline at end of file
diff --git a/views/women-shoes.hbs b/views/women-shoes.hbs
index cc55382..5de5428 100644
--- a/views/women-shoes.hbs
+++ b/views/women-shoes.hbs
@@ -65,10 +65,10 @@
</header>
<div id="characterList" class="characterLists"></div>
- <div class="container"></div>
+ <div class="container" id="container"></div>
- <script src="/product-cards.js"></script>
+ {{!-- <script src="/product-cards.js"></script> --}}
<script src="/shopping-basket.js"></script>
<script src="/search.js"></script>
</body>
diff --git a/views/women.hbs b/views/women.hbs
index 6e99fd9..134bff4 100644
--- a/views/women.hbs
+++ b/views/women.hbs
@@ -47,9 +47,9 @@
<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,8 +65,9 @@
</div>
</header>
- <div id="characterList" class="characterLists"></div>
<div class="container" id="container"></div>
+ <div id="characterList" class="characterLists"></div>
+
<script src="/product-cards.js"></script>
--
GitLab