Shop

[binn668]

<title>Web Bán Hàng</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; text-align: center; background-color: #f4f4f4; }

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

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

    #products {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 20px;
    }

    .product {
        background: white;
        padding: 15px;
        margin: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
        width: 200px;
    }

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

    .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
    }

    .modal-content {
        background: white;
        padding: 20px;
        margin: 10% auto;
        width: 50%;
        text-align: center;
    }

    .close {
        float: right;
        font-size: 24px;
        cursor: pointer;
    }
</style>

Shop Online

🛒 Giỏ Hàng (0)

<section id="products">
    <!-- Sản phẩm sẽ được hiển thị ở đây -->
</section>

<div id="cart-modal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeCart()">&times;</span>
        <h2>Giỏ Hàng</h2>
        <div id="cart-items"></div>
        <button onclick="checkout()">Thanh Toán</button>
    </div>
</div>

<script>
    const products = [
        { id: 1, name: "Sản phẩm 1", price: 100000, image: "https://via.placeholder.com/150" },
        { id: 2, name: "Sản phẩm 2", price: 200000, image: "https://via.placeholder.com/150" },
        { id: 3, name: "Sản phẩm 3", price: 300000, image: "https://via.placeholder.com/150" }
    ];

    const productContainer = document.getElementById("products");
    const cartCount = document.getElementById("cart-count");
    const cartModal = document.getElementById("cart-modal");
    const cartItems = document.getElementById("cart-items");

    let cart = [];

    function loadProducts() {
        products.forEach(product => {
            const productItem = document.createElement("div");
            productItem.classList.add("product");
            productItem.innerHTML = `
                <img src="${product.image}" alt="${product.name}">
                <h3>${product.name}</h3>
                <p>Giá: ${product.price.toLocaleString()}đ</p>
                <button onclick="addToCart(${product.id})">Thêm vào giỏ</button>
            `;
            productContainer.appendChild(productItem);
        });
    }

    function addToCart(id) {
        const product = products.find(p => p.id === id);
        cart.push(product);
        cartCount.textContent = cart.length;
    }

    function viewCart() {
        cartModal.style.display = "block";
        cartItems.innerHTML = "";
        cart.forEach((item, index) => {
            const cartItem = document.createElement("div");
            cartItem.innerHTML = `
                <p>${item.name} - ${item.price.toLocaleString()}đ</p>
                <button onclick="removeFromCart(${index})">Xóa</button>
            `;
            cartItems.appendChild(cartItem);
        });
    }

    function removeFromCart(index) {
        cart.splice(index, 1);
        cartCount.textContent = cart.length;
        viewCart();
    }

    function closeCart() {
        cartModal.style.display = "none";
    }

    function checkout() {
        alert("Thanh toán thành công!");
        cart = [];
        cartCount.textContent = "0";
        closeCart();
    }

    loadProducts();
</script>