Cara Mudah Membuat Featured Shopping Chart yang Terhubung ke WhatsApp

Apa itu Featured Shopping Chart Form?

<div class="featured-shopping-chart">
  <form>
    <label for="product-name">Product Name:</label><br>
    <input type="text" id="product-name" name="product-name"><br>
    <label for="product-price">Product Price:</label><br>
    <input type="number" id="product-price" name="product-price"><br>
    <label for="product-quantity">Product Quantity:</label><br>
    <input type="number" id="product-quantity" name="product-quantity"><br>
    <button type="submit">Add to Chart</button>
  </form>
  <div class="chart-items">
    <!-- Chart items will be added here -->
  </div>
</div>

.featured-shopping-chart {
  width: 500px;
  margin: 0 auto;
  border: 1px solid #ccc;
  padding: 20px;
}

.featured-shopping-chart form {
  margin-bottom: 20px;
}

.featured-shopping-chart label {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
}

.featured-shopping-chart input[type="text"],
.featured-shopping-chart input[type="number"] {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-bottom: 10px;
  font-size: 16px;
}

.featured-shopping-chart button[type="submit"] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.featured-shopping-chart button[type="submit"]:hover {
  background-color: #45a049;
}

.featured-shopping-chart .chart-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.featured-shopping-chart .chart-items li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 18px;
}

// Ambil element form dan chart-items
const form = document.querySelector('.featured-shopping-chart form');
const chartItems = document.querySelector('.featured-shopping-chart .chart-items');

// Fungsi untuk menambahkan item ke chart
const addChartItem = (productName, productPrice, productQuantity) => {
  // Buat element li untuk menampilkan item yang ditambahkan ke chart
  const li = document.createElement('li');
  li.innerHTML = `${productName} (${productQuantity} x ${productPrice})`;
  chartItems.appendChild(li);
}

// Fungsi untuk mengirim pesan ke WhatsApp
const sendWhatsAppMessage = (productName, productPrice, productQuantity) => {
  // Buat URL untuk mengirim pesan ke WhatsApp
  const whatsAppMessageUrl = `https://api.whatsapp.com/send?phone=1234567890&text=Saya%20ingin%20membeli%20${productName}%20sebanyak%20${productQuantity}%20dengan%20harga%20${productPrice}%20per%20item.`;
  // Buka URL untuk mengirim pesan ke WhatsApp
  window.open(whatsAppMessageUrl);
}

// Tambahkan event listener ke form untuk mendeteksi form submission
form.addEventListener('submit', (event) => {
  // Stop form submission
  event.preventDefault();

  // Ambil nilai dari form input
  const productName = form.querySelector('#product-name').value;
  const productPrice = form.querySelector('#product-price').value;
  const productQuantity = form.querySelector('#product-quantity').value;

  // Tambahkan item ke chart
  addChartItem(productName, productPrice, productQuantity);

  // Kirim pesan ke WhatsApp
  sendWhatsAppMessage(productName, productPrice, productQuantity);

  // Kosongkan form input
  form.reset();
});