ホームページ > 記事 > ウェブフロントエンド > JavaScript は単純なショッピングカートを実装します

JavaScript は単純なショッピングカートを実装します

WBOYオリジナル: 2023-05-21 12:16:072276ブラウズ

はじめに

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

HTML 構造

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>购物车示例</title>
  </head>
  <body>
    <h1>购物车</h1>
    <table id="cartTable">
      <thead>
        <tr>
          <th>商品名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>

      </tbody>
      <tfoot>
        <tr>
          <td colspan="4">总价：￥<span id="cartTotalPrice">0</span></td>
        </tr>
      </tfoot>
    </table>
    <p>
      <button id="clearCart">清空购物车</button>
    </p>
    <p>
      <label>商品名称：</label>
      <input type="text" id="productName">
      <label>价格：</label>
      <input type="text" id="productPrice">
      <label>数量：</label>
      <input type="text" id="productNumber">
      <button id="addProduct">添加商品</button>
    </p>
    <script src="cart.js"></script>
  </body>
</html>

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 サイトの他の関連記事を参照してください。

JavaScript html 构造函数对象事件

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTMLタグを非表示にする次の記事：HTMLタグを非表示にする

続きを見る

JavaScript は単純なショッピング カートを実装します

関連記事

JavaScript は単純なショッピングカートを実装します