Bootstrap Snippet shop card using HTML

"shop card"
Bootstrap 3.0.0 Snippet by evarevirus

3.0.0 shop card

5.2K 0 Fav

Post to Facebook Tweet this

<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>  <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/Dimasion/pen/oBoqBM?limit=all&page=30&q=shop" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <style class="cp-pen-styles">body { padding-top: 80px; } .show-cart li { display: flex; } .card { margin-bottom: 20px; } .card-img-top { width: 200px; height: 200px; align-self: center; }</style></head><body>  <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>  <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>  <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 src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <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 (window.CP.shouldStopExecution(1)){break;} if(cart[item].name === name) { cart[item].count ++; saveCart(); return; } } window.CP.exitedLoop(1); 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 (window.CP.shouldStopExecution(2)){break;} if (cart[i].name === name) { cart[i].count = count; break; } } window.CP.exitedLoop(2); }; // Remove item from cart obj.removeItemFromCart = function(name) { for(var item in cart) {if (window.CP.shouldStopExecution(3)){break;} if(cart[item].name === name) { cart[item].count --; if(cart[item].count === 0) { cart.splice(item, 1); } break; } } window.CP.exitedLoop(3); saveCart(); } // Remove all items from cart obj.removeItemFromCartAll = function(name) { for(var item in cart) {if (window.CP.shouldStopExecution(4)){break;} if(cart[item].name === name) { cart.splice(item, 1); break; } } window.CP.exitedLoop(4); saveCart(); } // Clear cart obj.clearCart = function() { cart = []; saveCart(); } // Count cart obj.totalCount = function() { var totalCount = 0; for(var item in cart) {if (window.CP.shouldStopExecution(5)){break;} totalCount += cart[item].count; } window.CP.exitedLoop(5); return totalCount; } // Total cart obj.totalCart = function() { var totalCart = 0; for(var item in cart) {if (window.CP.shouldStopExecution(6)){break;} totalCart += cart[item].price * cart[item].count; } window.CP.exitedLoop(6); return Number(totalCart.toFixed(2)); } // List cart obj.listCart = function() { var cartCopy = []; for(i in cart) {if (window.CP.shouldStopExecution(8)){break;} item = cart[i]; itemCopy = {}; for(p in item) {if (window.CP.shouldStopExecution(7)){break;} itemCopy[p] = item[p]; } window.CP.exitedLoop(7); itemCopy.total = Number(item.price * item.count).toFixed(2); cartCopy.push(itemCopy) } window.CP.exitedLoop(8); 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) {if (window.CP.shouldStopExecution(9)){break;} 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>"; } window.CP.exitedLoop(9); $('.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(); //# sourceURL=pen.js </script> </body></html>

Questions / Comments:

Posting GuidelinesFormatting

when i used any button the action repeat many times e dont stop

Cavalcantefilipe () - 5 years ago - Reply 0