shopping cart example (html + javascript)

C:\Users\Tung.Ngo\Desktop\ShoppingCartExample.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 class="colmd4"> <div class="imgthumbnail" style="border: 1px solid gray; width: 100%;

height: 160px"></div> <div> Nokia Lumia 1520 </div> <div>

Giá: 12.500.000đ </div>

<button id="product2" dataname="Nokia Lumia 1520" dataprice="12500000" class="addtocart btn btndanger">Add to cart</button>

</div>

C:\Users\Tung.Ngo\Desktop\ShoppingCartExample.html 2 <div class="colmd4"> <div class="imgthumbnail" style="border: 1px solid gray; width: 100%;

height: 160px"></div> <div> Samsung Galaxy Note 4 </div> <div>

Giá: 18.500.000đ </div>

<button id="product3" dataname="Samsung Galaxy Note 4" dataprice="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

C:\Users\Tung.Ngo\Desktop\ShoppingCartExample.html 3items"].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 dataname 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 sessionStoragesessionStorage["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(); });

C:\Users\Tung.Ngo\Desktop\ShoppingCartExample.html 4// 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["shoppingcartitems"].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)

Education