WooCommerce自定义页面实现批量添加PC配件至购物车按钮方案

Hey there! Let's get that "Add to Cart" button working for your PC parts selection page. I'll walk you through a straightforward implementation using vanilla JavaScript (you can adapt this to frameworks like React/Vue if you're using those too).

Step 1: Add the Button to Your HTML #

First, drop a button right after your processor select element so users can trigger the action:

<div>
  <select id="ddrakit-processor" class="ddrakit">
    <option value='{"gaming":"0","render":"0","priceperform":"0"}'>- Pilih processor -</option>
    <option value='{"product_id":9,"category_id":17,"harga":"100000000","gaming":"20","render":"10","priceperform":"20"}'>Intel i99 - Rp. 100,0...</option>
    <!-- More processor options here -->
  </select>
  <!-- Add this button -->
  <button id="addToCartBtn">Tambahkan ke Keranjang</button>
</div>

Step 2: Write the JavaScript Logic #

Next, add this script (either in a <script> tag at the end of your body or an external JS file) to handle the button click, cart storage, and redirect:

// Grab references to our button and select element
const addToCartBtn = document.getElementById('addToCartBtn');
const processorSelect = document.getElementById('ddrakit-processor');

// Set up the click event handler
addToCartBtn.addEventListener('click', () => {
  // Get the selected option's JSON value
  const selectedProductJson = processorSelect.value;
  const selectedProduct = JSON.parse(selectedProductJson);

  // Make sure the user actually picked a processor (not the default option)
  if (!selectedProduct.product_id) {
    alert('Silakan pilih processor terlebih dahulu!');
    return;
  }

  // Retrieve existing cart data from localStorage (or start fresh if empty)
  let cart = JSON.parse(localStorage.getItem('cart')) || [];

  // Check if the product is already in the cart (optional: prevent duplicates or increment quantity)
  const existingItem = cart.find(item => item.product_id === selectedProduct.product_id);
  if (existingItem) {
    // If it's already there, increase the quantity
    existingItem.quantity = (existingItem.quantity || 1) + 1;
  } else {
    // If not, add it to the cart with a default quantity of 1
    cart.push({ ...selectedProduct, quantity: 1 });
  }

  // Save the updated cart back to localStorage
  localStorage.setItem('cart', JSON.stringify(cart));

  // Redirect to the cart page (update the URL to match your actual cart page path)
  window.location.href = '/cart.html';
});

Extra Notes for Your Project #

• Backend Integration: If you're using a backend API instead of localStorage, replace the localStorage code with a fetch or axios request to your "add to cart" endpoint. Once the request succeeds, redirect to the cart page.
• Multiple Parts: If you have other parts (like GPUs, motherboards), wrap the cart logic in a reusable function so you don't repeat code for each select element.
• Cart Page: On your cart page, you'll need to read the cart data from localStorage (or fetch it from your backend) to display the selected items.

内容的提问来源于stack exchange，提问作者Luqmanul Hakim