From 725f232f45c315106b8f2d6da7ef4980f63a8f9f Mon Sep 17 00:00:00 2001
From: Tim Adams <zfac125@live.rhul.ac.uk>
Date: Sun, 3 Mar 2024 22:23:46 +0000
Subject: [PATCH] cart page is displaying chosen item now
---
public/shopping-basket.js | 145 +++++++++++++++++++++++++++-----------
views/cart.hbs | 12 ++--
views/men.hbs | 4 +-
3 files changed, 113 insertions(+), 48 deletions(-)
diff --git a/public/shopping-basket.js b/public/shopping-basket.js
index fdddd2b..eb2e8b2 100644
--- a/public/shopping-basket.js
+++ b/public/shopping-basket.js
@@ -3,22 +3,22 @@
async function populateProducts(endpoint) {
const container = document.querySelector('.container');
- if(!container){
+ if (!container) {
console.error('Container element not found');
return;
}
-
- try{
- const response = await fetch(endpoint);
- const products = await response.json();
+
+ try {
+ const response = await fetch(endpoint);
+ const products = await response.json();
- container.innerHTML = '';
+ container.innerHTML = '';
- products.forEach(product => {
- const productsHtml = document.createElement('div');
- productsHtml.innerHTML = `
+ products.forEach(product => {
+ const productsHtml = document.createElement('div');
+ productsHtml.innerHTML = `
<div class="product">
<div class="product-card">
<h2 class="name">${product.name}</h2>
@@ -30,7 +30,7 @@ async function populateProducts(endpoint) {
<div class="popup-card">
<a><i class="fas fa-times close-btn"></i></a>
<div class="product-img">
- <img src="${product.image}" alt="Image of ${product.name}">
+ <img src="${product.image}" class="product-img" alt="Image of ${product.name}">
</div>
<div class="info">
<h2>Your fashion<br><span>Modern styles</span></h2>
@@ -43,29 +43,61 @@ async function populateProducts(endpoint) {
</div>
</div>
`;
- container.appendChild(productsHtml);
-
-
-
- if(products.image){
- const img = new Image();
- img.src =`data:image/jpeg;base64,${product.image.toString('base64')}`;
- productsHtml.appendChild(img);
- }
-
-/* if(container){
container.appendChild(productsHtml);
- }else{
- console.error('Container element not found');
- } */
- });
-}catch (error){
- console.error('Failed to populate products:', error);
-}
+
+ if (products.image) {
+ const img = new Image();
+ img.src = `data:image/jpeg;base64,${product.image.toString('base64')}`;
+ productsHtml.appendChild(img);
+ }
+
+ productsHtml.querySelector('.add-cart-btn').addEventListener('click', () => {
+ addProductToCart(product);
+ })
+
+
+
+ /* if(container){
+ container.appendChild(productsHtml);
+ }else{
+ console.error('Container element not found');
+ } */
+ });
+ } catch (error) {
+ console.error('Failed to populate products:', error);
+ }
//console.log(container);
addCartActions(container);
}
+
+function addProductToCart(product) {
+ let cartItems = JSON.parse(localStorage.getItem('productsInCart')) || {};
+
+ if (cartItems[product.productid]) {
+ cartItems[product.productid].inCart += 1;
+ } else {
+ product.inCart = 1;
+ cartItems[product.productid] = product;
+ }
+
+ localStorage.setItem('productsInCart', JSON.stringify(cartItems));
+ updateCartTotal();
+}
+
+function updateCartTotal() {
+ let cartItems = JSON.parse(localStorage.getItem('productsInCart')) || {};
+ let total = Object.keys(cartItems).reduce((acc, key) => acc + cartItems[key].price * cartItems[key].inCart, 0);
+
+ localStorage.setItem('totalCost', total.toString());
+ // Update the display of the total cost, you might need to adjust this selector based on your HTML structure
+ const totalCostElement = document.querySelector('.total-cost');
+ if (totalCostElement) {
+ totalCostElement.textContent = `£${total}`;
+ }
+}
+
document.addEventListener('DOMContentLoaded', (event) => {
+ getProducts();
const menProductsLink = document.getElementById('men-products');
const womenProductsLink = document.getElementById('women-products');
const kidsProductsLink = document.getElementById('kids-products');
@@ -122,12 +154,34 @@ document.addEventListener('DOMContentLoaded', (event) => {
} else {
console.error("Women Shoes products link not found.");
}
-});
+});
+
+const carts = document.querySelectorAll('.add-cart-btn');
+async function getProducts() {
+ try {
+ const response = await fetch('http://localhost:7000/products');
+ if (!response.ok) {
+ throw new Error(`HTTP error! Status: ${response.status}`);
+ }
+ const data = await response.json();
+ //products = data.products;
+
+ populateProducts(data.products);
+ // console.log(data.products);
+ // console.log('Products:', products);
+ } catch (error) {
+ console.error('error fetching products:', error);
+ }
-
+}
+
+document.addEventListener('DOMContentLoaded', (event) => {
+ getProducts();
+});
+
@@ -179,6 +233,10 @@ function onLoadCardsNumbers() {
}
}
+document.addEventListener('DOMContentLoaded', () => {
+ onLoadCardsNumbers();
+});
+
function cardsNumbers(product) {
let productNumber = localStorage.getItem('cardsNumbers');
@@ -204,11 +262,11 @@ function setItems(product) {
}
let cartItems = localStorage.getItem('productsInCart');
-
+
cartItems = JSON.parse(cartItems);
-
+
const productTag = product.tag; // Get the tag property once
-
+
if (cartItems != null) {
if (cartItems[productTag] == undefined) {
cartItems = {
@@ -227,15 +285,22 @@ function setItems(product) {
[productTag]: product
};
}
-
+
localStorage.setItem('productsInCart', JSON.stringify(cartItems));
+
}
function totalCost() {
- let cartItems = localStorage.getItem('productsInCart');
- cartItems = JSON.parse(cartItems) || {};
- let total = Object.values(cartItems).reduce((acc, item) => acc + (item.inCart * item.price), 0);
+ let cartItems = JSON.parse(localStorage.getItem('productsInCart')) || {};
+ //cartItems = JSON.parse(cartItems) || {};
+ //let total = Object.values(cartItems).reduce((acc, item) => acc + (item.inCart * item.price), 0);
+ let total = 0;
+ for (item in cartItems) {
+ total += cartItems[item].price * cartItems[item].inCart;
+ }
+
+
localStorage.setItem('totalCost', total.toString());
return total;
}
@@ -243,7 +308,7 @@ function totalCost() {
function displayCart() {
let cartItems = JSON.parse(localStorage.getItem('productsInCart')) || {};
-
+
let productContainer = document.querySelector('.prods');
let cartCost = 0; // Initialize cartCost to 0
@@ -256,13 +321,13 @@ function displayCart() {
const closeBtnId = `close-btn-${item.id}`; // Update the close button's unique identifier
const addBtnId = `add-btn-${item.id}`;
const removeBtnId = `remove-btn-${item.id}`;
-
+
//const imageUrl = item.tag ? `/images/${item.tag}.jpg` : 'default-image.jpg';
productContainer.innerHTML += `
<div class="prod">
<link href='https://unpkg.com/css.gg@2.0.0/icons/css/close-o.css' rel='stylesheet'>
<i class="gg-close-o ${closeBtnId}"></i>
- <img src="./images/${item.tag}.jpg">
+ <img src="${item.image}">
<span>${item.name}</span>
</div>
<div class="price">£${item.price}</div>
diff --git a/views/cart.hbs b/views/cart.hbs
index 113c41f..661b8c4 100644
--- a/views/cart.hbs
+++ b/views/cart.hbs
@@ -44,20 +44,20 @@
<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>
diff --git a/views/men.hbs b/views/men.hbs
index 322028d..47e059b 100644
--- a/views/men.hbs
+++ b/views/men.hbs
@@ -73,7 +73,7 @@
<br>
<div id="characterList" class="characterLists"></div>
-
+ <div class="container" id="container"></div>
@@ -81,7 +81,7 @@
<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
--
GitLab