diff --git a/public/product-cards.js b/public/product-cards.js
index 9872568a6a269b82d52755c4985a6a8363c4c2a8..f32733109022a107af887685548b9cba4d87a643 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 ef7ec6ae83482bf381ba9ad48bfee5fa6850559c..c2013d17cbebb651e47f0cee5e7021604dab6662 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 194e294c593f291367b4683121569f9e825dc046..b4d476725b37e7aa31bd6668b92542547bc6011e 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 bc60c344f14fdee6f96eab8b7655506a56efc18e..2b813a59acba5124a694e5ca2fb8dac0d147ae41 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 2e7322ba1dacc75764d61dc7a2fa735fe6d44487..2fb3fa1b080896de0d796f8877cf1d85aa7a4239 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 f65074007e142bb759d53f2619f7242aa28d3798..b36fb614a7fe50a5ac68d3c7c5632834232c7362 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 04a5adb40b8d1c67f624b5a57b2edfcb0ed7fdfc..d4fda80ae2bfdabc1eb11b881237a10daffaddbb 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 7f78fd1b9b351410ee8ccc4f11c699d448a8f6c3..5bc02bd053e23fb3d3274bb66f7fac94eb0f85cf 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>