Skip to content

Commit 25b1189

Browse files
Loule95450Loule95450
committed
🗑 - Add trash button on cart
1 parent 42d2e22 commit 25b1189

4 files changed

Lines changed: 49 additions & 59 deletions

File tree

‎img/courses/php_8.png‎

63.8 KB
Loading

‎index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,10 @@
1111
rel="stylesheet">
1212
<link rel="stylesheet"
1313
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
14+
<script src="https://cdn.rawgit.com/adriancooney/console.image/c9e6d4fd/console.image.min.js"></script>
1415
</head>
1516
<body>
17+
<div id="notification_container"></div>
1618
<header id="header" class="header">
1719
<div class="container">
1820
<div class="row">

‎js/app.js‎

Lines changed: 44 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,16 @@
11
// On document load, execute the following code
2-
document.addEventListener('DOMContentLoaded', function() {
3-
showAllProducts('.courses__container', COURSES);
4-
5-
6-
for (var i = 0; i < COURSES.length; i++) { // Loop through all courses
7-
8-
if (localStorage.getItem(`inCart-${COURSES[i].id}`)) {
9-
document.querySelector('#cart-table tbody').innerHTML += `
10-
<tr data-id="${COURSES[i].id}">
11-
<td><img src="img/courses/${COURSES[i].img}" alt=""></td>
12-
<td>${COURSES[i].title}</td>
13-
<td>${COURSES[i].price}€</td>
14-
<td class="${COURSES[i].slug}-inCart">${JSON.parse(localStorage.getItem(`inCart-${COURSES[i].id}`)).productsInCart}</td>
15-
<td><i class="fa fa-trash" aria-hidden="true"></i></td>
16-
</tr>
17-
`;
18-
}
19-
}
2+
document.addEventListener('DOMContentLoaded', function () {
3+
console.image('https://avatars.githubusercontent.com/u/91029631')
204

21-
// On button click add product to cart
22-
document.querySelector('.courses__container').addEventListener('click', function (e) {
23-
if (e.target.classList.contains('add-to-cart')) { // If the target is the button
24-
addToCart(e.target.dataset.id); // Add to cart
5+
showAllProducts('.courses__container', COURSES);
256

26-
let parent = e.target.parentNode.parentNode;
277

28-
let stock = parent.getElementsByClassName( 'stock' );
29-
}
30-
});
8+
for (var i = 0; i < COURSES.length; i++) { // Loop through all courses
319

32-
document.querySelector('.empty-cart').addEventListener('click', function (e) {
33-
localStorage.clear();
34-
document.querySelector('#cart-table tbody').remove();
35-
});
10+
if (localStorage.getItem(`inCart-${COURSES[i].id}`)) {
11+
productItemsInCart(COURSES[i], JSON.parse(localStorage.getItem(`inCart-${COURSES[i].id}`)));
12+
}
13+
}
3614
});
3715

3816
function addToCart(id) {
@@ -64,32 +42,28 @@ function addToCart(id) {
6442
cart = { "productsInCart": 1 }; // Create the product cart
6543
localStorage.setItem(productCartName, JSON.stringify(cart)); // Set the product cart
6644

67-
document.querySelector('#cart-table tbody').innerHTML += `
68-
<tr data-id="${product.id}">
69-
<td><img src="img/courses/${product.img}" alt="${product.title} image"></td>
70-
<td>${product.title}</td>
71-
<td>${product.price}€</td>
72-
<td class="${product.slug}-inCart">${cart.productsInCart}</td>
73-
<td><i class="fa fa-trash" aria-hidden="true"></i></td>
74-
</tr>
75-
`;
45+
productItemsInCart(product, cart);
7646
}
7747

7848
// Show product on cart page
7949

8050
// Show notification
8151
notification(`Vous avez ajouté ${product.title} au panier`); // Run notification function
8252

83-
// Update stock product
84-
COURSES[product.id].stock--;
85-
let stock = parent.getElementsByClassName( 'stock' );
86-
let changeStock = stock.stock = -1;
53+
// ---
8754

55+
if (e.target.classList.contains('add-to-cart')){
56+
57+
}
58+
8859

89-
// Update stock product in DOM
60+
// ---
61+
62+
// Update stock product
63+
COURSES[product.id].stock--;
64+
let stock = parent.getElementsByClassName('stock');
65+
stock = stock - 1;
9066

91-
// Recupere les stocks (dans courses.js) puis tu enleves 1 a chaque fois que tu clique sur le bouton. Donc en bref,
92-
// Tu vas juste recupere les données de stock et tu va les modifiers pour que stock perd 1. puis tu va le mettre a jour.
9367

9468
}
9569
//Pop up notification
@@ -139,18 +113,31 @@ function showAllProducts(querySelector, products) {
139113
}
140114
}
141115

142-
143-
144-
145-
146-
147-
148-
149-
116+
function productItemsInCart(product, cart) {
117+
document.querySelector('#cart-table tbody').innerHTML += `
118+
<tr data-id="${product.id}" class="product-${product.id}">
119+
<td><img src="img/courses/${product.img}" alt="${product.title} image"></td>
120+
<td>${product.title}</td>
121+
<td>${product.price}€</td>
122+
<td class="${product.slug}-inCart">${cart.productsInCart}</td>
123+
<td class="trash"><i class="fa fa-trash" aria-hidden="true"></i></td>
124+
</tr>
125+
`;
126+
}
150127

151128
//vider le panier
152129

153-
document.querySelector('.empty-cart').addEventListener('click', function (e) {
154-
localStorage.clear();
155-
document.querySelector('#').remove();
130+
// On button click add product to cart
131+
document.addEventListener('click', function (e) {
132+
if(e.target.classList.contains('add-to-cart')){
133+
addToCart(e.target.dataset.id); // Add to cart
134+
} else if(e.target.classList.contains('#empty-cart')) {
135+
localStorage.clear();
136+
document.querySelector('#cart-table tbody').innerHTML = "";
137+
} else if(e.target.classList.contains('fa-trash')) {
138+
let idTrash = e.target.parentNode.parentNode.dataset.id;
139+
140+
localStorage.removeItem(`inCart-${idTrash}`);
141+
document.querySelector(`.${e.target.parentNode.parentNode.classList[0]}`).remove();
142+
}
156143
});

‎js/search.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// search bar
22

3-
document.querySelector('input').addEventListener('input', function (e) {
3+
document.querySelector('form.search-form input').addEventListener('input', function (e) {
44

55
var input, filter;
66
input = e.target.value;
@@ -21,4 +21,5 @@ document.querySelector('input').addEventListener('input', function (e) {
2121
} else {
2222
showAllProducts('.courses__container', COURSES);
2323
}
24-
});
24+
});
25+

0 commit comments

Comments
 (0)