Berikut adalah contoh sederhana untuk membuat website dengan fitur shopping cart menggunakan JavaScript:
HTML:
html<!DOCTYPE html>
<html>
<head>
<title>Shopping Cart</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Shopping Cart</h1>
<div id="product-list">
<div class="product">
<img src="product1.jpg" alt="Product 1">
<h3>Product 1</h3>
<p>$10</p>
<button class="add-to-cart">Add to Cart</button>
</div>
<div class="product">
<img src="product2.jpg" alt="Product 2">
<h3>Product 2</h3>
<p>$15</p>
<button class="add-to-cart">Add to Cart</button>
</div>
<!-- Tambahkan produk lain di sini -->
</div>
<div id="cart">
<h2>Cart</h2>
<ul id="cart-items"></ul>
<p id="cart-total">Total: $0</p>
<button id="checkout">Checkout</button>
</div>
<script src="script.js"></script>
</body>
</html>
CSS (style.css):
cssbody {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
text-align: center;
}
#product-list {
display: flex;
justify-content: space-between;
}
.product {
text-align: center;
margin: 20px;
}
.add-to-cart {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
#cart {
margin-top: 50px;
}
#cart-items {
list-style-type: none;
padding: 0;
}
#cart-total {
font-weight: bold;
}
#checkout {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
JavaScript (script.js):
javascript// Daftar produk
const products = [
{ name: 'Product 1', price: 10 },
{ name: 'Product 2', price: 15 },
// Tambahkan produk lain di sini
];
// Mendapatkan elemen-elemen HTML
const addToCartButtons = document.querySelectorAll('.add-to-cart');
const cartItemsList = document.getElementById('cart-items');
const cartTotal = document.getElementById('cart-total');
const checkoutButton = document.getElementById('checkout');
let cartItems = [];
let total = 0;
// Membuat fungsi untuk menambahkan produk ke keranjang
function addToCart(event) {
const button = event.target;
const product = button.parentNode;
const productName = product.querySelector('h3').textContent;
const productPrice = parseFloat(product.querySelector('p').textContent.replace('$', ''));
const item = { name: productName, price: productPrice };
cartItems.push(item);
total += productPrice;
const li = document.createElement('li');
li.textContent = `${productName} - $${productPrice.toFixed(2)}`;
cartItemsList.appendChild(li);
cartTotal.textContent = `Total: $${total.toFixed(2)}`;
}
// Memberikan event listener untuk tombol "Add to Cart"
addToCartButtons.forEach(button => {
button.addEventListener('click', addToCart);
});
// Membuat fungsi untuk proses checkout
function checkout() {
// Lakukan logika checkout di sini
// Misalnya, mengirim data ke server, membersihkan keranjang, menampilkan pesan, dll.
console.log('Checkout successful!');
cartItems = [];
total = 0;
cartItemsList.innerHTML = '';
cartTotal.textContent = `Total: $${total.toFixed(2)}`;
}
// Memberikan event listener untuk tombol "Checkout"
checkoutButton.addEventListener('click', checkout);
Dalam contoh di atas, kita membuat sebuah website sederhana dengan daftar produk dan keranjang belanja. Ketika tombol "Add to Cart" ditekan, produk akan ditambahkan ke keranjang dan ditampilkan dalam daftar. Jumlah total akan diperbarui setiap kali produk ditambahkan. Tombol "Checkout" mengosongkan keranjang dan memberikan pesan checkout.
Pastikan Anda memiliki file gambar produk (product1.jpg, product2.jpg, dll.) dalam direktori yang sama dengan file HTML. Anda juga dapat menyesuaikan tampilan dan logika sesuai kebutuhan Anda.
Harap dicatat bahwa ini hanya contoh sederhana dan tidak melibatkan fitur-fitur seperti manajemen inventaris, autentikasi pengguna, atau pengolahan pembayaran yang sebenarnya. Untuk aplikasi yang lebih kompleks, Anda mungkin perlu menggunakan teknologi dan alat yang lebih canggih.
