Untuk menambahkan form data pembeli pada proses checkout, Anda perlu memodifikasi HTML dan JavaScript. Berikut adalah contoh pembaruan pada file HTML dan 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">
<!-- Daftar produk -->
</div>
<div id="cart">
<h2>Cart</h2>
<ul id="cart-items"></ul>
<p id="cart-total">Total: $0</p>
<form id="checkout-form">
<label for="name">Name:</label>
<input type="text" id="name" required>
<label for="email">Email:</label>
<input type="email" id="email" required>
<label for="address">Address:</label>
<textarea id="address" required></textarea>
<label for="phone">Phone:</label>
<input type="tel" id="phone" required>
<button type="submit" id="checkout">Checkout</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
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 checkoutForm = document.getElementById('checkout-form');
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(event) {
event.preventDefault();
// Mengambil detail produk untuk checkout
let message = 'Saya ingin membeli:\n\n';
cartItems.forEach(item => {
message += `${item.name} - $${item.price.toFixed(2)}\n`;
});
message += `\nTotal: $${total.toFixed(2)}\n\n`;
// Mendapatkan data pembeli
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const address = document.getElementById('address').value;
const phone = document.getElementById('phone').value;
// Menambahkan data pembeli ke pesan checkout
message += 'Data Pembeli:\n';
message += `Nama: ${name}\n`;
message += `Email: ${email}\n`;
message += `Alamat: ${address}\n`;
message += `No. HP: ${phone}`;
// Membuka WhatsApp dengan pesan checkout
const whatsappURL = `https://api.whatsapp.com/send?text=${encodeURIComponent(message)}`;
window.open(whatsappURL, '_blank');
// Mengosongkan keranjang dan form checkout
cartItems = [];
total = 0;
cartItemsList.innerHTML = '';
cartTotal.textContent = `Total: $${total.toFixed(2)}`;
checkoutForm.reset();
}
// Memberikan event listener untuk form "Checkout"
checkoutForm.addEventListener('submit', checkout);
Dalam contoh di atas, kita menambahkan form data pembeli pada bagian HTML dengan menggunakan elemen <form>, dan setiap input memiliki atribut required untuk memastikan bahwa semua informasi terisi sebelum melakukan checkout.
Kemudian, dalam fungsi checkout(), kita mendapatkan data pembeli dari input form menggunakan metode getElementById(), dan menambahkannya ke pesan checkout yang akan dikirim melalui WhatsApp.
Jangan lupa untuk menyediakan file gambar produk (product1.jpg, product2.jpg, dll.) dalam direktori yang sama dengan file HTML, serta file CSS dan JavaScript yang diperbarui.
Perhatikan bahwa ini masih merupakan contoh sederhana, dan Anda mungkin perlu menambahkan validasi data pembeli atau memproses data tersebut secara lebih terperinci sesuai kebutuhan Anda.
