JavaScript实现网页购物车

发布时间：2023-05-16 08:36:20

现代电子商务的关键是购物车，因为它允许用户收集他们想买的物品并保留在同一位置，详细地记录商品并最终结账付款。在这篇文章中，我们将讨论如何使用JavaScript实现网页购物车。

为了实现购物车，我们需要设计一个存储商品的容器。容器可以是任何数据结构，如数组或对象。在这里我们将使用JavaScript对象。

let cart = {};

cart对象包含许多属性，每个属性都是相应物品的详细信息。每个物品都应该有名字，价格和数量等属性。例如，下面是一个简单的cart对象:

let cart = {
    "item1": {
        "name": "T-shirt",
        "price": 20,
        "quantity": 2
    },
    "item2": {
        "name": "Jeans",
        "price": 50,
        "quantity": 1
    }
};

我们首先要创建一个添加商品到购物车的函数。当用户单击“添加到购物车”按钮时，我们将创建一个新的cart对象键值对:

function addToCart(item) {
    if (cart[item.name]) {
        cart[item.name].quantity += 1;
    } else {
        cart[item.name] = item;
    }
}

当一个新物品添加到购物车的时候，我们需要检查它是否已经在cart对象中存在。如果存在，我们将在原有的数量上加1 ，否则我们将创建一个新键值对。这个函数可以调用一个按钮点击事件：

<button onclick="addToCart({name:'T-shirt', price:20, quantity:1});">Add to cart</button>

现在我们已经有了一些商品在购物车里，接下来我们需要显示购物车的内容。购物车内容应该包括物品名称，价格和数量，而且我们需要用javascript来动态地在网页上创建html元素。下面是一个简单的函数来创建一个物品列表:

function displayCart() {
    let cartItemNode = document.getElementById('cart');
    for (let item in cart) {
        let cartItem = document.createElement('div');
        cartItem.innerHTML = cart[item].name + ' $' + cart[item].price + ' x ' + cart[item].quantity;
        cartItemNode.appendChild(cartItem);
    }
}

我们可以在网页上为购物车创建一个div元素，并给它一个id。每当物品添加到购物车里，我们就重新显示购物车的内容:

<body onload="displayCart();">
    <div id="cart"></div>
</body>

最后，我们需要添加一个显示购物车总价格的函数。我们可以使用JavaScript的reduce方法将购物车的物品总价格相加：

function showTotal() {
    let totalPrice = Object.values(cart).reduce((acc, curr) => acc + curr.price * curr.quantity, 0);
    document.getElementById('total').innerHTML = 'Total: $' + totalPrice;
}

我们将总价钱放到网页上以供用户查看:

<div id="total"></div>

现在，我们已经创建了完整的购物车系统。使用这个基本的实现，您可以进一步扩展购物车，添加更多功能，例如: 移除物品，修改数量，应用优惠券等等。