Shopping Cart Component - Copy this Html, Bootstrap Component to your project
Create html css about cart have Product(img and name) Price Qty Delete button Total and Pay Here is example <div class="form popup" id="myCart" style="display: none"> <div class="form container"> <h2 style=" text align: left; color: #9f8a46; font weight: 600; margin: 0 0 2% 0; "> GIỎ HÀNG </h2> <div class="cart row"> <span class="cart item cart header cart column">Sản phẩm</span> <span class="cart price cart header cart column">Đơn giá</span> <span class="cart quantity cart header cart column">Số lượng</span> </div> <div class="cart items"> <div class="cart row"> <div class="cart item cart column"> <img class="cart item image" src="/media/guitar img.webp" width="100" height="100" /> <span class="cart item title"> Ibanez Artwood AW84CE WK Acoustic Guitar, Weathered Black </span> </div> <span class="cart price cart column">383.99</span> <div class="cart quantity cart column"> <input class="cart quantity input" type="number" min="1" value="1" /> <button class="btn danger" type="button"> Xóa </button> </div> </div> </div> <div class="cart total"> <strong class="cart total title">Tổng:</strong> <span class="cart total price">$383.99</span> </div> <button type="submit" class="btn btn pay" onclick="pay()">THANH TOÁN</button> <button type="button" class="btn cancel" onclick="closeCart()"> <i class="fa solid fa xmark"></i> </button> </div> </div> #myCart .form container { max width: 560px; min width: 560px; }.form container .btn { background color: #8c7422; color: white; padding: 16px 20px; border: none; cursor: pointer; width: 100%; margin bottom: 10px; opacity: 0.8; border radius: 5px; font size: 16px; font weight: 600; } .btn pay { width: 39% !important; position: relative; right: 61%; font size: 18px !important; font weight: 800; }
