-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
62 lines (55 loc) · 1.87 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
let bagItems = [];
onLoad();
console.log(bagItems);
function addToBag(itemId) {
bagItems.push(itemId);
localStorage.setItem('bagItems', JSON.stringify(bagItems));
displayBagIcon();
console.log('Item added to bag!');
}
function displayBagIcon() {
let bagItemCount = document.querySelector('.cart-count');
if (bagItems.length > 0) {
// console.log('I am here');
bagItemCount.style.visibility = 'visible';
bagItemCount.innerText = bagItems.length;
} else {
bagItemCount.style.visibility = 'hidden';
}
}
// function updateCartCount(){
// displayBagIcon();
// }
function displayItemOnHomePage() {
let itemsContainerElement = document.querySelector('.items-container');
if (!itemsContainerElement) {
return;
}
let innerhtml = '';
items.forEach(item => {
innerhtml += `
<div class="item-container">
<img src="${item.image}" alt="item-image">
<div class="rating">${item.rating.stars}⭐ | ${item.rating.count}</div>
<br>
<div class="company-name">${item.company}</div>
<div class="item-name">${item.item_name}</div>
<div class="price">
<span class="current-price">Rs. ${item.current_price}
</span>
<span class="original-price">Rs. ${item.original_price}
</span>
<span class="discount">(${item.discount_percentage}% OFF)</span>
</div>
<button class="add-bag-btn" onclick="addToBag(${item.id}); ">Add To Bag</button>
</div>`
});
itemsContainerElement.innerHTML = innerhtml;
}
function onLoad() {
let bagItemStr = localStorage.getItem('bagItems');
bagItems = bagItemStr ? JSON.parse(bagItemStr) : [];
displayItemOnHomePage();
displayBagIcon();
// updateCartCount();
}