【教學】JavaScript 購物車功能入門教學

Try Proseoai — it's free

AI SEO Assistant

SEO Link Building

SEO Writing

Home SEO-TW 【教學】JavaScript 購物車功能入門教學

【教學】JavaScript 購物車功能入門教學

簡介

歡迎來到這個影片教學，今天我們將使用純粹的 JavaScript 來編寫購物車功能。在這個影片中，我們將建立一個網頁，讓使用者能夠將商品加入購物車、更新購物車內容、移除商品，以及進行結帳功能。我們將使用原生 JavaScript 來編寫這些功能，並且說明每個步驟的細節。希望這個影片能夠幫助您熟悉使用 JavaScript 建立簡單的購物車功能。

建立購物車頁面

首先，我們需要建立一個 HTML 頁面，以顯示購物車的內容。我們可以建立一個 index.html 檔案，並在其中加入所需的 HTML 結構。

<!DOCTYPE html>
<html>
<head>
    <title>購物車</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    <header>
        <h1>我的購物車</h1>
        <p>這是我的購物車頁面</p>
    </header>

    <div id="cart-items">
        <h2>購物車內容</h2>
        <div id="cart-list"></div>
        <hr>
        <div id="cart-total">
            <h3>總價格</h3>
            <p id="total-price">NT$ 0</p>
        </div>
        <button id="checkout-btn">結帳</button>
    </div>
</body>
</html>

在這個 HTML 頁面中，我們建立了一個標題區塊和一個購物車內容區塊。購物車內容區塊包含了購物車清單以及總價格和結帳按鈕。

加入商品至購物車

接下來，我們將撰寫 JavaScript 代碼來處理將商品加入購物車的功能。

首先，我們需要取得所有的「加入購物車」按鈕，並為它們添加點擊事件的監聽器。在點擊事件中，我們會獲取商品的名稱、價格和圖片來源，然後將商品資訊新增到購物車清單中。

在 script.js 檔案中，我們可以按照以下程式碼來實現這個功能：

// 取得所有的「加入購物車」按鈕
const addButtonList = document.getElementsByClassName('add-button');

// 為每個按鈕添加點擊事件監聽器
for (let i = 0; i < addButtonList.length; i++) {
  addButtonList[i].addEventListener('click', function(event) {
    // 獲取商品資訊
    const name = event.target.dataset.name;
    const price = event.target.dataset.price;
    const image = event.target.dataset.image;

    // 新增商品至購物車清單
    addToCart(name, price, image);
  });
}

// 新增商品至購物車清單
function addToCart(name, price, image) {
  const cartList = document.getElementById('cart-list');

  // 建立購物車商品元素
  const cartItem = document.createElement('div');
  cartItem.classList.add('cart-item');

  const itemImage = document.createElement('img');
  itemImage.src = image;

  const itemDetails = document.createElement('div');
  itemDetails.classList.add('item-details');

  const itemName = document.createElement('h4');
  itemName.innerText = name;

  const itemPrice = document.createElement('p');
  itemPrice.innerText = `價格：NT$ ${price}`;

  // 將商品元素加入購物車清單
  itemDetails.appendChild(itemName);
  itemDetails.appendChild(itemPrice);
  cartItem.appendChild(itemImage);
  cartItem.appendChild(itemDetails);
  cartList.appendChild(cartItem);
}

在這個代碼中，我們使用了 getElementsByClassName 方法來取得所有的「加入購物車」按鈕。接下來，我們使用一個 for 迴圈來為每個按鈕添加點擊事件的監聽器。在監聽器中，我們使用 event.target 來獲取點擊的按鈕，並從按鈕上的 data-* 屬性中獲取商品的名稱、價格和圖片來源。最後，我們將商品資訊傳遞給 addToCart 函數，並將商品資訊新增到購物車清單中。

在 addToCart 函數中，我們首先取得購物車清單的元素，然後使用 createElement 方法來建立購物車商品的元素，並將它們添加到購物車清單中。

現在，如果我們在網頁中點擊「加入購物車」按鈕，相對應的商品資訊就會顯示在購物車清單中。

移除購物車商品

接下來，我們將撰寫 JavaScript 代碼來處理從購物車中移除商品的功能。

我們需要為每個「移除」按鈕添加點擊事件的監聽器。在點擊事件中，我們將從購物車清單中移除對應的商品。

在 script.js 檔案中，我們可以按照以下程式碼來實現這個功能：

// 取得所有的「移除」按鈕
const removeButtonList = document.getElementsByClassName('remove-button');

// 為每個按鈕添加點擊事件監聽器
for (let i = 0; i < removeButtonList.length; i++) {
  removeButtonList[i].addEventListener('click', function(event) {
    // 移除購物車商品
    removeCartItem(event.target);
  });
}

