-
Notifications
You must be signed in to change notification settings - Fork 0
/
cart.js
110 lines (97 loc) · 4.08 KB
/
cart.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
// ensure page loads
if(document.readyState == 'loading'){
document.addEventListener('DOMContentLoaded', ready)
} else {
ready()
}
function ready(){
var removeCartItemButtons = document.getElementsByClassName('btn-danger')
for (var i = 0; i < removeCartItemButtons.length; i++){
var button = removeCartItemButtons[i]
button.addEventListener('click', removeCartItem)
}
var quantityInputs = document.getElementsByClassName('cart-quantity-input')
for (var i = 0; i < quantityInputs.length; i++){
var input = quantityInputs[i]
input.addEventListener('change', quantityChanged)
}
var addToCartButtons = document.getElementsByClassName('cartbtn')
for (var i = 0; i < addToCartButtons.length; i++){
var button = addToCartButtons[i]
button.addEventListener('click', addToCartClicked)
}
document.getElementsByClassName('btn-purchase')[0].addEventListener('click', purchaseClicked)
}
function purchaseClicked(){
alert("Thank you for your purchase")
var cartItems = document.getElementsByClassName('cart-items')[0]
while(cartItems.hasChildNodes()){
cartItems.removeChild(cartItems.firstChild)
}
updateCartTotal()
}
function removeCartItem(event){
var buttonClicked = event.target
// cart-quantity parent of btn-danger, cart-row parent of cart-quantity
buttonClicked.parentElement.parentElement.remove()
updateCartTotal()
}
function quantityChanged(event){
var input = event.target
if(isNaN(input.value) || input.value <= 0){
input.value = 1
}
updateCartTotal()
}
function addToCartClicked(event){
var button = event.target
// shop-item-details parent of cartbtn, shop-item parent of shop-item-details
var shopItem = button.parentElement.parentElement
var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText
var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText
var imageSrc = shopItem.getElementsByClassName('shop-item-image')[0].src
// console.log(title, price, imageSrc)
addItemToCart(title, price, imageSrc)
updateCartTotal()
}
function addItemToCart(title, price, imageSrc){
var cartRow = document.createElement('div')
cartRow.classList.add('cart-row')
var cartItems = document.getElementsByClassName('cart-items')[0]
var cartItemNames = cartItems.getElementsByClassName('cart-item-title')
for (var i = 0; i < cartItemNames.length; i++){
if(cartItemNames[i].innerText == title){
alert("This item is already added to the cart")
return
}
}
var cartRowcontents = `
<div class="cart-item cart-column">
<img class=cart-item-image src="${imageSrc}">
<span class="cart-item-title">${title}</span>
</div>
<span class="cart-price cart-column">${price}</span>
<div class="cart-quantity cart-column">
<input class="cart-quantity-input" type="number" value="1">
<button class="btn btn-danger" type="button">REMOVE</button>
</div>`
cartRow.innerHTML = cartRowcontents
cartItems.append(cartRow)
cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click', removeCartItem)
cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged)
}
function updateCartTotal() {
var cartItemContainer = document.getElementsByClassName('cart-items')[0]
var cartRows = cartItemContainer.getElementsByClassName('cart-row')
var total = 0
for (var i = 0; i < cartRows.length; i++) {
var cartRow = cartRows[i] // whichever row we're on in array
var priceElement = cartRow.getElementsByClassName('cart-price')[0]
var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0]
var price = parseFloat(priceElement.innerText.replace('$', ''))
var quantity = quantityElement.value
total = total + (price * quantity)
}
total = (Math.round(total * 100) / 100).toFixed(2)
document.getElementsByClassName('cart-total-price')[0].innerText = '$' + total
}