用 Vanilla JavaScript | ES6 建立購物車

Try Proseoai — it's free

AI SEO Assistant

SEO Link Building

SEO Writing

Home SEO-TW 用 Vanilla JavaScript | ES6 建立購物車

用 Vanilla JavaScript | ES6 建立購物車

🛒 購物車的介紹

在這個教程中，我們將使用JavaScript來構建一個購物車。購物車將允許用戶添加產品，並根據所選產品的數量計算總價格。我們還將實現增加和減少產品數量的功能，以及從購物車中刪除產品的功能。最後，我們將通過將購物車存儲在本地存儲中，使用戶在頁面刷新後仍然能夠保留其購物車中的產品。

准备开始建立购物车

在開始之前，請確保您已下載並提取了起始模板文件。您可以在說明中的鏈接中下載該文件。一旦您下載和提取了模板文件，您可以打開文件夾並將其載入到您喜歡的文本編輯器中。該文件夾包含了我們將在本教程中使用的所有文件，包括HTML、CSS和JavaScript文件。

在我們開始之前，讓我們先設置一個簡單的HTML頁面。在index.html文件中，添加以下基本結構：

<!DOCTYPE html>
<html lang="zh-tw">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>購物車</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>購物車</h1>
    </header>
    <main>
        <div class="products">
            <h2>產品列表</h2>
        </div>
        <div class="cart">
            <h2>購物車</h2>
        </div>
    </main>
    <script src="app.js"></script>
</body>
</html>

在這個簡單的HTML文件中，我們只添加了一個標題和兩個區塊來顯示產品列表和購物車。現在，我們需要去app.js文件中編寫JavaScript代碼來實現購物車的功能。

渲染商品

首先，我們需要渲染產品列表。在app.js檔案中，通過選擇.products元素，我們可以獲取產品列表的DOM元素。然後，我們將使用JavaScript來渲染產品列表。

// 選擇產品列表元素
const productsElement = document.querySelector('.products');

// 定義產品數組
const products = [
  {
    id: 1,
    name: 'T恤 1',
    price: 29.99,
    inStock: 10,
    description: '這是T恤 1的描述。',
    imageUrl: 'images/tshirt1.jpg'
  },
  {
    id: 2,
    name: 'T恤 2',
    price: 39.99,
    inStock: 5,
    description: '這是T恤 2的描述。',
    imageUrl: 'images/tshirt2.jpg'
  },
  // 添加更多的產品...
];

// 渲染產品列表
function renderProducts() {
  products.forEach(product => {
    const productElement = document.createElement('div');
    productElement.classList.add('product');

    const imageElement = document.createElement('img');
    imageElement.src = product.imageUrl;
    productElement.appendChild(imageElement);

    const nameElement = document.createElement('h3');
    nameElement.textContent = product.name;
    productElement.appendChild(nameElement);

    const priceElement = document.createElement('p');
    priceElement.textContent = `價格：$${product.price}`;
    productElement.appendChild(priceElement);

    const addButton = document.createElement('button');
    addButton.textContent = '添加至購物車';
    addButton.addEventListener('click', () => {
      addToCart(product.id);
    });
    productElement.appendChild(addButton);

    productsElement.appendChild(productElement);
  });
}

// 調用渲染產品列表函數
renderProducts();

在這段代碼中，我們首先選擇了HTML中的.products元素，然後在products數組中定義了幾個產品。接下來，我們使用forEach方法遍歷products數組並創建相應的HTML元素來顯示每個產品的詳細信息。然後，我們將這些元素附加到.products元素中，從而完成了產品列表的渲染。

現在，如果您刷新頁面，您將能夠在產品列表中看到所有的產品。每個產品都有一個“添加至購物車”的按鈕，但這個按鈕目前沒有功能。我們將在下一步中添加這個功能。

添加商品至購物車

現在，我們將添加將產品添加到購物車的功能。在app.js文件中，我們將創建一個名為cart的數組來跟踪購物車中的產品。

// 定義購物車數組
let cart = [];

// 添加商品至購物車
function addToCart(productId) {
  const product = products.find(p => p.id === productId);

  if (!product) {
    return;
  }

  const existingCartItem = cart.find(item => item.id === product.id);

  if (existingCartItem) {
    existingCartItem.quantity++;
  } else {
    cart.push({
      id: product.id,
      name: product.name,
      price: product.price,
      quantity: 1
    });
  }

  updateCart();
}

// 更新購物車
function updateCart() {
  // 渲染購物車商品列表
  renderCartItems();

  // 更新購物車總金額
  renderTotalPrice();

  // 將購物車保存到本地存儲
  saveCartToLocalStorage();
}

