購物車

購物車就是一個陣列。加入、改數量、刪掉，都是在改這個陣列，改完再把畫面畫一次。

商品清單

• 機械鍵盤$890
• 無線滑鼠$450
• USB-C 擴充座$1,200
• 27 吋螢幕$3,200

購物車

購物車是空的，快去挑選商品吧！

上面的範例另外限制了數量，也加了運費和滿額折扣。下面先做基本的：用一個陣列記下買了什麼。

兩份資料

products 是店裡有的商品。cart 是使用者選了的，一開始是空的。選過的商品多記一個 qty。

const products = [
  { id: 1, name: "T-Shirt", price: 480 },
  { id: 2, name: "Shoes", price: 1280 },
]

let cart = []
// 加進去之後長這樣：{ id: 1, name: "T-Shirt", price: 480, qty: 1 }

三個函式

加入時先找。找到就把數量加 1，找不到才放進陣列。同一件商品只會有一列。

function addToCart(id) {
  const product = products.find((p) => p.id === id)
  const item = cart.find((i) => i.id === id)

  if (item) {
    item.qty += 1
  } else {
    cart.push({ ...product, qty: 1 })
  }

  render()
}

改數量也是先找到那一列，再把 qty 加上去。減到 0 就刪掉。

function changeQty(id, n) {
  const item = cart.find((i) => i.id === id)
  if (!item) return

  item.qty += n
  if (item.qty < 1) {
    removeFromCart(id)
  } else {
    render()
  }
}

刪除留下 id 不同的那些。

function removeFromCart(id) {
  cart = cart.filter((i) => i.id !== id)
  render()
}

總金額是每一列的單價乘數量，再加起來。

const total = cart.reduce((sum, i) => sum + i.price * i.qty, 0)

把畫面畫出來

商品按鈕呼叫 addToCart，購物車的按鈕呼叫 changeQty 和 removeFromCart。render 負責把現在的 cart 畫到畫面上。

<h2>商品</h2>
<ul id="products"></ul>

<h2>購物車</h2>
<ul id="cart"></ul>
<p>總計 $<span id="total">0</span></p>

<script>
  const products = [
    { id: 1, name: "T-Shirt", price: 480 },
    { id: 2, name: "Shoes", price: 1280 },
  ]

  let cart = []

  function addToCart(id) {
    const product = products.find((p) => p.id === id)
    const item = cart.find((i) => i.id === id)

    if (item) {
      item.qty += 1
    } else {
      cart.push({ ...product, qty: 1 })
    }

    render()
  }

  function changeQty(id, n) {
    const item = cart.find((i) => i.id === id)
    if (!item) return

    item.qty += n
    if (item.qty < 1) {
      removeFromCart(id)
    } else {
      render()
    }
  }

  function removeFromCart(id) {
    cart = cart.filter((i) => i.id !== id)
    render()
  }

  function render() {
    document.querySelector("#products").innerHTML = products
      .map(
        (p) => `
        <li>
          ${p.name} $${p.price}
          <button onclick="addToCart(${p.id})">加入</button>
        </li>`,
      )
      .join("")

    document.querySelector("#cart").innerHTML = cart
      .map(
        (i) => `
        <li>
          ${i.name} x ${i.qty} = $${i.price * i.qty}
          <button onclick="changeQty(${i.id}, -1)">-</button>
          <button onclick="changeQty(${i.id}, 1)">+</button>
          <button onclick="removeFromCart(${i.id})">移除</button>
        </li>`,
      )
      .join("")

    const total = cart.reduce((sum, i) => sum + i.price * i.qty, 0)
    document.querySelector("#total").textContent = total
  }

  render()
</script>

下一步

想讓重新整理後購物車還在，把 cart 用 JSON.stringify 存進 localStorage，開頁時再讀回來。