// 移除購物車商品
function removeCartItem(button) {
  const item = button.parentElement;
  const cartList = item.parentElement;

  // 從購物車清單中移除商品
  cartList.removeChild(item);
}

在這個代碼中，我們使用了 getElementsByClassName 方法來獲取所有的「移除」按鈕。接下來，我們使用一個 for 迴圈為每個按鈕添加點擊事件的監聽器。在監聽器中，我們使用 event.target 來獲取點擊的按鈕，並將它傳遞給 removeCartItem 函數。在 removeCartItem 函數中，我們首先獲取要移除的商品的父元素（即購物車商品本身），然後從購物車清單中移除該商品。

現在，如果我們在網頁中點擊「移除」按鈕，相對應的商品就會從購物車清單中被移除。

更新購物車總價格

下一步，我們將撰寫 JavaScript 代碼來更新購物車總價格。

每當我們添加或移除商品時，我們都需要更新購物車總價格以顯示正確的金額。

在 script.js 檔案中，我們可以按照以下程式碼來實現這個功能：

// 更新購物車總價格
function updateCartTotal() {
  const cartItems = document.getElementsByClassName('cart-item');
  let total = 0;

  for (let i = 0; i < cartItems.length; i++) {
    const item = cartItems[i];
    const priceElement = item.getElementsByClassName('item-price')[0];
    const quantityElement = item.getElementsByClassName('item-quantity')[0];

    const price = parseFloat(priceElement.innerText.replace('NT$ ', ''));
    const quantity = quantityElement.value;

    total += price * quantity;
  }

  const totalPriceElement = document.getElementById('total-price');
  totalPriceElement.innerText = `總價格：NT$ ${total.toFixed(2)}`;
}

在這個代碼中，我們首先使用 getElementsByClassName 方法來獲取所有的購物車商品元素，然後使用一個 for 迴圈來遍歷每個商品。在每個迭代中，我們獲取商品的價格元素和數量元素，使用 innerText 屬性來獲取價格的內容。

然後，我們使用 parseFloat 函數將價格轉換為浮點數，並使用 value 屬性獲取數量的值。我們將價格乘以數量，並將結果添加到 total 變數中。

最後，我們將 total 變數的值更新到總價格的元素中。

現在，每當我們添加或移除商品時，總價格就會被更新並顯示在頁面上。

購物車結帳功能

最後一步，我們將撰寫 JavaScript 代碼來處理購物車的結帳功能。

當我們按下「結帳」按鈕時，我們需要顯示一個彈出視窗，告訴使用者感謝他們的購買。同時，我們也需要清空購物車清單。

在 script.js 檔案中，我們可以按照以下程式碼來實現這個功能：

// 取得結帳按鈕元素
const checkoutButton = document.getElementById('checkout-btn');

// 為結帳按鈕添加點擊事件監聽器
checkoutButton.addEventListener('click', function() {
  // 顯示彈出視窗
  alert('感謝您的購買！');

  // 清空購物車清單
  const cartList = document.getElementById('cart-list');
  cartList.innerHTML = '';

  // 更新購物車總價格
  updateCartTotal();
});

在這個代碼中，我們使用了 getElementById 方法來獲取「結帳」按鈕的元素。然後，我們使用 addEventListener 方法為按鈕添加點擊事件的監聽器。

在監聽器中，我們使用 alert 函數來顯示彈出視窗，告訴使用者感謝他們的購買。然後，我們使用 innerHTML 屬性來清空購物車清單的內容。

最後，我們調用 updateCartTotal 函數，以確保購物車總價格被更新。

現在，當我們按下「結帳」按鈕時，將會顯示彈出視窗，同時購物車清單的內容也會被清空。

FAQ

我可以從哪裡獲取完整的程式碼？

您可以在以下位置找到完整的程式碼：
- HTML、CSS 和 JavaScript 完整程式碼
請注意，這只是示範程式碼，您可能需要根據您的需求進行一些修改。

🔥 亮點

使用 JavaScript 創建購物車功能
可以將商品添加到購物車，更新數量和移除商品
更新購物車總價格和進行結賬功能
使用原生 JavaScript 的 DOM 操作和事件監聽
提供完整的程式碼和詳細的註釋，可以輕鬆理解

這就是使用 JavaScript 創建購物車功能的完整指南！希望這個指南對你有所幫助，並且鼓勵你嘗試自己建立購物車功能。感謝觀看本視頻教程，如果你有任何問題，請在下面的評論中告訴我們。祝你好運！對您有所幫助🙂

Are you spending too much time on seo writing?

SEO Course: 1M+
SEO Link Building: 5M+
SEO Writing: 800K+

WHY YOU SHOULD CHOOSE Proseoai

Proseoai has the world's largest selection of seo courses for you to learn. Each seo course has tons of seo writing for you to choose from, so you can choose Proseoai for your seo work!

Browse More Content