はじめに

電子商取引ビジネスの段階的な発展に伴い、ショッピングカートは電子商取引 Web サイトに不可欠な機能の 1 つになりました。この記事では、JavaScript を使用して、商品の追加、商品の削除、ショッピングカートのクリアなどの基本的な機能を含む、簡単なショッピングカートを実装する方法を紹介します。

HTML 構造

まず、ショッピングカートページの基本的な HTML 構造を見てみましょう。ここでは、テーブルを使用してショッピングカート内の商品を表示し、JavaScript を使用してテーブルの行を動的に生成します。

购物车示例

购物车

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

商品名称：价格：数量：

ログイン後にコピー

JavaScript コード

次に、ショッピングカートのさまざまな操作を完了するための JavaScript コードを記述します。まず、ショッピングカートオブジェクトを表す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; } };

ログイン後にコピー

次に、現在のショッピングカート内の製品を表示用のテーブルにレンダリングする関数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; }

ログイン後にコピー

最後に、ページが読み込まれるときに、ショッピングカートオブジェクトを作成し、すべてのイベントをページ要素にバインドします。具体的な実装は次のとおりです。

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(); };

ログイン後にコピー

要約

上記の JavaScript コードの実装により、単純なショッピングカート機能が正常に完成しました。さまざまなECサイトに適用し、EC事業のショッピング機能を簡単に実現できます。

以上がJavaScript は単純なショッピングカートを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。