Skip to content

Commit 47dec16

Browse files
ibrahimmoalimibrahimmoalim
committed
regenerate HTML when updating delivery option
1 parent 89e8b94 commit 47dec16

File tree

1 file changed

+147
-140
lines changed

1 file changed

+147
-140
lines changed

‎basic-projects/amazon-project/scripts/checkout.js‎

Lines changed: 147 additions & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -5,187 +5,194 @@ import deliveryOptions from '../data/delivery-options.js';
55

66

77

8-
let cartSummaryHTML = ''
9-
10-
cart.forEach((cartItem) => {
11-
// get productId out of cartItem
12-
const {productId} = cartItem;
13-
14-
let matchingProduct;
15-
// get the full product just using id
16-
products.forEach((product) => {
17-
if (product.id === productId){
18-
matchingProduct = product;
19-
}
20-
});
8+
function renderOrderSummary(){
219

22-
const deliveryOptionId = cartItem.deliveryOptionId;
10+
let cartSummaryHTML = ''
2311

24-
let deliveryOption;
12+
cart.forEach((cartItem) => {
13+
// get productId out of cartItem
14+
const {productId} = cartItem;
2515

26-
deliveryOptions.forEach((option) => {
27-
if (option.id === deliveryOptionId){
28-
deliveryOption = option
29-
}
30-
});
16+
let matchingProduct;
17+
// get the full product just using id
18+
products.forEach((product) => {
19+
if (product.id === productId){
20+
matchingProduct = product;
21+
}
22+
});
3123

24+
const deliveryOptionId = cartItem.deliveryOptionId;
3225

26+
let deliveryOption;
3327

28+
deliveryOptions.forEach((option) => {
29+
if (option.id === deliveryOptionId){
30+
deliveryOption = option
31+
}
32+
});
3433

35-
cartSummaryHTML += `
36-
<div class="cart-item-container js-cart-item-${matchingProduct.id}">
37-
<div class="delivery-date">
38-
Delivery date: ${deliveryOption.date}
39-
</div>
4034

41-
<div class="cart-item-details-grid">
42-
<img class="product-image"
43-
src="${matchingProduct.image}">
4435

45-
<div class="cart-item-details">
46-
<div class="product-name">
47-
${matchingProduct.name}
48-
</div>
49-
<div class="product-price">
50-
$${formatCurrency(matchingProduct.priceCents)}
51-
</div>
52-
<div class="product-quantity">
53-
<span>
54-
Quantity: <span class="quantity-label js-quantity-label-${matchingProduct.id}">
55-
${cartItem.quantity}</span>
56-
</span>
57-
<span class="update-quantity-link link-primary js-link-primary js-update-button" data-item-id="${matchingProduct.id}">
58-
Update
59-
</span>
60-
<input class="input-quantity js-input-quantity-${matchingProduct.id}"
61-
type="number" min="1">
62-
<span class="save-quantity link-primary js-save-link" data-item-id="${matchingProduct.id}">
63-
Save </span>
64-
<span class="delete-quantity-link link-primary js-delete-button" data-item-id="${matchingProduct.id}">
65-
Delete
66-
</span>
67-
</div>
36+
37+
cartSummaryHTML += `
38+
<div class="cart-item-container js-cart-item-${matchingProduct.id}">
39+
<div class="delivery-date">
40+
Delivery date: ${deliveryOption.date}
6841
</div>
69-
<div class="delivery-options">
70-
<div class="delivery-options-title">
71-
Choose a delivery option:
42+
43+
<div class="cart-item-details-grid">
44+
<img class="product-image"
45+
src="${matchingProduct.image}">
46+
47+
<div class="cart-item-details">
48+
<div class="product-name">
49+
${matchingProduct.name}
50+
</div>
51+
<div class="product-price">
52+
$${formatCurrency(matchingProduct.priceCents)}
53+
</div>
54+
<div class="product-quantity">
55+
<span>
56+
Quantity: <span class="quantity-label js-quantity-label-${matchingProduct.id}">
57+
${cartItem.quantity}</span>
58+
</span>
59+
<span class="update-quantity-link link-primary js-link-primary js-update-button" data-item-id="${matchingProduct.id}">
60+
Update
61+
</span>
62+
<input class="input-quantity js-input-quantity-${matchingProduct.id}"
63+
type="number" min="1">
64+
<span class="save-quantity link-primary js-save-link" data-item-id="${matchingProduct.id}">
65+
Save </span>
66+
<span class="delete-quantity-link link-primary js-delete-button" data-item-id="${matchingProduct.id}">
67+
Delete
68+
</span>
69+
</div>
70+
</div>
71+
<div class="delivery-options">
72+
<div class="delivery-options-title">
73+
Choose a delivery option:
74+
</div>
75+
${deliveryOptionsHTML(matchingProduct, cartItem)}
7276
</div>
73-
${deliveryOptionsHTML(matchingProduct, cartItem)}
7477
</div>
7578
</div>
76-
</div>
77-
`
78-
});
79+
`
80+
});
7981

80-
document.querySelector('.js-order-summary')
81-
.innerHTML = cartSummaryHTML;
82+
document.querySelector('.js-order-summary')
83+
.innerHTML = cartSummaryHTML;
8284

8385

84-
function deliveryOptionsHTML(matchingProduct, cartItem){
85-
let html = ''
86+
function deliveryOptionsHTML(matchingProduct, cartItem){
87+
let html = ''
8688

87-
deliveryOptions.forEach((deliveryOption) => {
89+
deliveryOptions.forEach((deliveryOption) => {
8890

89-
const price = deliveryOption.priceCents === 0 ? 'FREE' : `$${formatCurrency(deliveryOption.priceCents)} -`;
91+
const price = deliveryOption.priceCents === 0 ? 'FREE' : `$${formatCurrency(deliveryOption.priceCents)} -`;
9092

91-
const isChecked = deliveryOption.id === cartItem.deliveryOptionId
93+
const isChecked = deliveryOption.id === cartItem.deliveryOptionId
9294

93-
html += `
94-
95-
<div class="delivery-option js-delivery-option"
96-
data-product-id="${matchingProduct.id}"
97-
data-delivery-option-id="${deliveryOption.id}">
98-
<input type="radio"
99-
${isChecked ? 'checked' : ''}
100-
class="delivery-option-input"
101-
name="delivery-option-${matchingProduct.id}">
102-
<div>
103-
<div class="delivery-option-date">
104-
${deliveryOption.date}
105-
</div>
106-
<div class="delivery-option-price">
107-
${price} Shipping
95+
html += `
96+
97+
<div class="delivery-option js-delivery-option"
98+
data-product-id="${matchingProduct.id}"
99+
data-delivery-option-id="${deliveryOption.id}">
100+
<input type="radio"
101+
${isChecked ? 'checked' : ''}
102+
class="delivery-option-input"
103+
name="delivery-option-${matchingProduct.id}">
104+
<div>
105+
<div class="delivery-option-date">
106+
${deliveryOption.date}
107+
</div>
108+
<div class="delivery-option-price">
109+
${price} Shipping
110+
</div>
108111
</div>
109112
</div>
110-
</div>
111-
`
113+
`
112114

113-
})
114-
return html;
115-
};
115+
})
116+
return html;
117+
};
116118

117119

118-
document.querySelectorAll('.js-delete-button')
119-
.forEach((button) => {
120-
button.addEventListener('click', () => {
121-
const {itemId} = button.dataset;
122-
removeFromCart(itemId)
120+
document.querySelectorAll('.js-delete-button')
121+
.forEach((button) => {
122+
button.addEventListener('click', () => {
123+
const {itemId} = button.dataset;
124+
removeFromCart(itemId)
123125

124-
const container = document.querySelector(`.js-cart-item-${itemId}`)
125-
container.remove();
126-
updateCartQuantity();
127-
})
128-
});
126+
const container = document.querySelector(`.js-cart-item-${itemId}`)
127+
container.remove();
128+
updateCartQuantity();
129+
})
130+
});
129131

130132

131-
function updateCartQuantity(){
132-
133-
const checkoutHeader = document.querySelector('.js-return-to-home-link')
134-
checkoutHeader.innerHTML = `${calculateCartQuantity()} items`;
135-
};
136-
updateCartQuantity();
133+
function updateCartQuantity(){
134+
135+
const checkoutHeader = document.querySelector('.js-return-to-home-link')
136+
checkoutHeader.innerHTML = `${calculateCartQuantity()} items`;
137+
};
138+
updateCartQuantity();
137139

138140

139-
document.querySelectorAll(`.js-update-button`)
140-
.forEach((button) => {
141-
button.addEventListener('click', () => {
142-
const {itemId} = button.dataset;
141+
document.querySelectorAll(`.js-update-button`)
142+
.forEach((button) => {
143+
button.addEventListener('click', () => {
144+
const {itemId} = button.dataset;
143145

144-
const container = document.querySelector(`.js-cart-item-${itemId}`)
146+
const container = document.querySelector(`.js-cart-item-${itemId}`)
145147

146-
container.classList.add('is-editing-quantity');
148+
container.classList.add('is-editing-quantity');
147149

148-
const input = document.querySelector(`.js-input-quantity-${itemId}`)
149-
input.select();
150-
input.addEventListener('keydown', (event) => {
151-
if (event.key === 'Enter'){
152-
saveUpdatedQuantity(itemId);
153-
}
150+
const input = document.querySelector(`.js-input-quantity-${itemId}`)
151+
input.select();
152+
input.addEventListener('keydown', (event) => {
153+
if (event.key === 'Enter'){
154+
saveUpdatedQuantity(itemId);
155+
}
156+
})
154157
})
155-
})
156-
});
158+
});
157159

158160

159-
function saveUpdatedQuantity(itemId){
160-
const container = document.querySelector(`.js-cart-item-${itemId}`);
161-
container.classList.remove('is-editing-quantity');
161+
function saveUpdatedQuantity(itemId){
162+
const container = document.querySelector(`.js-cart-item-${itemId}`);
163+
container.classList.remove('is-editing-quantity');
162164

163165

164-
const quantityInput = document.querySelector(`.js-input-quantity-${itemId}`)
166+
const quantityInput = document.querySelector(`.js-input-quantity-${itemId}`)
165167

166-
const newQuantity = Number(quantityInput.value);
168+
const newQuantity = Number(quantityInput.value);
167169

168-
updateQuantityLabel(newQuantity, itemId);
169-
updateCartQuantity();
170-
171-
quantityInput.value = null;
172-
};
170+
updateQuantityLabel(newQuantity, itemId);
171+
updateCartQuantity();
172+
173+
quantityInput.value = null;
174+
};
173175

174176

175-
document.querySelectorAll('.js-save-link')
176-
.forEach((link) => {
177-
const {itemId} = link.dataset;
178-
link.addEventListener('click', () => {
177+
document.querySelectorAll('.js-save-link')
178+
.forEach((link) => {
179+
const {itemId} = link.dataset;
180+
link.addEventListener('click', () => {
179181

180-
saveUpdatedQuantity(itemId);
181-
182-
})
183-
});
182+
saveUpdatedQuantity(itemId);
183+
184+
})
185+
});
186+
187+
document.querySelectorAll('.js-delivery-option')
188+
.forEach((element) => {
189+
element.addEventListener('click', () => {
190+
const {productId, deliveryOptionId} = element.dataset;
191+
updateDeliveryOption(productId, deliveryOptionId);
192+
// regenerate the whole page, to update delivery data automatically when delivery option is selected
193+
renderOrderSummary();
194+
})
195+
});
196+
};
184197

185-
document.querySelectorAll('.js-delivery-option')
186-
.forEach((element) => {
187-
element.addEventListener('click', () => {
188-
const {productId, deliveryOptionId} = element.dataset;
189-
updateDeliveryOption(productId, deliveryOptionId);
190-
})
191-
});
198+
renderOrderSummary();

0 commit comments

Comments
 (0)