// 渲染購物車商品列表
function renderCartItems() {
  // 選擇購物車元素
  const cartElement = document.querySelector('.cart');

  // 先清空購物車內容
  cartElement.innerHTML = '';

  cart.forEach(item => {
    const itemElement = document.createElement('div');
    itemElement.classList.add('cart-item');

    const nameElement = document.createElement('h3');
    nameElement.textContent = item.name;
    itemElement.appendChild(nameElement);

    const priceElement = document.createElement('p');
    priceElement.textContent = `單價：$${item.price}`;
    itemElement.appendChild(priceElement);

    const quantityElement = document.createElement('p');
    quantityElement.textContent = `數量：${item.quantity}`;
    itemElement.appendChild(quantityElement);

    const removeButton = document.createElement('button');
    removeButton.textContent = '移除';
    removeButton.addEventListener('click', () => {
      removeFromCart(item.id);
    });
    itemElement.appendChild(removeButton);

    cartElement.appendChild(itemElement);
  });
}

// 移除購物車中的商品
function removeFromCart(productId) {
  cart = cart.filter(item => item.id !== productId);
  updateCart();
}

// 更新購物車總金額
function renderTotalPrice() {
  const totalPrice = cart.reduce((total, item) => {
    return total + (item.price * item.quantity);
  }, 0);

  const totalElement = document.querySelector('.total-price');
  totalElement.textContent = `總金額：$${totalPrice.toFixed(2)}`;
}

// 將購物車保存到本地存儲
function saveCartToLocalStorage() {
  localStorage.setItem('cart', JSON.stringify(cart));
}

// 初始化購物車
function initCart() {
  const savedCart = localStorage.getItem('cart');

  if (savedCart) {
    cart = JSON.parse(savedCart);
    updateCart();
  }
}

// 初始化購物車
initCart();

在這段代碼中，我們首先定義了一個名為cart的數組，用於存儲購物車中的產品。當用戶點擊“添加至購物車”按鈕時，我們會先查找該產品是否已經存在於購物車中。如果是，我們只需要增加該產品的數量。如果不是，則需要將該產品添加到購物車數組中。最後，我們調用updateCart函數來更新購物車。

在updateCart函數中，我們先調用了renderCartItems函數來渲染購物車中的產品列表。然後，我們又調用了renderTotalPrice函數來計算並渲染總金額。最後，我們調用了saveCartToLocalStorage函數將購物車保存到本地存儲。

在renderCartItems函數中，我們首先選擇了HTML中的.cart元素，然後使用forEach方法遍歷購物車數組並創建相應的HTML元素來顯示每個產品的詳細信息。然後，我們附加這些元素到.cart元素中，從而完成了購物車商品列表的渲染。

在removeFromCart函數中，我們使用filter方法從購物車數組中刪除指定的產品。然後，我們調用updateCart函數來更新購物車。

在renderTotalPrice函數中，我們使用reduce方法計算購物車中所有產品的總價格。然後，我們選擇HTML中的.total-price元素並將總價格渲染到該元素中。

最後，我們定義了saveCartToLocalStorage函數，它使用localStorage.setItem方法將購物車保存到本地存儲。在initCart函數中，我們首先從本地存儲中獲取購物車並將其轉換為對象。然後，我們調用updateCart函數來更新購物車。

現在，如果您刷新頁面，您將能夠添加產品到購物車中，並且購物車中的產品數量和總價格也會被更新。您可以通過單擊購物車中的“移除”按鈕來刪除產品。

更改商品數量

現在，我們要為用戶添加更改商品數量的功能。我們將使用增加數量和減少數量的按鈕來實現這一點。

// 更改商品數量
function changeQuantity(productId, action) {
  const item = cart.find(item => item.id === productId);

  if (!item) {
    return;
  }

  if (action === 'minus') {
    if (item.quantity > 1) {
      item.quantity--;
    }
  } else if (action === 'plus') {
    if (item.quantity < item.inStock) {
      item.quantity++;
    }
  }

  updateCart();
}

// 渲染購物車商品數量
function renderCartQuantity() {
  const quantityElement = document.querySelector('.cart-quantity');
  const totalQuantity = cart.reduce((total, item) => total + item.quantity, 0);
  quantityElement.textContent = `購物車 (${totalQuantity})`;
}

// 調用渲染購物車商品數量函數
renderCartQuantity();

