白骑士的HTML教学实战项目篇 4.2 在线商店

原创已于 2024-08-23 10:45:15 修改 · 309 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

于 2024-08-22 08:31:44 首次发布

教学同时被 3 个专栏收录

339 篇文章

订阅专栏

项目实践

30 篇文章

订阅专栏

HTML

21 篇文章

订阅专栏

系列目录

上一篇：白骑士的HTML教学实战项目篇 4.1 创建个人网站

在线商店是电子商务领域的核心应用，也是Web开发中一个非常实用的项目。在本篇博客中，我们将指导你如何创建一个基本的在线商店，包括商品展示页面、购物车功能以及订单处理与支付集成。这些功能将帮助你掌握Web开发中的关键技术，同时也能为你未来的开发项目打下坚实的基础。

商品展示页面

创建商品展示页面的结构

商品展示页面是在线商店的核心部分，它向用户展示可供购买的产品信息。首先，我们需要创建一个HTML结构来展示商品的图片、名称、价格及描述。例如：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Online Store</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header>
        <h1>Welcome to My Online Store</h1>

        <nav>
            <a href="#home">Home</a>
            <a href="#shop">Shop</a>
            <a href="#cart">Cart</a>
        </nav>
    </header>

    <main id="shop">
        <h2>Products</h2>

        <div class="product-list">
            <div class="product">
                <img src="product1.jpg" alt="Product 1">
                <h3>Product 1</h3>
                <p>$10.00</p>
                <button>Add to Cart</button>
            </div>

            <div class="product">
                <img src="product2.jpg" alt="Product 2">
                <h3>Product 2</h3>
                <p>$15.00</p>
                <button>Add to Cart</button>
            </div>

            <!-- More products... -->
        </div>
    </main>

    <footer>
        <p>&copy; 2024 My Online Store</p>
    </footer>
</body>
</html>

使用CSS美化商品展示页面

使用CSS为商品展示页面添加样式，确保页面美观且用户体验良好。例如：

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: white;
    padding: 10px 0;
    text-align: center;
}

header nav a {
    color: white;
    margin: 0 15px;
    text-decoration: none;
}

.product-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 20px;
}

.product {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    margin: 10px;
    text-align: center;
    width: 200px;
}

.product img {
    max-width: 100%;
    height: auto;
}

.product h3 {
    font-size: 1.2em;
    margin: 10px 0;
}

.product p {
    font-size: 1em;
    color: #333;
}

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

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

购物车功能

实现购物车的基础功能

购物车功能允许用户选择他们想要购买的商品并暂时保存这些商品，直到他们准备下单。我们将通过JavaScript来实现这一功能。

购物车结构：添加一个购物车页面或弹出窗口，用于显示用户已添加的商品。

例如：

<div id="cart">
    <h2>Your Cart</h2>

    <ul id="cart-items">
        <!-- Cart items will be dynamically added here -->
    </ul>

    <p>Total: $<span id="total-price">0.00</span></p>

    <button id="checkout">Checkout</button>
</div>

使用JavaScript实现购物车逻辑

使用JavaScript来处理购物车的核心逻辑，如添加商品、计算总价和删除商品。例如：

document.querySelectorAll('.product button').forEach(button => {
    button.addEventListener('click', addToCart);
});


let cart = [];


function addToCart(event) {
    const product = event.target.parentElement;
    const productName = product.querySelector('h3').innerText;
    const productPrice = parseFloat(product.querySelector('p').innerText.replace('$', ''));
    const productInCart = cart.find(item => item.name === productName);
    if (productInCart) {
        productInCart.quantity += 1;
    } else {
        cart.push({ name: productName, price: productPrice, quantity: 1 });
    }

    renderCart();
}


function renderCart() {
    const cartItems = document.getElementById('cart-items');
    cartItems.innerHTML = '';
    let totalPrice = 0;

    cart.forEach(item => {
        const li = document.createElement('li');
        li.innerText = ‘${item.name} - $${item.price} x ${item.quantity}‘;
        cartItems.appendChild(li);
        totalPrice += item.price * item.quantity;
    });

    document.getElementById('total-price').innerText = totalPrice.toFixed(2);
}

订单处理与支付集成

处理订单信息

当用户点击“Checkout”按钮时，需要将订单信息（如购物车内容、总价）发送到服务器进行处理。可以通过表单或API请求将这些信息提交给后端服务器。例如：

document.getElementById('checkout').addEventListener('click', processOrder);

function processOrder() {
    if (cart.length === 0) {
        alert('Your cart is empty!');
        return;
    }

    // Mock order processing
    alert('Processing your order...');
    // In a real application, you would send the cart data to a server here.
}

集成支付系统

集成支付系统是在线商店的关键步骤之一。常见的支付网关包括PayPal、Stripe等。通过这些支付网关，可以安全地处理用户的付款。

集成Stripe支付

首先，注册并设置Stripe账户。
使用Stripe提供的JavaScript库（如Stripe.js）集成支付功能。

例如：

<form id="payment-form">
    <div id="card-element"><!-- Stripe Element will be inserted here --></div>
    <button type="submit">Pay</button>
</form>


<script src="https://js.stripe.com/v3/"></script>


<script>
    const stripe = Stripe('your-publishable-key-here');
    const elements = stripe.elements();
    const card = elements.create('card');

    card.mount('#card-element');

    const form = document.getElementById('payment-form');

    form.addEventListener('submit', function(event) {

        event.preventDefault();

        stripe.createToken(card).then(function(result) {
            if (result.error) {
                // Display error.message in your UI
            } 

            else {
                // Send the token to your server
                processPayment(result.token);
            }
        });
    });

    function processPayment(token) {
        // Use AJAX to send the token and cart details to your server for payment processing
    }
</script>

总结

在本篇博客中，我们详细讲解了如何创建一个基本的在线商店，从商品展示页面、购物车功能，到订单处理与支付集成。通过这些步骤，你现在已经掌握了在线商店的核心功能实现。创建在线商店不仅能提升你的开发技能，还能为你未来的电子商务项目奠定基础。希望通过这篇教程，你能顺利构建出一个功能完善的在线商店。欢迎继续关注我们的系列教程，学习更多关于Web开发的实用技巧！

下一篇：白骑士的HTML教学实战项目篇 4.3 博客网站