day 4 Javascript網頁程式管理線上購物系統

2024 iThome 鐵人賽

DAY 4

JavaScript

Javascript網頁程式管理系統系列第 4 篇

16th鐵人賽

neilsu02

2024-09-05 22:31:07

196 瀏覽

分享至

今天是第四天我們可以寫一個javascript網頁程式管理線上購物系統，現在的人們越來越愛線上購物，因此我想自己寫一個javascript網頁程式管理線上購物系統，以下是程式碼
當然，以下是一個簡單的線上購物管理系統範例，使用 JavaScript、HTML 和 CSS，功能包括：商品列表、加入購物車、計算總金額，以及結帳功能。這個範例展示了基本的購物車操作邏輯，你可以依需求進一步擴展功能。

1. HTML 部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Online Shopping Management System</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>線上購物管理系統</h1>
        <div class="cart">
            <span>購物車</span>
            <span id="cart-count">0</span>
        </div>
    </header>
    
    <main>
        <div class="product-list">
            <h2>商品列表</h2>
            <div class="product" data-id="1" data-name="產品A" data-price="100">
                <h3>產品A</h3>
                <p>價格: $100</p>
                <button class="add-to-cart">加入購物車</button>
            </div>
            <div class="product" data-id="2" data-name="產品B" data-price="200">
                <h3>產品B</h3>
                <p>價格: $200</p>
                <button class="add-to-cart">加入購物車</button>
            </div>
            <div class="product" data-id="3" data-name="產品C" data-price="300">
                <h3>產品C</h3>
                <p>價格: $300</p>
                <button class="add-to-cart">加入購物車</button>
            </div>
        </div>

        <div class="cart-details">
            <h2>購物車</h2>
            <ul id="cart-items"></ul>
            <p>總金額: $<span id="total-price">0</span></p>
            <button id="checkout">結帳</button>
        </div>
    </main>

    <script src="script.js"></script>
</body>
</html>

2. CSS 部分（`style.css`）

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background-color: #333;
    color: white;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

h1 {
    margin: 0;
}

.cart {
    background-color: #555;
    padding: 5px 10px;
    border-radius: 5px;
}

main {
    padding: 20px;
    display: flex;
    justify-content: space-between;
}

.product-list, .cart-details {
    width: 45%;
}

.product {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

button {
    background-color: #28a745;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #218838;
}

.cart-details {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#cart-items {
    list-style: none;
    padding: 0;
}

#cart-items li {
    margin-bottom: 10px;
}

3. JavaScript 部分（`script.js`）

let cart = [];
let totalPrice = 0;

// 更新購物車計數
function updateCartCount() {
    document.getElementById('cart-count').textContent = cart.length;
}

// 更新總價格
function updateTotalPrice() {
    totalPrice = cart.reduce((sum, item) => sum + item.price, 0);
    document.getElementById('total-price').textContent = totalPrice;
}

// 顯示購物車內容
function displayCart() {
    const cartItemsElement = document.getElementById('cart-items');
    cartItemsElement.innerHTML = '';
    cart.forEach(item => {
        const li = document.createElement('li');
        li.textContent = `${item.name} - $${item.price}`;
        cartItemsElement.appendChild(li);
    });
}

// 加入購物車
function addToCart(product) {
    cart.push(product);
    updateCartCount();
    updateTotalPrice();
    displayCart();
}

// 結帳
document.getElementById('checkout').addEventListener('click', () => {
    if (cart.length === 0) {
        alert('購物車是空的');
        return;
    }
    alert(`購物成功！總金額為 $${totalPrice}`);
    cart = [];
    updateCartCount();
    updateTotalPrice();
    displayCart();
});

// 事件監聽器：加入購物車按鈕
document.querySelectorAll('.add-to-cart').forEach(button => {
    button.addEventListener('click', (event) => {
        const productElement = event.target.closest('.product');
        const product = {
            id: productElement.getAttribute('data-id'),
            name: productElement.getAttribute('data-name'),
            price: parseInt(productElement.getAttribute('data-price'), 10),
        };
        addToCart(product);
    });
});

功能說明：

商品列表：網頁顯示三個商品，每個商品都有加入購物車的按鈕。
購物車功能：使用者點擊「加入購物車」後，商品會添加到購物車，右上角的購物車數量會更新。
計算總金額：購物車內容的總金額會自動計算並顯示。
結帳：按下「結帳」按鈕後，會彈出訊息顯示購物總額，並清空購物車。

我會主要以javascript來介紹

