购物车是网站中常见的功能之一，它允许用户将商品添加到购物车中，并在准备结账时查看和编辑购物车中的商品，在HTML中，我们可以使用表格、表单和JavaScript等技术来实现购物车的功能。
创建购物车页面
我们需要创建一个HTML文件，用于显示购物车的内容，在这个文件中，我们可以使用表格来展示购物车中的商品，以下是一个简单的购物车页面示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物车</title>
</head>
<body>
<h1>购物车</h1>
<table border="1">
<thead>
<tr>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody id="cart-items">
<!-购物车中的商品将动态生成在这里 -->
</tbody>
</table>
<p>总价：<span id="total-price">0</span></p>
<button onclick="checkout()">结账</button>
<script src="cart.js"></script>
</body>
</html>
添加商品到购物车
接下来，我们需要实现一个JavaScript函数，用于向购物车中添加商品，这个函数需要接收商品的ID、名称、单价和数量作为参数，并将这些信息添加到购物车的表格中，以下是一个简单的示例：
// cart.js
function addToCart(itemId, itemName, itemPrice, itemQuantity) {
// 获取购物车表格的引用
var cartItems = document.getElementById("cart-items");
// 创建一个新的表格行，用于显示商品信息
var newRow = document.createElement("tr");
newRow.innerHTML = `
<td>${itemName}</td>
<td>${itemPrice}</td>
<td><input type="number" value="${itemQuantity}" min="1" onchange="updateCartItem(this)"></td>
<td class="subtotal">${itemPrice * itemQuantity}</td>
<td><button onclick="removeFromCart(this)">移除</button></td>
`;
// 将新的表格行添加到购物车表格中
cartItems.appendChild(newRow);
}
更新购物车中的商品数量和价格
当用户修改购物车中商品的数量时，我们需要更新商品的小计价格，为此，我们可以实现一个名为updateCartItem的JavaScript函数，这个函数需要接收一个表示商品数量输入框的引用作为参数，并根据输入框的值更新商品的小计价格，以下是一个简单的示例：
// cart.js (续)
function updateCartItem(quantityInput) {
// 获取当前商品的价格和数量信息
var price = parseFloat(quantityInput.parentElement.previousSibling.textContent);
var quantity = parseInt(quantityInput.value);
// 计算新的小计价格，并更新表格中的小计单元格
quantityInput.parentElement.nextSibling.textContent = price * quantity;
}
从购物车中移除商品
当用户点击“移除”按钮时，我们需要从购物车中移除对应的商品，为此，我们可以实现一个名为removeFromCart的JavaScript函数，这个函数需要接收一个表示“移除”按钮的引用作为参数，并从购物车表格中删除对应的表格行，以下是一个简单的示例：
// cart.js (续)
function removeFromCart(removeButton) {
// 获取当前商品的表格行引用
var row = removeButton.parentElement.parentElement;
// 从购物车表格中删除当前商品所在的表格行，并更新总价信息
cartItems.removeChild(row);
updateTotalPrice();
}
计算购物车的总价和结账功能实现
我们需要实现一个名为updateTotalPrice的JavaScript函数，用于计算购物车的总价，我们还需要实现一个名为checkout的JavaScript函数，用于处理用户的结账操作，以下是一个简单的示例：
// cart.js (续)
function updateTotalPrice() {
// 获取购物车表格中所有小计单元格的文本内容，并计算它们的总和，以得到购物车的总价
var subtotals = Array.from(document.getElementsByClassName("subtotal"));
var totalPrice = subtotals.reduce((sum, subtotal) => sum + parseFloat(subtotal.textContent), 0);
document.getElementById("total-price").textContent = totalPrice;
}
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/345333.html
微信扫一扫 