-
Notifications
You must be signed in to change notification settings - Fork 0
/
checkout.js
97 lines (82 loc) · 3.47 KB
/
checkout.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
'use strict';
const summaryTotalPrice = document.querySelector('.summary-total-price');
const summaryVatPrice = document.querySelector('.summary-vat-price');
const summaryShippingPrice = document.querySelector('.summary-shipping-price');
const summaryGrandTotalPrice = document.querySelector(
'.summary-grand-total-price'
);
function summary() {
if (localStorage.getItem('totalCost') == null) {
summaryTotalPrice.textContent = '$ ' + 0;
summaryVatPrice.textContent = '$ ' + 0;
summaryShippingPrice.textContent = '$ ' + 0;
summaryGrandTotalPrice.textContent = '$ ' + 0;
} else {
const cost = parseInt(localStorage.getItem('totalCost'));
const shipping = 50;
summaryShippingPrice.textContent = '$ ' + shipping;
summaryTotalPrice.textContent = '$ ' + cost;
summaryVatPrice.textContent = '$ ' + ((20 / 100) * cost).toFixed(2);
summaryGrandTotalPrice.textContent = '$ ' + (cost + shipping);
}
}
const summaryUserProducts = document.querySelector('.summary-user-products');
function summaryImages() {
if (localStorage.getItem('storageItems') != null) {
console.log('localstorage is populated');
let savedProducts = localStorage.getItem('storageItems');
savedProducts = JSON.parse(savedProducts);
for (let i = 0; i < Object.keys(savedProducts).length; i++) {
let item = Object.keys(savedProducts)[i];
//Populate Summary with the saved localstorage items
let nodeDiv = document.createElement('div');
let nameAndPriceDiv = document.createElement('div');
let nodeName = document.createElement('h6');
nodeName.classList.add('cart-name');
let nodePrice = document.createElement('p');
let nodeImage = document.createElement('img');
nodeImage.src = savedProducts[item].image.mobile;
nodeImage.alt = 'product in cart named ' + savedProducts[item].name;
nodeImage.style.width = '70px';
let nodeQuantity = document.createElement('p');
nodeQuantity.classList.add('summary-quantity');
//createTextNode - get the name/price from JSON
let getName = document.createTextNode(savedProducts[item].slug);
let getPrice = document.createTextNode('$ ' + savedProducts[item].price);
let getQuantity = document.createTextNode(
'x ' + savedProducts[item].quantity
);
//appendChild() - link the nodes we created with the data from JSON
nodeName.appendChild(getName);
nodePrice.appendChild(getPrice);
nodeQuantity.appendChild(getQuantity);
nameAndPriceDiv.append(nodeName, nodePrice);
nameAndPriceDiv.classList.add('name-price');
//append to a div so that each product lives in a separate div
nodeDiv.append(nodeImage, nameAndPriceDiv, nodeQuantity);
nodeDiv.classList.add('new-product');
//append everything to the cart
summaryUserProducts.appendChild(nodeDiv);
}
} else {
console.log('localstorage is empty');
}
}
summaryImages();
summary();
//Check validity - user input & show error message
function checkInputValidity(elem) {
console.log(elem.checkValidity());
if (elem.checkValidity()) {
elem.previousElementSibling.style.color = '#101010';
elem.previousElementSibling.classList.remove('wrong-format-error');
} else {
elem.previousElementSibling.style.color = '#cd2c2c';
elem.previousElementSibling.classList.add('wrong-format-error');
}
}
const orderModal = document.querySelector('.order-modal');
function openModal() {
window.scrollTo(0, 0);
orderModal.style.display = 'block';
}