-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathshopping-cart.html
128 lines (114 loc) · 4.29 KB
/
shopping-cart.html
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
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styleindex.css">
<link rel="icon" href="image/glamoras.jpg" type="image/jpeg"> <!-- Favicon -->
<title>Keranjang Belanja</title>
</head>
<body>
<header class="bg-primary text-white text-center py-4">
<h1>Keranjang Belanja</h1>
</header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="index.html">Glamora</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="baju.html">Baju</a></li>
<li class="nav-item"><a class="nav-link" href="sepatu.html">Sepatu</a></li>
<li class="nav-item"><a class="nav-link" href="tas.html">Tas</a></li>
<li class="nav-item"><a class="nav-link" href="semuaproduk.html">Semua Produk</a></li>
</ul>
</div>
</div>
</nav>
<section class="container my-4">
<table class="table table-striped table-bordered">
<thead class="table-light">
<tr>
<th>Produk</th>
<th>Harga</th>
<th>Jumlah</th>
<th>Total</th>
<th>Aksi</th>
</tr>
</thead>
<tbody id="cartItems">
</tbody>
</table>
</section>
<section class="container my-4">
<h2>Ringkasan Keranjang</h2>
<p>Total Produk: <span id="totalItems">0</span></p>
<p>Total Harga: <span id="totalPrice">Rp 0</span></p>
<button class="btn btn-success" onclick="goToCheckout()">Checkout</button>
</section>
<footer class="text-center py-4">
<p>© 2024 Glamora. All rights reserved.</p>
</footer>
<script>
function getCartData() {
return JSON.parse(localStorage.getItem('cart')) || [];
}
function updateCart() {
const cartData = getCartData();
const cartItems = document.getElementById('cartItems');
const totalItems = document.getElementById('totalItems');
const totalPrice = document.getElementById('totalPrice');
let totalItemCount = 0;
let totalItemPrice = 0;
cartItems.innerHTML = '';
if (cartData.length === 0) {
cartItems.innerHTML = '<tr><td colspan="5" class="text-center">Keranjang kosong</td></tr>';
} else {
cartData.forEach((item, index) => {
const priceNumber = parseFloat(item.price.replace(/[Rp. ]/g, '').replace(',', '.'));
const totalItem = priceNumber * item.quantity;
totalItemCount += item.quantity;
totalItemPrice += totalItem;
cartItems.innerHTML += `
<tr>
<td>
<img src="${item.image}" alt="${item.title}" class="product-image" style="width: 50px; height: auto;">
<span>${item.title}</span>
</td>
<td>Rp ${priceNumber.toLocaleString()}</td>
<td>
<input type="number" min="1" value="${item.quantity}" onchange="changeQuantity(${index}, this.value)" class="form-control" style="width: 70px;">
</td>
<td>Rp ${totalItem.toLocaleString()}</td>
<td>
<button class="btn btn-danger" onclick="removeItem(${index})">Hapus</button>
</td>
</tr>
`;
});
}
totalItems.innerText = totalItemCount;
totalPrice.innerText = `Rp ${totalItemPrice.toLocaleString()}`;
}
function changeQuantity(index, newQuantity) {
const cartData = getCartData();
if (newQuantity < 1) {
newQuantity = 1;
}
cartData[index].quantity = parseInt(newQuantity);
localStorage.setItem('cart', JSON.stringify(cartData));
updateCart();
}
function removeItem(index) {
const cartData = getCartData();
cartData.splice(index, 1);
localStorage.setItem('cart', JSON.stringify(cartData));
updateCart();
}
updateCart();
function goToCheckout() {
window.location.href = 'checkout.html';
}
</script>
</body>
</html>