5-4-4 格式化購物清單

教學影片(YT)：https://www.youtube.com/watch?v=-fFu7JQX_Fs&list=PLNqDmSVNb0mdO9Bn5wzs5kJk1Hxq0MBl6&index=27

增加購物車標題

<h1 class="text-center mt-3"><?= global.web_title?> 購物車 </h1>

格式化購物清單

表格標題

 <thead>
                                <tr>
                                    <th>圖片</th>
                                    <th>商品</th>
                                    <th class="text-end" style="width: 100px;">單價</th>
                                    <th class="text-end" style="width: 100px;">數量</th>
                                    <th class="text-end" style="width: 100px;">小計</th>
                                    <th class="text-center" style="width: 80px;">刪除</th>
                                </tr>
                            </thead>

js

Object.values(cart).forEach(item => {
              const subtotal = item.price * item.quantity;
              total += subtotal;

              cartItems.innerHTML += `
                  <tr>
                      <td><img src="${item.img}" alt="${item.title}" style="width: 50px;"></td>
                      <td>${item.title}</td>
                      <td class="text-end">${item.price}</td>
                      <td class="text-end">
                          <input type="number" class="form-control ms-auto text-end" 
                              value="${item.quantity}" min="0" 
                              onchange="updateQuantity('${item.sn}', this.value)">
                      </td>
                      <td class="text-end">${subtotal}</td>
                      <td class="text-center">
                          <button class="btn btn-sm text-danger" onclick="removeItem('${item.sn}')">
                              <i class="bi bi-trash"></i>
                          </button>
                      </td>
                  </tr>
              `;
          });