From 4b2cbadcc0386baae91080e1d1bc56b2a978dea9 Mon Sep 17 00:00:00 2001
From: Tim Adams <zfac125@live.rhul.ac.uk>
Date: Thu, 8 Feb 2024 23:47:09 +0000
Subject: [PATCH] fixed grapping items from the backend and displaying them on
the frontend. still some issues to be fixed soon
---
public/product-cards.js | 1 +
public/shopping-basket.js | 122 +++++++++++++-------------------------
views/cart.hbs | 4 +-
views/index.hbs | 4 +-
views/kids-shoes.hbs | 1 +
views/kids.hbs | 1 +
views/men-shoes.hbs | 1 +
views/women-shoes.hbs | 1 +
8 files changed, 51 insertions(+), 84 deletions(-)
diff --git a/public/product-cards.js b/public/product-cards.js
index 9872568..f327331 100644
--- a/public/product-cards.js
+++ b/public/product-cards.js
@@ -1,3 +1,4 @@
+
var popupViews = document.querySelectorAll('.popup-view');
var popupBtns = document.querySelectorAll('.popup-btn');
var closeBtns = document.querySelectorAll('.close-btn');
diff --git a/public/shopping-basket.js b/public/shopping-basket.js
index ef7ec6a..c2013d1 100644
--- a/public/shopping-basket.js
+++ b/public/shopping-basket.js
@@ -19,6 +19,7 @@ function populateProducts(){
const productsHtml = products.map((product, i) => {
return (
`
+
<div class="product">
<div class="product-card">
<h2 class="name">${product.name}</h2>
@@ -36,105 +37,66 @@ function populateProducts(){
<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">£${product.price}</span>
- <a href="#" class="add-cart-btn${i}">Add to Cart</a>
+ <a href="#" class="add-cart-btn">Add to Cart</a>
<a href="#" class="add-wish">Add to Wishlist</a>
</div>
</div>
</div>
</div>
-
+
`
)
});
if(container){
- container.innerHTML += productsHtml.toString();
+ container.innerHTML = productsHtml.toString();
+ addCartActions();
}
}
-/* const products = [
- {
- name: 'Blue Shirt',
- tag: 'BlueShirt',
- price: 29.99,
- inCart: 0
- },
- {
- name: 'Black Shirt',
- tag: 'BlackShirt',
- price: 23.99,
- inCart: 0
- },
- {
- name: 'White Shirt',
- tag: 'WhiteShirt',
- price: 89.99,
- inCart: 0
- },
- {
- name: 'Denim jeans',
- tag: 'DenimJeans',
- price: 150.00,
- inCart: 0
- },
- {
- name: 'Light blue jeans',
- tag: 'LightBlue',
- price: 50.00,
- inCart: 0
- },
- {
- name: 'Cotton jeans',
- tag: 'Cottonjeans',
- price: 200.00,
- inCart: 0
- },
- {
- name: 'Blue blouse',
- tag: 'Blueblouse',
- price: 59.99,
- inCart: 0
- },
- {
- name: 'Off White blouse',
- tag: 'OffWhiteblouse',
- price: 73.99,
- inCart: 0
- },
- {
- name: 'White blouse',
- tag: 'Whiteblouse',
- price: 89.99,
- inCart: 0
- },
- {
- name: 'Brown trouser',
- tag: 'Browntrouser',
- price: 140.00,
- inCart: 0
- },
- {
- name: 'Cream trouser',
- tag: 'Creamtrouser',
- price: 59.00,
- inCart: 0
- },
- {
- name: 'Grey trouser',
- tag: 'Greytrouser',
- price: 201.00,
- inCart: 0
- }
-
-]; */
+function addCartActions(){
+
+var popupViews = document.querySelectorAll('.popup-view');
+var popupBtns = document.querySelectorAll('.popup-btn');
+var closeBtns = document.querySelectorAll('.close-btn');
+//javascript for quick view button
+var popup = function(popupClick) {
+ popupViews[popupClick].classList.add('active');
+}
+popupBtns.forEach((popupBtn, i) => {
+ popupBtn.addEventListener("click", () => {
+ popup(i);
+ });
+});
+//javascript for close button
+closeBtns.forEach((closeBtn) => {
+ closeBtn.addEventListener("click", () => {
+ popupViews.forEach((popupView) => {
+ popupView.classList.remove('active');
+ });
+ });
+});
+const carts = document.querySelectorAll('.add-cart-btn');
-for (let i = 0; i < carts.length; i++) {
+ for (let i = 0; i < carts.length; i++) {
+ console.log('1');
+ carts[i].addEventListener('click', () => {
+ console.log('2');
+ cardsNumbers(products[i]);
+ totalCost(products[i]);
+ })
+ }
+}
+
+/* for (let i = 0; i < carts.length; i++) {
carts[i].addEventListener('click', () => {
cardsNumbers(products[i]);
totalCost(products[i]);
});
-}
+} */
+
+
function onLoadCardsNumbers() {
let productNumber = localStorage.getItem('cardsNumbers');
diff --git a/views/cart.hbs b/views/cart.hbs
index 194e294..b4d4767 100644
--- a/views/cart.hbs
+++ b/views/cart.hbs
@@ -8,11 +8,11 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<title>Your Fashion</title>
- <link rel="stylesheet" type="text/css" href="css/style.css">
+
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
- <link rel="stylesheet" type="text/css" href="/style.css">
+ <link rel="stylesheet" href="/style.css">
<script src="/shopping-basket.js" async></script>
<script src="/payment.js"></script>
diff --git a/views/index.hbs b/views/index.hbs
index bc60c34..2b813a5 100644
--- a/views/index.hbs
+++ b/views/index.hbs
@@ -7,11 +7,10 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<title>Your Fashion</title>
- <link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
- <link rel="stylesheet" type="text/css" href="/style.css">
+ <link rel="stylesheet" href="/style.css">
@@ -94,6 +93,7 @@
<script src="/slides.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 src="/shopping-basket.js"></script>
diff --git a/views/kids-shoes.hbs b/views/kids-shoes.hbs
index 2e7322b..2fb3fa1 100644
--- a/views/kids-shoes.hbs
+++ b/views/kids-shoes.hbs
@@ -210,6 +210,7 @@
<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>
diff --git a/views/kids.hbs b/views/kids.hbs
index f650740..b36fb61 100644
--- a/views/kids.hbs
+++ b/views/kids.hbs
@@ -210,6 +210,7 @@
<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>
diff --git a/views/men-shoes.hbs b/views/men-shoes.hbs
index 04a5adb..d4fda80 100644
--- a/views/men-shoes.hbs
+++ b/views/men-shoes.hbs
@@ -209,6 +209,7 @@
<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>
diff --git a/views/women-shoes.hbs b/views/women-shoes.hbs
index 7f78fd1..5bc02bd 100644
--- a/views/women-shoes.hbs
+++ b/views/women-shoes.hbs
@@ -208,6 +208,7 @@
<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