在這段代碼中，我們首先定義了changeQuantity函數，它根據指定的動作來增加或減少產品的數量。在函數中，我們首先使用find方法找到要更改數量的產品，然後根據動作來更改數量。如果數量超出了庫存數量範圍，則什麼也不做。最後，我們調用了updateCart函數來更新購物車。

在renderCartQuantity函數中，我們計算購物車中所有產品的總數量，並將它渲染到.cart-quantity元素中。

現在，如果您在購物車中更改產品數量，購物車數量也將得到更新。

移除購物車中的商品

現在，讓我們為用戶添加從購物車中刪除商品的功能。

// 移除購物車中的商品
function removeFromCart(productId) {
  cart = cart.filter(item => item.id !== productId);
  updateCart();
}

在這段代碼中，我們使用filter方法從購物車中刪除指定的商品。然後，我們調用updateCart函數來更新購物車。

計算並渲染總金額

現在，我們需要計算並渲染購物車的總金額。

// 計算並渲染總金額
function renderTotalPrice() {
  const totalPrice = cart.reduce((total, item) => {
    return total + (item.price * item.quantity);
  }, 0);

  const totalElement = document.querySelector('.total-price');
  totalElement.textContent = `總金額：$${totalPrice.toFixed(2)}`;
}

在這段代碼中，我們使用reduce方法計算購物車中所有商品的總金額。然後，我們選擇HTML中的.total-price元素並將總金額渲染到該元素中。

將購物車保存到本地存儲

現在，我們需要使用本地存儲來保存用戶的購物車，以便在頁面刷新後仍然能夠查看購物車中的商品。

// 將購物車保存到本地存儲
function saveCartToLocalStorage() {
  localStorage.setItem('cart', JSON.stringify(cart));
}

// 初始化購物車
function initCart() {
  const savedCart = localStorage.getItem('cart');

  if (savedCart) {
    cart = JSON.parse(savedCart);
    updateCart();
  }
}

// 初始化購物車
initCart();

在這段代碼中，我們首先定義了saveCartToLocalStorage函數，它使用localStorage.setItem方法將購物車保存到本地存儲。然後，在initCart函數中，我們首先從本地存儲中獲取購物車並將其轉換為對象。然後，我們調用updateCart函數來更新購物車。

現在，如果您刷新頁面，您將能夠在購物車中保留商品。

總結和下一步行動

通過這個購物車教程，我們學會了如何使用JavaScript來構建一個購物車，以及如何將購物車保存到本地存儲中。現在，您可以根據您的需求擴展購物車功能，例如增加更多的產品屬性，實現更複雜的數量更改邏輯，以及改進購物車的外觀和用戶體驗。

有關詳細購物車示例的完整代碼，您可以在以下資源中找到：

GitHub Repository

有任何問題嗎？在下面的評論中讓我們知道！

问题与回答

问题：如何确保用户不会向购物车中添加超过库存数量的商品？

回答：在添加商品到购物车的逻辑中，我们可以在增加商品数量之前检查所选商品的库存数量，如果当前数量已经达到库存上限，则不增加。该逻辑可以在 addToCart 函数中添加。

if (existingCartItem) {
  if (existingCartItem.quantity < product.inStock) {
    existingCartItem.quantity++;
   }
} else {
  cart.push({
    id: product.id,
    name: product.name,
    price: product.price,
    quantity: 1
  });
}

在这段代码中，我们会检查购物车中已存在商品的数量，如果小于库存上限，则增加商品数量。如果购物车中尚未存在该商品，则添加该商品。

问题：如何在用户刷新页面后恢复购物车中的商品？

回答：可以使用本地存储来保存购物车数据，并在页面刷新后从本地存储中获取数据。我们可以在 saveCartToLocalStorage 函数中保存购物车数据，并在 initCart 函数中从本地存储中获取购物车数据并更新购物车。

// 保存购物车到本地存储
function saveCartToLocalStorage() {
  localStorage.setItem('cart', JSON.stringify(cart));
}

// 初始化购物车
function initCart() {
  const savedCart = localStorage.getItem('cart');

  if (savedCart) {
    cart = JSON.parse(savedCart);
    updateCart();
  }
}

// 初始化购物车
initCart();

在这个例子中，我们使用 localStorage.setItem 将购物车以 JSON 字符串的形式保存到本地存储中。在 initCart 函数中，我们通过 localStorage.getItem 从本地存储中获取购物车数据，并更新购物车。

请记住，本地存储只能存储字符串类型的数据，所以我们需要使用 JSON.stringify 将购物车转换为字符串，然后使用 JSON.parse 将字符串转换回对象。

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