Enhanced Shopping Cart - Copy this Html, Tailwind Component to your project
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8" /> <meta name="viewport" content="width=device width, initial scale=1.0" /> <meta http equiv="X UA Compatible" content="ie=edge" /> <title>Shopping Cart</title> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Bungee+Inline&family=Nunito+Sans:wght@400;600;700;800;900&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font awesome/4.7.0/css/font awesome.min.css" integrity="sha384 wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <style> *, *::before, *::after { margin: 0; padding: 0; box sizing: inherit; } html { font size: 62.5%; box sizing: border box; } body { padding: 2rem 4rem; line height: 1.7; font family: "Nunito Sans", sans serif; color: #555; min height: 100vh; background image: linear gradient(to bottom right, #67b26f, #4ca2cd); } img { max width: 100%; vertical align: middle; border radius: 4px; } a { text decoration: none; color: #333333; } a:hover { color: #f58551; } button { background color: #16cc9b; border: 2px solid #16cc9b; color: #ffffff; transition: all 0.25s linear; cursor: pointer; } button::after { position: relative; right: 0; content: " \276f"; transition: all 0.15s linear; } button:hover { background color: #f58551; border color: #f58551; } button:hover::after { right: 5px; } button:focus { outline: none; } ul { padding: 0; margin: 0; list style type: none; } input { transition: all 0.25s linear; } input[type=number]:: webkit inner spin button, input[type=number]:: webkit outer spin button { webkit appearance: none; moz appearance: none; appearance: none; margin: 0; } input { outline: none; } .container { width: 90%; margin: 0 auto; overflow: auto; } /* HEADER */ header h1 { font family: "Bungee Inline", sans serif; font weight: 400; font size: 3rem; color: white; margin bottom: 2rem; text align: center; word spacing: 3px; } header.container { margin bottom: 1.5rem; } header .breadcrumb li { float: left; padding: 0 6px; } header .breadcrumb li:first child { padding left: 2px; } header .breadcrumb li:not(:last child)::after { content: " \276f"; padding left: 8px; } header .count { float: right; } /* PRODUCT LIST */ .products { border top: 1px solid #ddd; } .products>li { padding: 1rem 0; background color: #fff; padding: 1rem; margin bottom: 1rem; } .row { display: flex; } .col.left { flex basis: 70%; } .col.right { flex basis: 30%; display: flex; align items: center; } .detail { padding: 0 0.5rem; line height: 2.2rem; } .detail .name { font size: 1.2rem; font weight: 700; } .detail .description { font size: 1rem; margin: 0.7rem 0; line height: 1.4; } .detail .price { font size: 1.2rem; font weight: 700; } .quantity, .remove { width: 50%; text align: center; } .quantity>input { display: inline block; width: 60px; height: 60px; position: relative; left: calc(50% 30px); background: #fff; border: 2px solid #ddd; text align: center; font: 600 1.5rem Helvetica, Arial, sans serif; } .quantity>input:hover, .quantity>input:focus { border color: #f58551; } .close { cursor: pointer; font size: 1.5rem; } .close:hover { color: #f58551; } /* SUMMARY */ .promotion, .summary, .checkout { float: left; width: 100%; margin top: 1.5rem; } .promotion>label { float: left; width: 100%; margin bottom: 1rem; } .promotion>input { float: left; width: 80%; font size: 1rem; padding: 1rem 1.5rem; border: 2px solid #16cc9b; } .promotion:hover>input { border color: #f58551; } .promotion>button { float: left; width: 20%; padding: 1rem 0.5rem; } .promotion:hover>button { border color: #f58551; background color: #f58551; } .promotion>button::after { content: "\276f"; font size: 1rem; } .summary { font size: 1.2rem; text align: right; } .summary ul li { padding: 0.5rem 0; } .summary ul li span { display: inline block; width: 30%; } .summary ul li.total { font weight: bold; } .hide { display: none !important; } </style> </head> <body> <main> <header class="container"> <h1>Shopping Cart</h1> <ul class="breadcrumb"> <li>Home</li> <li>Shopping Cart</li> </ul> <! Total product > <span class="count">3 items in the bag</span> </header> <section class="container"> <ul class="products"> <! Products will be rendered here by JavaScript > </ul> </section> <section class="option container container"> <! Mã giảm giá > <div class="promotion"> <label for="promo code">Have A Promo Code?</label> <input type="text" id="promo code" autocomplete="off" /> <button type="button"></button> </div> <! Tổng tiền > <div class="summary"> <ul> <li class="subtotal">Subtotal <span>$21.97</span></li> <li class="vat">VAT<span>$5.00</span></li> <li class="discount hide">Discount<span>$5.00</span></li> <li class="total">Total <span>$26.97</span></li> </ul> </div> </section> </main> <script> // === HELP FUNCTIONS === // Random id function randomId() { return Math.floor(Math.random() * 100000); } // Convert number to money VND function convertMoney(num) { return num.toLocaleString('it IT', { style: 'currency', currency: 'VND' }); } // === KHAI BÁO BIẾN === // Danh sách sản phẩm let products = [ { id: randomId(), name: 'Áo kiểu nữ cam đất phối cổ trắng dập ly', description: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, velit.', price: 250000, image: 'https://image.yes24.vn/Upload/ProductImage/anhduong201605/1947415_L.jpg?width=550&height=550', count: 1, }, { id: randomId(), name: 'Áo trắng bèo lé đen tay loe dễ thương', description: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, velit.', price: 350000, image: 'https://image.yes24.vn/Upload/ProductImage/anhduong201605/1914666_L.jpg?width=550&height=550', count: 1, }, ]; // === TRUY CẬP VÀO CÁC THÀNH PHẦN === let productsEle = document.querySelector('.products'); // === MAIN FUNCTION === // Render và hiển thị dữ liệu function renderUI(arr) { productsEle.innerHTML = ''; // Cập nhật số lượng sản phẩm trong cart let countEle = document.querySelector('.count'); countEle.innerText = `${updateTotalItem(arr)} items in the bag`; if (arr.length == 0) { productsEle.insertAdjacentHTML( 'afterbegin', '<li>Không có sản phẩm nào trong giỏ hàng</li>' ); document.querySelector('.option container').style.display = 'none'; return; } for (let i = 0; i < arr.length; i++) { const p = arr[i]; productsEle.innerHTML += ` <li class="row"> <div class="col left"> <div class="thumbnail"> <a href="#"> <img src="${p.image}" alt="${p.name}"> </a> </div> <div class="detail"> <div class="name"><a href="#">${p.name}</a></div> <div class="description"> ${p.description} </div> <div class="price">${convertMoney(p.price)}</div> </div> </div> <div class="col right"> <div class="quantity"> <input type="number" class="quantity" step="1" value="${p.count}"> </div> <div class="remove"> <span class="close" onclick="removeItem(${p.id})"> <i class="fa fa times" aria hidden="true"></i> </span> </div> </div> </li> `; } } // Cập nhật số lượng sản phẩm function updateTotalItem(arr) { let total = 0; for (let i = 0; i < arr.length; i++) { const p = arr[i]; total += p.count; } return total; } // Remove item trong cart function removeItem(id) { for (let i = 0; i < products.length; i++) { if (products[i].id == id) { products.splice(i, 1); } } renderUI(products); } window.onload = renderUI(products); </script> </body> </html> update my code
