JS实现简单的购物车

以下是一个基本的 JS 购物车实现：

由于是实现基本的功能，就不弄得多复杂了，代码可以直接Ctrl+c/v，大家可以试一试！

HTML：

  
产品列表
  

    

      
商品1
      
价格：10元
      添加至购物车
    
    

      
商品2
      
价格：20元
      添加至购物车
    
    

      
商品3
      
价格：30元
      添加至购物车
    
  



  
购物车
  

  
  
总金额：0元
  结算

JS：

const productList = document.getElementById('productList');
const cart = document.getElementById('cart');
const totalAmount = document.getElementById('totalAmount');
const checkoutBtn = document.getElementById('checkout');

const cartItems = {};

// 添加至购物车事件
productList.addEventListener('click', (event) => {
  if (event.target.classList.contains('add-to-cart')) {
    const product = event.target.parentElement;
    const productId = product.getAttribute('data-id');
    const productName = product.querySelector('h3').textContent;
    const productPrice = product.querySelector('p').textContent;
    addItemToCart(productId, productName, productPrice);
  }
});

// 添加物品至购物车
function addItemToCart(id, name, price) {
  if (cartItems[id]) {
    cartItems[id].count++;
    updateCartItem(cartItems[id]);
  } else {
    const item = { id, name, price, count: 1 };
    cartItems[id] = item;
    addCartItem(item);
  }
  updateTotalAmount();
}

// 添加购物车物品
function addCartItem(item) {
  const li = document.createElement('li');
  li.setAttribute('data-id', item.id);
  li.innerHTML = `
    ${item.name}
    ${item.price}
    ${item.count}
    删除
  `;
  cart.appendChild(li);
}

// 更新购物车物品数量
function updateCartItem(item) {
  const cartItem = cart.querySelector(`[data-id="${item.id}"]`);
  cartItem.querySelector('span:nth-of-type(3)').textContent = item.count;
}

// 删除购物车物品事件
cart.addEventListener('click', (event) => {
  if (event.target.classList.contains('remove-item')) {
    const item = event.target.parentElement;
    const itemId = item.getAttribute('data-id');
    delete cartItems[itemId];
    item.remove();
    updateTotalAmount();
  }
});

// 计算总计
function updateTotalAmount() {
  const amount = Object.values(cartItems)
    .reduce((sum, item) => sum + item.price * item.count, 0);
    totalAmount.textContent = `总金额：${amount}元`;
}

// 结算事件
checkoutBtn.addEventListener('click', () => {
  alert('结算成功！');
  cart.innerHTML = '';
  totalAmount.textContent = '总金额：0元';
  cartItems = {};
});

这个简单的购物车实现使用了一个对象 cartItems 作为购物车中的物品，它的键是产品 ID，值是包含产品信息的对象。添加至购物车时，首先检查 cartItems 中是否已经有该产品，有的话数量加一并更新，没有则创建一个新对象并添加到购物车列表中。同时，每次添加或删除购物车物品后都需要更新购物车总计。最后，点击结算按钮后将购物车清空并重置总金额。