1. 購物車和總金額的初始化

let cart = [];
let totalPrice = 0;

這兩行代碼初始化了兩個變數：

cart：是一個空的陣列，用來存放所有加入購物車的商品。每個商品都是一個物件（包含商品的 id、name 和 price）。
totalPrice：一開始設定為 0，用來儲存購物車內所有商品的總價格。

2. 更新購物車數量

function updateCartCount() {
    document.getElementById('cart-count').textContent = cart.length;
}

這個函數用來更新購物車右上角顯示的商品數量：

cart.length 是購物車中商品的數量。
使用 document.getElementById('cart-count') 尋找頁面上的購物車數量顯示區域，然後將 textContent 設定為 cart.length，即購物車中的商品數。

3. 更新總價格

function updateTotalPrice() {
    totalPrice = cart.reduce((sum, item) => sum + item.price, 0);
    document.getElementById('total-price').textContent = totalPrice;
}

這個函數計算購物車中所有商品的總價格並顯示出來：

cart.reduce() 是 JavaScript 的一個陣列方法，將購物車中的每個商品的 price 累加起來。sum 是累加值，item.price 是當前商品的價格。
最後將 totalPrice 設定為計算的結果，並更新到頁面上的總價格區域，這裡使用 document.getElementById('total-price').textContent 設置頁面的總金額顯示。

4. 顯示購物車內容

function displayCart() {
    const cartItemsElement = document.getElementById('cart-items');
    cartItemsElement.innerHTML = '';
    cart.forEach(item => {
        const li = document.createElement('li');
        li.textContent = `${item.name} - $${item.price}`;
        cartItemsElement.appendChild(li);
    });
}

這個函數用來顯示購物車內的所有商品：

先找到頁面上的購物車列表區域 (cart-items)，然後將其內容清空 (innerHTML = '')，確保不會重複顯示舊的購物車內容。
cart.forEach() 用來迭代購物車內的每個商品，對每個商品創建一個 <li> 元素，並將商品名稱和價格 (item.name 和 item.price) 設為列表項的內容。
最後將這個 <li> 元素添加到購物車的列表區域中 (appendChild(li))。

5. 加入購物車的邏輯

function addToCart(product) {
    cart.push(product);
    updateCartCount();
    updateTotalPrice();
    displayCart();
}

這個函數負責將商品加入購物車，並更新相關顯示：

cart.push(product)：將傳入的商品物件（product）加入到購物車陣列中。
加入商品後，呼叫 updateCartCount() 更新購物車商品數量、呼叫 updateTotalPrice() 更新總價格，然後呼叫 displayCart() 來更新顯示購物車內容。

6. 結帳邏輯

document.getElementById('checkout').addEventListener('click', () => {
    if (cart.length === 0) {
        alert('購物車是空的');
        return;
    }
    alert(`購物成功！總金額為 $${totalPrice}`);
    cart = [];
    updateCartCount();
    updateTotalPrice();
    displayCart();
});

這段程式碼負責處理當使用者點擊「結帳」按鈕時發生的事件：

使用 addEventListener() 將「結帳」按鈕的點擊事件綁定到一個函數。
如果購物車是空的 (cart.length === 0)，會彈出提示框 (alert('購物車是空的')) 並停止執行（return）。
否則，顯示購物成功訊息，並顯示總金額 (totalPrice)。
結帳後，將購物車內容清空（cart = []），並更新頁面上的顯示（更新購物車數量、總價格和購物車內容）。

7. 加入購物車按鈕事件綁定

document.querySelectorAll('.add-to-cart').forEach(button => {
    button.addEventListener('click', (event) => {
        const productElement = event.target.closest('.product');
        const product = {
            id: productElement.getAttribute('data-id'),
            name: productElement.getAttribute('data-name'),
            price: parseInt(productElement.getAttribute('data-price'), 10),
        };
        addToCart(product);
    });
});

這段程式碼會為每個「加入購物車」按鈕綁定點擊事件：

document.querySelectorAll('.add-to-cart') 選取所有 class="add-to-cart" 的按鈕，然後使用 forEach() 來為每個按鈕綁定點擊事件。
當按鈕被點擊時，觸發事件處理函數：
- event.target 是指被點擊的按鈕，closest('.product') 是從按鈕找到最近的父級 .product 元素。
- 從 productElement 提取商品的 id、name 和 price，並將它們放入一個商品物件（product）中。
- 最後呼叫 addToCart(product) 將這個商品加入購物車。