HTML购物车的基本概念
HTML购物车是一种在线购物系统的核心功能，它允许用户将多件商品添加到购物车中，以便一次性结算，购物车通常包括以下几个部分：
1、商品列表：展示在页面上的商品信息，包括商品图片、名称、价格等。
2、购物车列表：展示用户已经添加到购物车中的商品信息，包括商品图片、名称、价格等。
3、添加/删除按钮：用于将商品添加到购物车或从购物车中删除。
4、结算按钮：用于一次性结算购物车中的所有商品。
如何在HTML中实现购物车功能
要在HTML中实现购物车功能，可以使用JavaScript和CSS来完成，以下是一个简单的示例：
1、HTML结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物车示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>商品列表</h1>
<ul class="product-list">
<li>
<img src="product1.jpg" alt="商品1">
<span>商品1</span>
<button class="add-to-cart">添加到购物车</button>
</li>
<li>
<img src="product2.jpg" alt="商品2">
<span>商品2</span>
<button class="add-to-cart">添加到购物车</button>
</li>
</ul>
</div>
<div class="container">
<h1>购物车</h1>
<ul class="cart-list">
<!-购物车中的商品列表 -->
</ul>
<button class="checkout">结算</button>
</div>
<script src="scripts.js"></script>
</body>
</html>
2、CSS样式(styles.css):
body {
font-family: Arial, sans-serif;
}
.container {
width: 80%;
margin: auto;
}
.product-list, .cart-list {
list-style-type: none;
padding: 0;
}
.product-list li, .cart-list li {
display: flex;
align-items: center;
}
.product-list img, .cart-list img {
width: 100px;
height: auto;
}
3、JavaScript代码(scripts.js):
const addToCartButtons = document.querySelectorAll('.add-to-cart');
const checkoutButton = document.querySelector('.checkout');
const cartList = document.querySelector('.cart-list');
let cartItems = []; // 用数组存储购物车中的商品信息(名称、数量)
let totalPrice = 0; // 总价初始化为0
let productQuantity = {}; // 用对象存储每个商品的数量，方便计算总价时使用键值对进行查找和更新操作，key为商品名称，value为数量，productQuantity["商品1"] = quantity; productQuantity["商品2"] = quantity; ...; totalPrice += price quantity; ...; 根据需要可以自定义其他属性和方法，例如totalPriceLabel显示总价的标签，如果不需要显示总价标签，可以将totalPriceLabel从代码中移除，totalPriceLabel = document.createElement('p'); totalPriceLabel.textContent = '总计：¥' + totalPrice + '元'; cartList.appendChild(totalPriceLabel); function addToCart(event) { // 点击添加到购物车按钮时触发该函数 const productName = event.target.nextElementSibling.textContent; const productPrice = parseFloat(event.target.parentElement.previousElementSibling.textContent); if (!productQuantity[productName]) { // 如果该商品还没有被加入过购物车，则将其数量加1并存入productQuantity对象中 productQuantity[productName] = (productQuantity[productName] || 0) + 1; cartItems.push({ name: productName, quantity: productQuantity[productName] }); updateTotalPrice(); updateCartList(); localStorage.setItem('cartItems', JSON.stringify(cartItems)); alert('已成功添加到购物车！'); event.target.parentElement.remove(); // 从DOM中移除已添加的商品 itemRemoved(); // 如果有其他逻辑需要在商品被移除后执行，可以在这里添加相应的代码。 function updateTotalPrice() { // 根据productQuantity对象中的数据更新总价 for (const [name, quantity] of Object.entries(productQuantity)) { totalPrice += parseFloat(name) quantity; }; function updateCartList() { // 将更新后的购物车列表显示在页面上 let cartListHtml = ''; cartItems.forEach((item, index) => { cartListHtml += <li><span>${item.name}: ${item.quantity}个</span></li>; }); cartList.innerHTML = cartListHtml; }; function itemRemoved() {} // 如果有其他逻辑需要在商品被移除后执行，可以在这里添加相应的代码。 return false; // 防止事件冒泡，避免页面刷新。 }; return true; // 防止默认行为(阻止表单提交),避免页面刷新。 }; function checkout() { // 点击结算按钮时触发该函数 clearLocalStorage(); cartItems = JSON.parse(localStorage.getItem('cartItems')) || []; if (cartItems.length === 0) { alert('购物车为空，请先添加商品！'); return; }; let totalAmount = cartItems.reduce((acc, item) => acc + item.price * item.quantity, 0); alert('您已选择以下商品
' + cartItems.map(item => `${item.name}: ${item.quantity}个
单价：¥${item.price}元
小计：¥${(item.price * item.quantity).toFixed(2)}元`).join('
')); window.location.href = '/checkout'; // 如果要跳转到结算页面或其他页面，请将此行替换为相应的URL。 function clearLocalStorage() {} // 如果有其他逻辑需要在结算前清空localStorage中的数据，可以在这里添加相应的代码。 return false; // 防止默认行为(阻止表单提交),避免页面刷新。 }; addToCartButtons.forEach(button => button.addEventListener('click', addToCart)); checkoutButton.addEventListener('click', checkout); ```
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/191036.html
微信扫一扫