-
Notifications
You must be signed in to change notification settings - Fork 0
/
store.js
109 lines (99 loc) · 4.29 KB
/
store.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
//Checking if the page is loaded correctly to be able to access the DOM elements
if (document.readyState == 'loading') {
document.addEventListener('DOMContentLoaded', ready);
} else {
ready();
}
function ready() {
//Remove items from the cart
var removeCartItemButtons = document.getElementsByClassName('btn-danger')
for (var i = 0; i < removeCartItemButtons.length; i++) {
var button = removeCartItemButtons[i];
button.addEventListener('click', removeCartItem);
}
//Item quantity change
var quantityInputs = document.getElementsByClassName('cart-quantity-input');
for (var i = 0; i < quantityInputs.length; i++) {
var input = quantityInputs[i];
input.addEventListener('change', quantityChanged);
}
//Add selected item to cart
var addToCartButtons = document.getElementsByClassName('shop-item-button');
for (var i = 0; i < addToCartButtons.length; i++) {
var button = addToCartButtons[i];
button.addEventListener('click', addToCartClicked);
}
document.getElementsByClassName('btn-purchase')[0].addEventListener('click', purchaseClicked);
}
//On click of 'purchase' button, load the shop form page
function purchaseClicked() {
window.location.href = 'shopform.html';
}
//When the remove button is clicked, delete elements and update the total amount
function removeCartItem(event) {
var buttonClicked = event.target;
buttonClicked.parentElement.parentElement.remove();
updateCartTotal();
}
//Item quantity input
function quantityChanged(event) {
var input = event.target;
if (isNaN(input.value) || input.value <= 0) {
input.value = 1;
}
updateCartTotal();
}
//When add item is clicked, the function fetches information from the items
function addToCartClicked(event) {
console.log("addToCartClicked")
var button = event.target;
var shopItem = button.parentElement.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;
addItemToCart(title, price, imageSrc);
updateCartTotal();
}
//Information is added to the cart section, styling and html is updated according to the content
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);
}
//Operations to update the cart total amount
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];
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;
document.getElementsByClassName('cart-total-price')[0].innerText = '£' + total;
}