Skip to content

Commit 42d2e22

Browse files
Loule95450Loule95450
committed
🔍 - Update Search
1 parent 3da59ad commit 42d2e22

2 files changed

Lines changed: 175 additions & 29 deletions

File tree

‎js/app.js‎

Lines changed: 151 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,156 @@
1-
for (var i = 0; i < COURSES.length; i++) {
2-
console.log(COURSES[i]); // Console log all courses
3-
4-
// Show all courses in HTML file
5-
document.querySelector('.courses__container').innerHTML += `
6-
<div class="course__item">
7-
<figure class="course_img">
8-
<img src="img/courses/${COURSES[i].img}">
9-
</figure>
10-
<div class="info__card">
11-
<h4>${COURSES[i].title}</h4>
12-
<figure class="mark m_4">
13-
<img src="img/rates.png">
14-
</figure>
15-
<p>
16-
<span class="price">${COURSES[i].initial_price} €</span>
17-
<span class="discount">${COURSES[i].price} €</span>
18-
</p>
19-
<p>
20-
Disponible: <span class="stock">${COURSES[i].stock}</span>
21-
</p>
22-
<a href="#" class="add-to-cart" data-id="${COURSES[i].id}"><i class="fa
23-
fa-cart-plus"></i>Ajouter au panier</a>
1+
// 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+
}
20+
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
25+
26+
let parent = e.target.parentNode.parentNode;
27+
28+
let stock = parent.getElementsByClassName( 'stock' );
29+
}
30+
});
31+
32+
document.querySelector('.empty-cart').addEventListener('click', function (e) {
33+
localStorage.clear();
34+
document.querySelector('#cart-table tbody').remove();
35+
});
36+
});
37+
38+
function addToCart(id) {
39+
console.log(`Tu as ajouté le produit ${id}`); // Console log the product id
40+
41+
// Get the product
42+
for (var i = 0; i < COURSES.length; i++) { // Loop through all courses
43+
if (COURSES[i].id == id) { // If the id matches the id of the product
44+
var product = COURSES[i]; // Set the product to the current course
45+
break; // Stop the loop
46+
}
47+
}
48+
49+
// Check if product is already in cart
50+
const productCartName = `inCart-${product.id}`; // Set the product cart name
51+
let cart = localStorage.getItem(productCartName); // Get the product cart
52+
if (cart) { // If the product cart exists
53+
// Add product to cart
54+
cart = JSON.parse(cart); // Parse the product cart
55+
cart.productsInCart++; // Add 1 to the product in cart
56+
localStorage.setItem(productCartName, JSON.stringify(cart)); // Set the product cart
57+
58+
// Update the cart
59+
// console.log(product.slug + '-inCart');
60+
document.querySelector(`.${product.slug}-inCart`).innerHTML = cart.productsInCart; // Update the product in cart
61+
62+
} else { // If the product cart doesn't exist
63+
// Add product to cart
64+
cart = { "productsInCart": 1 }; // Create the product cart
65+
localStorage.setItem(productCartName, JSON.stringify(cart)); // Set the product cart
66+
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+
`;
76+
}
77+
78+
// Show product on cart page
79+
80+
// Show notification
81+
notification(`Vous avez ajouté ${product.title} au panier`); // Run notification function
82+
83+
// Update stock product
84+
COURSES[product.id].stock--;
85+
let stock = parent.getElementsByClassName( 'stock' );
86+
let changeStock = stock.stock = -1;
87+
88+
89+
// Update stock product in DOM
90+
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.
93+
94+
}
95+
//Pop up notification
96+
97+
function notification(message) { // Function to show notification
98+
// Show notification
99+
document.querySelector('#notification_container').innerHTML += `
100+
<div class="content">
101+
<img src="https://img.icons8.com/color/48/000000/info.png" alt="">
102+
<p>${message}</p>
103+
</div>
104+
`;
105+
106+
setTimeout(function () { // Hide notification after 3 seconds
107+
document.querySelector('#notification_container .content').remove(); // Remove notification
108+
}, 3000);
109+
}
110+
111+
function productItems(querySelector, product) {
112+
document.querySelector(querySelector).innerHTML += `
113+
<div class="course__item">
114+
<figure class="course_img">
115+
<img src="img/courses/${product.img}">
116+
</figure>
117+
<div class="info__card">
118+
<h4>${product.title}</h4>
119+
<figure class="mark m_${product.mark}">
120+
<img src="img/rates.png">
121+
</figure>
122+
<p>
123+
<span class="price">${product.initial_price} €</span>
124+
<span class="discount">${product.price} €</span>
125+
</p>
126+
<p>
127+
Disponible: <span class="stock">${product.stock}</span>
128+
</p>
129+
<a href="#" class="add-to-cart" data-id="${product.id}"><i class="fa
130+
fa-cart-plus"></i>Ajouter au panier</a>
131+
</div>
24132
</div>
25-
</div>
26-
`;
133+
`;
27134
}
28135

29-
// On button click add product to cart
30-
document.querySelector('.courses__container').addEventListener('click', function (e) {
31-
if(e.target.classList.contains('add-to-cart')) {
32-
console.log(`Tu as cliqué sur le produit ${e.target.dataset.id}`);
136+
function showAllProducts(querySelector, products) {
137+
for (var i = 0; i < products.length; i++) {
138+
productItems(querySelector, products[i]);
33139
}
140+
}
141+
142+
143+
144+
145+
146+
147+
148+
149+
150+
151+
//vider le panier
152+
153+
document.querySelector('.empty-cart').addEventListener('click', function (e) {
154+
localStorage.clear();
155+
document.querySelector('#').remove();
34156
});

‎js/search.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// search bar
2+
3+
document.querySelector('input').addEventListener('input', function (e) {
4+
5+
var input, filter;
6+
input = e.target.value;
7+
filter = input.toUpperCase();
8+
9+
document.querySelector("#courses-list .courses__container").innerHTML = "";
10+
11+
if(input){
12+
for(let i = 0; i < COURSES.length; i++){
13+
if(COURSES[i].title.toUpperCase().includes(filter)){
14+
productItems('#courses-list .courses__container', COURSES[i]);
15+
16+
document.querySelector('#no_course').classList.add('hidden');
17+
} else if(!document.querySelector("#courses-list .courses__container").innerHTML){
18+
document.querySelector('#no_course').classList.remove('hidden');
19+
}
20+
}
21+
} else {
22+
showAllProducts('.courses__container', COURSES);
23+
}
24+
});

0 commit comments

Comments
 (0)