Membuat website dengan fitur shopping cart menggunakan JavaScript Part 2

 Untuk menambahkan fitur checkout yang mengarahkan pengguna ke WhatsApp, Anda perlu menambahkan sedikit kode JavaScript ke contoh sebelumnya. Berikut adalah contoh pembaruan pada script.js:

javascript
// 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() {
  // 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)}`;

  // Membuka WhatsApp dengan pesan checkout
  const whatsappURL = `https://api.whatsapp.com/send?text=${encodeURIComponent(message)}`;
  window.open(whatsappURL, '_blank');

  // Mengosongkan keranjang dan menampilkan pesan
  cartItems = [];
  total = 0;
  cartItemsList.innerHTML = '';
  cartTotal.textContent = `Total: $${total.toFixed(2)}`;
}

// Memberikan event listener untuk tombol "Checkout"
checkoutButton.addEventListener('click', checkout);

Dalam kode di atas, setelah mengklik tombol "Checkout", kita mengumpulkan detail produk yang ada dalam keranjang dan membuat pesan yang akan dikirimkan melalui WhatsApp. Kemudian, kita membuka tautan WhatsApp menggunakan fungsi window.open(), dengan pesan checkout sebagai parameter. Hal ini akan membuka WhatsApp di tab baru dengan pesan yang sudah terisi. Pengguna dapat melanjutkan proses pembayaran dan komunikasi melalui WhatsApp.

Pastikan Anda menyediakan link ke file JavaScript yang diperbarui di bagian <script src="script.js"></script> pada file HTML Anda.

Harap diingat bahwa penggunaan WhatsApp API bisa saja berubah dari waktu ke waktu, dan ini hanya merupakan contoh sederhana. Pastikan untuk mengacu pada dokumentasi WhatsApp API dan memperbarui kode Anda sesuai dengan kebutuhan dan persyaratan terbaru dari WhatsApp.