Avant-propos

Avec le développement progressif du e-commerce, le panier est devenu l'une des fonctions essentielles de tout site e-commerce. Cet article explique comment utiliser JavaScript pour implémenter un panier simple, y compris des fonctions de base telles que l'ajout de produits, la suppression de produits et la suppression du panier.

Structure HTML

Jetons d'abord un coup d'œil à la structure HTML de base de la page du panier. Ici, nous utilisons un tableau pour afficher les articles dans le panier et utilisons JavaScript pour générer dynamiquement des lignes de tableau.

购物车示例

购物车

商品名称	价格	数量	操作
总价：￥0

商品名称：价格：数量：

Copier après la connexion

Code JavaScript

Ensuite, nous écrivons du code JavaScript pour effectuer diverses opérations du panier. Nous définissons d'abord un constructeurCartpour représenter l'objet panier et ajoutons quelques méthodes courantes. L'implémentation spécifique est la suivante :Cart构造函数来代表购物车对象，并添加一些常用方法。具体实现如下：

function Cart() { this.cartItems = []; // 存储购物车中的商品 this.totalPrice = 0; // 购物车中所有商品的总价 } // 清空购物车 Cart.prototype.clear = function() { this.cartItems = []; this.totalPrice = 0; }; // 添加商品到购物车中 Cart.prototype.addProduct = function(productName, productPrice, productNumber) { // 判断购物车中是否已经存在该商品 for (var i = 0; i < this.cartItems.length; i++) { if (this.cartItems[i].productName === productName) { this.cartItems[i].productNumber += productNumber; this.calculateTotalPrice(); return; } } // 如果购物车中不存在该商品，则将该商品添加到购物车中 var newCartItem = { productName: productName, productPrice: productPrice, productNumber: productNumber }; this.cartItems.push(newCartItem); this.calculateTotalPrice(); }; // 从购物车中移除指定商品 Cart.prototype.removeProduct = function(productName) { for (var i = 0; i < this.cartItems.length; i++) { if (this.cartItems[i].productName === productName) { this.cartItems.splice(i, 1); this.calculateTotalPrice(); return; } } }; // 计算购物车中所有商品的总价 Cart.prototype.calculateTotalPrice = function() { this.totalPrice = 0; for (var i = 0; i < this.cartItems.length; i++) { this.totalPrice += this.cartItems[i].productPrice * this.cartItems[i].productNumber; } };

Copier après la connexion

接下来，我们编写一个函数renderCart

function renderCart() { var cartTable = document.getElementById("cartTable"); var cartTbody = cartTable.getElementsByTagName("tbody")[0]; // 先清空表格 cartTbody.innerHTML = ""; for (var i = 0; i < cart.cartItems.length; i++) { var cartItem = cart.cartItems[i]; var productRow = document.createElement("tr"); var productNameCell = document.createElement("td"); var productNameText = document.createTextNode(cartItem.productName); productNameCell.appendChild(productNameText); productRow.appendChild(productNameCell); var productPriceCell = document.createElement("td"); var productPriceText = document.createTextNode(cartItem.productPrice); productPriceCell.appendChild(productPriceText); productRow.appendChild(productPriceCell); var productNumberCell = document.createElement("td"); var productNumberText = document.createTextNode(cartItem.productNumber); productNumberCell.appendChild(productNumberText); productRow.appendChild(productNumberCell); var removeProductCell = document.createElement("td"); var removeProductButton = document.createElement("button"); removeProductButton.innerHTML = "删除"; (function(index) { removeProductButton.addEventListener("click", function() { cart.removeProduct(cart.cartItems[index].productName); renderCart(); }); })(i); removeProductCell.appendChild(removeProductButton); productRow.appendChild(removeProductCell); cartTbody.appendChild(productRow); } // 更新总价 var cartTotalPrice = document.getElementById("cartTotalPrice"); cartTotalPrice.innerHTML = cart.totalPrice; }

Copier après la connexion

Ensuite, nous écrivons une fonction renderCartpour restituer les articles du panier actuel dans un tableau à afficher. L'implémentation spécifique est la suivante :

var cart = new Cart(); window.onload = function() { var addProductButton = document.getElementById("addProduct"); addProductButton.addEventListener("click", function() { var productName = document.getElementById("productName").value; var productPrice = parseFloat(document.getElementById("productPrice").value); var productNumber = parseInt(document.getElementById("productNumber").value); if (productName && productPrice && productNumber) { cart.addProduct(productName, productPrice, productNumber); renderCart(); } else { alert("商品名称、价格和数量都不能为空！"); } }); var clearCartButton = document.getElementById("clearCart"); clearCartButton.addEventListener("click", function() { cart.clear(); renderCart(); }); renderCart(); };

Copier après la connexion

Enfin, lorsque la page est chargée, nous créons l'objet panier et lions tous les événements aux éléments de la page. L'implémentation spécifique est la suivante :

rrreee

Résumé

Grâce à l'implémentation du code JavaScript ci-dessus, nous avons réalisé avec succès une simple fonction de panier d'achat. Nous pouvons l'appliquer à divers sites Web de commerce électronique pour mettre en œuvre facilement la fonction d'achat du commerce électronique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!