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(); |
Partager