<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Nav --> <nav class="navbar navbar-inverse bg-inverse fixed-top bg-faded"> <div class="row"> <div class="col"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#cart">Cart (<span class="total-count"></span>)</button><button class="clear-cart btn btn-danger">Clear Cart</button></div> </div> </nav> <!-- Main --> <div class="container"> <div class="row"> <div class="col"> <div class="card" style="width: 20rem;"> <img class="card-img-top" src="http://www.azspagirls.com/files/2010/09/orange.jpg" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Orange</h4> <p class="card-text">Price: $0.5</p> <a href="#" data-name="Orange" data-price="0.5" class="add-to-cart btn btn-primary">Add to cart</a> </div> </div> </div> <div class="col"> <div class="card" style="width: 20rem;"> <img class="card-img-top" src="http://images.all-free-download.com/images/graphicthumb/vector_illustration_of_ripe_bananas_567893.jpg" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Banana</h4> <p class="card-text">Price: $1.22</p> <a href="#" data-name="Banana" data-price="1.22" class="add-to-cart btn btn-primary">Add to cart</a> </div> </div> </div> <div class="col"> <div class="card" style="width: 20rem;"> <img class="card-img-top" src="https://3.imimg.com/data3/IC/JO/MY-9839190/organic-lemon-250x250.jpg" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Lemon</h4> <p class="card-text">Price: $5</p> <a href="#" data-name="Lemon" data-price="5" class="add-to-cart btn btn-primary">Add to cart</a> </div> </div> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="cart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Cart</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <table class="show-cart table"> </table> <div>Total price: $<span class="total-cart"></span></div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Order now</button> </div> </div> </div> </div> <script> // ************************************************ // Shopping Cart API // ************************************************ var shoppingCart = (function() { // ============================= // Private methods and propeties // ============================= cart = []; // Constructor function Item(name, price, count) { this.name = name; this.price = price; this.count = count; } // Save cart function saveCart() { sessionStorage.setItem('shoppingCart', JSON.stringify(cart)); } // Load cart function loadCart() { cart = JSON.parse(sessionStorage.getItem('shoppingCart')); } if (sessionStorage.getItem("shoppingCart") != null) { loadCart(); } // ============================= // Public methods and propeties // ============================= var obj = {}; // Add to cart obj.addItemToCart = function(name, price, count) { for(var item in cart) { if(cart[item].name === name) { cart[item].count ++; saveCart(); return; } } var item = new Item(name, price, count); cart.push(item); saveCart(); } // Set count from item obj.setCountForItem = function(name, count) { for(var i in cart) { if (cart[i].name === name) { cart[i].count = count; break; } } }; // Remove item from cart obj.removeItemFromCart = function(name) { for(var item in cart) { if(cart[item].name === name) { cart[item].count --; if(cart[item].count === 0) { cart.splice(item, 1); } break; } } saveCart(); } // Remove all items from cart obj.removeItemFromCartAll = function(name) { for(var item in cart) { if(cart[item].name === name) { cart.splice(item, 1); break; } } saveCart(); } // Clear cart obj.clearCart = function() { cart = []; saveCart(); } // Count cart obj.totalCount = function() { var totalCount = 0; for(var item in cart) { totalCount += cart[item].count; } return totalCount; } // Total cart obj.totalCart = function() { var totalCart = 0; for(var item in cart) { totalCart += cart[item].price * cart[item].count; } return Number(totalCart.toFixed(2)); } // List cart obj.listCart = function() { var cartCopy = []; for(i in cart) { item = cart[i]; itemCopy = {}; for(p in item) { itemCopy[p] = item[p]; } itemCopy.total = Number(item.price * item.count).toFixed(2); cartCopy.push(itemCopy) } return cartCopy; } // cart : Array // Item : Object/Class // addItemToCart : Function // removeItemFromCart : Function // removeItemFromCartAll : Function // clearCart : Function // countCart : Function // totalCart : Function // listCart : Function // saveCart : Function // loadCart : Function return obj; })(); // ***************************************** // Triggers / Events // ***************************************** // Add item $('.add-to-cart').click(function(event) { event.preventDefault(); var name = $(this).data('name'); var price = Number($(this).data('price')); shoppingCart.addItemToCart(name, price, 1); displayCart(); }); // Clear items $('.clear-cart').click(function() { shoppingCart.clearCart(); displayCart(); }); function displayCart() { var cartArray = shoppingCart.listCart(); var output = ""; for(var i in cartArray) { output += "<tr>" + "<td>" + cartArray[i].name + "</td>" + "<td>(" + cartArray[i].price + ")</td>" + "<td><div class='input-group'><button class='minus-item input-group-addon btn btn-primary' data-name=" + cartArray[i].name + ">-</button>" + "<input type='number' class='item-count form-control' data-name='" + cartArray[i].name + "' value='" + cartArray[i].count + "'>" + "<button class='plus-item btn btn-primary input-group-addon' data-name=" + cartArray[i].name + ">+</button></div></td>" + "<td><button class='delete-item btn btn-danger' data-name=" + cartArray[i].name + ">X</button></td>" + " = " + "<td>" + cartArray[i].total + "</td>" + "</tr>"; } $('.show-cart').html(output); $('.total-cart').html(shoppingCart.totalCart()); $('.total-count').html(shoppingCart.totalCount()); } // Delete item button $('.show-cart').on("click", ".delete-item", function(event) { var name = $(this).data('name') shoppingCart.removeItemFromCartAll(name); displayCart(); }) // -1 $('.show-cart').on("click", ".minus-item", function(event) { var name = $(this).data('name') shoppingCart.removeItemFromCart(name); displayCart(); }) // +1 $('.show-cart').on("click", ".plus-item", function(event) { var name = $(this).data('name') shoppingCart.addItemToCart(name); displayCart(); }) // Item count input $('.show-cart').on("change", ".item-count", function(event) { var name = $(this).data('name'); var count = Number($(this).val()); shoppingCart.setCountForItem(name, count); displayCart(); }); displayCart(); </script>

body { padding-top: 80px; } .show-cart li { display: flex; } .card { margin-bottom: 20px; } .card-img-top { width: 200px; height: 200px; align-self: center; }