Shopping Cart Example (HTML + Javascript)

C:UsersTung.NgoDesktopShoppingCartExample.html 1
<!DOCTYPE html>
<html>
<head>
    <title>SHOPPING CART EXAMPLE</title>
    <meta charset='utf8'>
    <script src="https://code.jquery.com/jquery2.1.3.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"
rel="stylesheet">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/
bootstrap.min.js"></script>
    <style>
        body {
            margin: 20px;
        }
        .wrapper {
            width: 1140px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <h1>SHOPPING CART EXAMPLE</h1>
        <div class="row">
            <div class="colmd4">
                <div class="imgthumbnail" style="border: 1px solid gray; width: 100%;
height: 160px"></div>
                <div>
                    iPhone 6 Plus
                </div>
                <div>
Giá: 17.000.000đ
                </div>
                <button id="product1" dataname="iPhone 6 Plus" dataprice="17000000"
class="addtocart btn btnprimary">Add to cart</button>
            </div>
                <div>
                    Nokia Lumia 1520
                </div>
                <div>
Giá: 12.500.000đ
                </div>
<button id="product2" dataname="Nokia Lumia 1520" data
price="12500000" class="addtocart btn btndanger">Add to cart</
button>
            </div>

                <div>
                    Samsung Galaxy Note 4
                </div>
                <div>
Giá: 18.500.000đ
                </div>
<button id="product3" dataname="Samsung Galaxy Note 4" data
price="18500000" class="addtocart btn btninfo">Add to cart</
button>
            </div>
        </div>
        <br />
        <div class="row">
            <table class="table tablebordered" id="tableproducts">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Name</th>
                        <th>Price</th>
                        <th>Quantity</th>
                        <th>Total</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div>
            <button class="btn btnlg btnsuccess" id="buttonclear">Clear</button>
        </div>
    </div>
    <div class="textright">
        <hr />
        <address>
            Developed by Ngo Thanh Tung Softech Aptech
        </address>
    </div>
</body>
</html>
<script>
// Định nghĩa một mảng các phần tử sẽ bỏ vào giỏ hàng
    var shoppingCartItems = [];
    $(document).ready(function () {
// Kiểm tra nếu đã có sessionStorage["shoppingcartitems"] hay chưa?
        if (sessionStorage["shoppingcartitems"] != null) {
shoppingCartItems = JSON.parse(sessionStorage["shoppingcart

items"].toString());
        }
// Hiển thị thông tin từ giỏ hàng
        displayShoppingCartItems();
    });
// Sự kiện click các button có class=".addtocart"
    $(".addtocart").click(function () {
var button = $(this); // Lấy đối tượng button mà người dùng click
        var id = button.attr("id"); // id của sản phẩm là id của button
var name = button.attr("dataname"); // name của sản phẩm là thuộc tính data
name của button
var price = button.attr("dataprice"); // price của sản phẩm là thuộc tính
dataprice của button
        var quantity = 1; // Số lượng
        var item = {
            id: id,
            name: name,
            price: price,
            quantity: quantity
        };
        var exists = false;
        if (shoppingCartItems.length > 0) {
            $.each(shoppingCartItems, function (index, value) {
// Nếu mặt hàng đã tồn tại trong giỏ hàng thì chỉ cần tăng số lượng
mặt hàng đó trong giỏ hàng.
                if (value.id == item.id) {
                    value.quantity++;
                    exists = true;
                    return false;
                }
            });
        }
// Nếu mặt hàng chưa tồn tại trong giỏ hàng thì bổ sung vào mảng
        if (!exists) {
            shoppingCartItems.push(item);
        }
// Lưu thông tin vào sessionStorage
sessionStorage["shoppingcartitems"] = JSON.stringify(shoppingCartItems); //
Chuyển thông tin mảng shoppingCartItems sang JSON trước khi lưu vào
sessionStorage
// Gọi hàm hiển thị giỏ hàng
        displayShoppingCartItems();
    });

// Xóa hết giỏ hàng shoppingCartItems
    $("#buttonclear").click(function () {
        shoppingCartItems = [];
        sessionStorage["shoppingcartitems"] = JSON.stringify(shoppingCartItems);
        $("#tableproducts > tbody").html("");
    });
// Hiển thị giỏ hàng ra thẻ ul
    function displayShoppingCartItems() {
        if (sessionStorage["shoppingcartitems"] != null) {
shoppingCartItems = JSON.parse(sessionStorage["shoppingcart
items"].toString()); // Chuyển thông tin từ JSON trong sessionStorage
sang mảng shoppingCartItems.
            $("#tableproducts > tbody").html("");
// Duyệt qua mảng shoppingCartItems để append từng item dòng vào table
            $.each(shoppingCartItems, function (index, item) {
                var htmlString = "";
                htmlString += "<tr>";
                htmlString += "<td>" + item.id + "</td>";
                htmlString += "<td>" + item.name + "</td>";
                htmlString += "<td style='textalign: right'>" + item.price + "</td>";
htmlString += "<td style='textalign: right'>" + item.quantity + "</
td>";
htmlString += "<td style='textalign: right'>" + item.price *
item.quantity + "</td>";
                htmlString += "</tr>";
                $("#tableproducts > tbody:last").append(htmlString);
            });
        }
    }
</script>

Shopping Cart Example (HTML + Javascript)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Shopping Cart Example (HTML + Javascript)

Similar to Shopping Cart Example (HTML + Javascript) (20)

Recently uploaded

Recently uploaded (20)

Shopping Cart Example (HTML + Javascript)