-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
118 lines (96 loc) · 3.74 KB
/
main.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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
let cartIcon = document.querySelector('#cart-icon')
let cart = document.querySelector('.cart')
let closeCart = document.querySelector('#close-cart')
cartIcon.onclick = () => {
cart.classList.add('active')
}
closeCart.onclick = () => {
cart.classList.remove('active')
}
if(document.readyState == 'loading'){
document.addEventListener('DOMContentLoaded', ready)
} else {
ready()
}
function ready(){
var removeCartButtons = document.getElementsByClassName('cart-remove')
for (let i = 0; i < removeCartButtons.length; i++){
removeCartButtons[i].addEventListener('click', removeCartItem)
}
var quantityInputs = document.getElementsByClassName('cart-quantity');
for(let i = 0; i < quantityInputs.length; i++){
quantityInputs[i].addEventListener('change', quantityChanged)
}
var addCart = document.getElementsByClassName('add-cart')
for (let i = 0; i < addCart.length; i++){
addCart[i].addEventListener('click', addButtonClicked)
}
document.getElementsByClassName('btn-buy')[0].addEventListener('click', buyButtonClicked)
}
function buyButtonClicked(){
alert('Sizin Sifariş yerləşdirildi')
var cartContent = document.getElementsByClassName('cart-content')[0];
while(cartContent.hasChildNodes()){
cartContent.removeChild(cartContent.firstChild)
}
updatetotal();
}
function removeCartItem(){
this.parentElement.remove();
updatetotal();
}
function quantityChanged(event) {
var input = event.target;
if(isNaN(input.value) || input.value < 1){
input.value = 1;
}
updatetotal();
}
function addButtonClicked(event) {
var button = event.target
var shopProducts = button.parentElement;
var title = shopProducts.getElementsByClassName('product-title')[0].innerText;
var price = shopProducts.getElementsByClassName('price')[0].innerText;
var productImg = shopProducts.getElementsByClassName('product-img')[0].src;
addProductToCart(title, price, productImg);
updatetotal();
}
function addProductToCart(title, price, productImg){
var cartShopBox = document.createElement('div');
cartShopBox.classList.add('cart-box');
var cartItems = document.getElementsByClassName('cart-content')[0];
var cartItemsName = document.getElementsByClassName('cart-product-title');
for(let i =0; i < cartItemsName.length; i++){
if(cartItemsName[i].innerText == title){
alert('Bu məhsulu əlavə etmisiniz');
return;
}
}
var cartBoxContent = `
<img src="${productImg}" alt="" class="cart-img">
<div class="detail-box">
<div class="cart-product-title">${title}</div>
<div class="cart-price">${price}</div>
<input type="number" value="1" class="cart-quantity">
</div>
<i class='bx bxs-trash-alt cart-remove'></i>`;
cartShopBox.innerHTML = cartBoxContent;
cartItems.append(cartShopBox)
cartShopBox.getElementsByClassName('cart-remove')[0].addEventListener('click', removeCartItem)
cartShopBox.getElementsByClassName('cart-quantity')[0].addEventListener('change', quantityChanged)
}
function updatetotal(){
var cartContent = document.getElementsByClassName('cart-content')[0];
var cartBoxes = cartContent.getElementsByClassName('cart-box');
var total = 0;
for(let i =0; i < cartBoxes.length; i++){
var cartBox = cartBoxes[i];
var priceElement = cartBox.getElementsByClassName('cart-price')[0];
var quantityElement = cartBox.getElementsByClassName('cart-quantity')[0];
var price = parseFloat(priceElement.innerText.replace('$', ""));
var quantity = quantityElement.value;
total = total + (price * quantity)
}
total = Math.round(total * 100) / 100
document.getElementsByClassName('total-price')[0].innerText = '$' + total;
}