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
111
112
113
114
115
116
117
118
119
120
121
| // Products Array
const products = [
{
id: 1,
title: "Autumn Hoodie",
price: 264.9,
image:
"https://pangaia.com/cdn/shop/products/Recycled-Nylon-NW-Flwrdwn-Quilted-Collarless-Jacket-Cerulean-Blue-Female-1_bf4b2a54-8a7f-4174-bc49-8ef22b24bfdd.jpg?v=1666708230&width=1426",
},
{
id: 2,
title: "FUSION HOODIE",
price: 295,
image:
"https://images.undiz.com/on/demandware.static/-/Sites-ZLIN-master/default/dw2264d914/merch/BTS/654206666_x.jpg?sw=1250",
},
{
id: 3,
title: "Chestnut Brown",
price: 74.9,
image:
"https://pangaia.com/cdn/shop/products/Recycled-Cashmere-Core-Hoodie-Chestnut-Brown-Male-1.jpg?v=1663947464&width=1426",
},
{
id: 4,
title: "Nike Sportswear",
price: 80,
image:
"https://static.nike.com/a/images/t_PDP_1728_v1/f_auto,q_auto:eco/61734ec7-dad8-40f3-9b95-c7500939150a/sportswear-club-mens-french-terry-crew-neck-sweatshirt-tdFDRc.png",
},
{
id: 5,
title: "Champion BASIC",
price: 48.99,
image:
"https://img01.ztat.net/article/spp-media-p1/7067458719b744fe81ffee62d3d0b912/abad421e7d8e47f08a2abc1c6ffe07dc.jpg?imwidth=1800",
},
{
id: 6,
title: "Cotton Hoodie",
price: 395,
image:
"https://pangaia.com/cdn/shop/files/Reclaim-3.0-Hoodie-Reclaim-Jade-Womens-3.jpg?v=1693398673&width=1426",
},
{
id: 7,
title: "CLASSIC CREWNECK",
price: 48.99,
image:
"https://img01.ztat.net/article/spp-media-p1/10cea44041564f81ac585fc6c8978907/c4c32dbc45dd4dbc9d15087c846538f2.jpg?imwidth=1800",
},
{
id: 8,
title: "TAPE HOODED",
price: 79.99,
image:
"https://img01.ztat.net/article/spp-media-p1/d391f90be278469ebfdff731800cfccc/6d2101bd672f4e059501f01fe726f315.jpg?imwidth=1800",
},
];
// Get the products list and elements
const productList = document.getElementById('productList');
const cartItemsElement = document.getElementById('cartItems');
const cartTotalElement = document.getElementById('cartTotal');
// Store Cart Items In Local Storage
let cart = JSON.parse(localStorage.getItem('cart')) || [];
function renderProducts() {
productList.innerHTML = products
.map(
(product) => `
<div class="product">
<img src="${product.image}" alt="${product.title}" class="product-img" />
<div class="product-info">
<h2 class="product-title">${product.title}</h2>
<p class="product-price">$${product.price.toFixed(2)}</p>
<a class="add-to-cart" data-id="${product.id}">Add to cart</a>
</div>
</div>
`
)
.join("");
}
// Render Proucts On Cart Page
function renderCartItems() {
cartItemsElement.innerHTML = cart
.map(
(item) => `
<div class="cart-item">
<img src="${item.image}" alt="${item.title}" />
<div class="cart-item-info">
<h2 class="cart-item-title">${item.title}</h2>
<input
class="cart-item-quantity"
type="number"
name=""
min="1"
value="${item.quantity}"
data-id="${item.id}"
/>
</div>
<h2 class="cart-item-price">${item.price}</h2>
<button class="remove-from-cart" data-id="${item.id}">Remove</button>
</div>
`
)
.join("");
}
// Check if on cart page
if (window.location.pathname.includes('cart.html')) {
renderCartItems();
} else {
renderProducts();
}
renderProducts();
renderCartItems(); |
