Skip to content

Commit 4f26a64

Browse files
ibrahimmoalimibrahimmoalim
committed
move order summary to its own file
1 parent 47dec16 commit 4f26a64

File tree

3 files changed

+197
-196
lines changed

3 files changed

+197
-196
lines changed

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

Lines changed: 1 addition & 196 deletions
Original file line numberDiff line numberDiff line change
@@ -1,198 +1,3 @@
1-
import {cart, removeFromCart, calculateCartQuantity, updateQuantityLabel, updateDeliveryOption} from '../data/cart.js'
2-
import {products} from '../data/products.js'
3-
import formatCurrency from './utils/price.js';
4-
import deliveryOptions from '../data/delivery-options.js';
5-
6-
7-
8-
function renderOrderSummary(){
9-
10-
let cartSummaryHTML = ''
11-
12-
cart.forEach((cartItem) => {
13-
// get productId out of cartItem
14-
const {productId} = cartItem;
15-
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-
});
23-
24-
const deliveryOptionId = cartItem.deliveryOptionId;
25-
26-
let deliveryOption;
27-
28-
deliveryOptions.forEach((option) => {
29-
if (option.id === deliveryOptionId){
30-
deliveryOption = option
31-
}
32-
});
33-
34-
35-
36-
37-
cartSummaryHTML += `
38-
<div class="cart-item-container js-cart-item-${matchingProduct.id}">
39-
<div class="delivery-date">
40-
Delivery date: ${deliveryOption.date}
41-
</div>
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)}
76-
</div>
77-
</div>
78-
</div>
79-
`
80-
});
81-
82-
document.querySelector('.js-order-summary')
83-
.innerHTML = cartSummaryHTML;
84-
85-
86-
function deliveryOptionsHTML(matchingProduct, cartItem){
87-
let html = ''
88-
89-
deliveryOptions.forEach((deliveryOption) => {
90-
91-
const price = deliveryOption.priceCents === 0 ? 'FREE' : `$${formatCurrency(deliveryOption.priceCents)} -`;
92-
93-
const isChecked = deliveryOption.id === cartItem.deliveryOptionId
94-
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>
111-
</div>
112-
</div>
113-
`
114-
115-
})
116-
return html;
117-
};
118-
119-
120-
document.querySelectorAll('.js-delete-button')
121-
.forEach((button) => {
122-
button.addEventListener('click', () => {
123-
const {itemId} = button.dataset;
124-
removeFromCart(itemId)
125-
126-
const container = document.querySelector(`.js-cart-item-${itemId}`)
127-
container.remove();
128-
updateCartQuantity();
129-
})
130-
});
131-
132-
133-
function updateCartQuantity(){
134-
135-
const checkoutHeader = document.querySelector('.js-return-to-home-link')
136-
checkoutHeader.innerHTML = `${calculateCartQuantity()} items`;
137-
};
138-
updateCartQuantity();
139-
140-
141-
document.querySelectorAll(`.js-update-button`)
142-
.forEach((button) => {
143-
button.addEventListener('click', () => {
144-
const {itemId} = button.dataset;
145-
146-
const container = document.querySelector(`.js-cart-item-${itemId}`)
147-
148-
container.classList.add('is-editing-quantity');
149-
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-
})
157-
})
158-
});
159-
160-
161-
function saveUpdatedQuantity(itemId){
162-
const container = document.querySelector(`.js-cart-item-${itemId}`);
163-
container.classList.remove('is-editing-quantity');
164-
165-
166-
const quantityInput = document.querySelector(`.js-input-quantity-${itemId}`)
167-
168-
const newQuantity = Number(quantityInput.value);
169-
170-
updateQuantityLabel(newQuantity, itemId);
171-
updateCartQuantity();
172-
173-
quantityInput.value = null;
174-
};
175-
176-
177-
document.querySelectorAll('.js-save-link')
178-
.forEach((link) => {
179-
const {itemId} = link.dataset;
180-
link.addEventListener('click', () => {
181-
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-
};
1+
import { renderOrderSummary } from "./checkout/orderSummary.js";
1972

1983
renderOrderSummary();

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

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
import {cart, removeFromCart, calculateCartQuantity, updateQuantityLabel, updateDeliveryOption} from '../../data/cart.js'
2+
import {products} from '../../data/products.js'
3+
import formatCurrency from '../utils/price.js';
4+
import deliveryOptions from '../../data/delivery-options.js';
5+
6+
7+
8+
export function renderOrderSummary(){
9+
10+
let cartSummaryHTML = ''
11+
12+
cart.forEach((cartItem) => {
13+
// get productId out of cartItem
14+
const {productId} = cartItem;
15+
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+
});
23+
24+
const deliveryOptionId = cartItem.deliveryOptionId;
25+
26+
let deliveryOption;
27+
28+
deliveryOptions.forEach((option) => {
29+
if (option.id === deliveryOptionId){
30+
deliveryOption = option
31+
}
32+
});
33+
34+
35+
36+
37+
cartSummaryHTML += `
38+
<div class="cart-item-container js-cart-item-${matchingProduct.id}">
39+
<div class="delivery-date">
40+
Delivery date: ${deliveryOption.date}
41+
</div>
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)}
76+
</div>
77+
</div>
78+
</div>
79+
`
80+
});
81+
82+
document.querySelector('.js-order-summary')
83+
.innerHTML = cartSummaryHTML;
84+
85+
86+
function deliveryOptionsHTML(matchingProduct, cartItem){
87+
let html = ''
88+
89+
deliveryOptions.forEach((deliveryOption) => {
90+
91+
const price = deliveryOption.priceCents === 0 ? 'FREE' : `$${formatCurrency(deliveryOption.priceCents)} -`;
92+
93+
const isChecked = deliveryOption.id === cartItem.deliveryOptionId
94+
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>
111+
</div>
112+
</div>
113+
`
114+
115+
})
116+
return html;
117+
};
118+
119+
120+
document.querySelectorAll('.js-delete-button')
121+
.forEach((button) => {
122+
button.addEventListener('click', () => {
123+
const {itemId} = button.dataset;
124+
removeFromCart(itemId)
125+
126+
const container = document.querySelector(`.js-cart-item-${itemId}`)
127+
container.remove();
128+
updateCartQuantity();
129+
})
130+
});
131+
132+
133+
function updateCartQuantity(){
134+
135+
const checkoutHeader = document.querySelector('.js-return-to-home-link')
136+
checkoutHeader.innerHTML = `${calculateCartQuantity()} items`;
137+
};
138+
updateCartQuantity();
139+
140+
141+
document.querySelectorAll(`.js-update-button`)
142+
.forEach((button) => {
143+
button.addEventListener('click', () => {
144+
const {itemId} = button.dataset;
145+
146+
const container = document.querySelector(`.js-cart-item-${itemId}`)
147+
148+
container.classList.add('is-editing-quantity');
149+
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+
})
157+
})
158+
});
159+
160+
161+
function saveUpdatedQuantity(itemId){
162+
const container = document.querySelector(`.js-cart-item-${itemId}`);
163+
container.classList.remove('is-editing-quantity');
164+
165+
166+
const quantityInput = document.querySelector(`.js-input-quantity-${itemId}`)
167+
168+
const newQuantity = Number(quantityInput.value);
169+
170+
updateQuantityLabel(newQuantity, itemId);
171+
updateCartQuantity();
172+
173+
quantityInput.value = null;
174+
};
175+
176+
177+
document.querySelectorAll('.js-save-link')
178+
.forEach((link) => {
179+
const {itemId} = link.dataset;
180+
link.addEventListener('click', () => {
181+
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+
};

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

Whitespace-only changes.

0 commit comments

Comments
 (0)