Bootstrap Snippet simple shopping card using HTML Bootstrap

"simple shopping card"
Bootstrap 3.0.0 Snippet by evarevirus

3.0.0 shop card

12.9K 3 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/zzzzl/pen/mMQQQB?limit=all&page=21&q=shop" /> <style class="cp-pen-styles">.btn-add-cart { position: absolute; left: 15px; top: 0px; } </style></head><body> <html> <head> <meta charset="utf-8"> <title>My Shopping Cart</title> </head> <body> <div> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"> My Shopping Cart </a> </div> </div> </nav> <div class="container"> <div class="row"> <div class="col col-sm-9 col-xs-6"> <h1>Products</h1> <div class="row"> <div class="col col-xs-12 col-md-6 col-lg-4 item"> <div class='img-container'> <img src="http://lorempixel.com/250/250/food/1"> </div> <h2>Product Name</h2> <p>Product Name</p> <p>$10.99</p> </div> <div class="col col-xs-12 col-md-6 col-lg-4 item"> <div class='img-container'> <img src="http://lorempixel.com/250/250/food/2"> </div> <h2>Product Name</h2> <p>Product Name</p> <p>$10.99</p> </div> <div class="col col-xs-12 col-md-6 col-lg-4 item"> <div class='img-container'> <img src="http://lorempixel.com/250/250/food/3"> </div> <h2>Product Name</h2> <p>Product Name</p> <p>$10.99</p> </div> <div class="col col-xs-12 col-md-6 col-lg-4 item"> <div class='img-container'> <img src="http://lorempixel.com/250/250/food/4"> </div> <h2>Product Name</h2> <p>Product Name</p> <p>$10.99</p> </div> <div class="col col-xs-12 col-md-6 col-lg-4 item"> <div class='img-container'> <img src="http://lorempixel.com/250/250/food/2"> </div> <h2>Product Name</h2> <p>Product Name</p> <p>$10.99</p> </div> <div class="col col-xs-12 col-md-6 col-lg-4 item"> <div class='img-container'> <img src="http://lorempixel.com/250/250/food/1"> </div> <h2>Product Name</h2> <p>Product Name</p> <p>$10.99</p> </div> <div class="col col-xs-12 col-md-6 col-lg-4 item"> <div class='img-container'> <img src="http://lorempixel.com/250/250/food/4"> </div> <h2>Product Name</h2> <p>Product Name</p> <p>$10.99</p> </div> <div class="col col-xs-12 col-md-6 col-lg-4 item"> <div class='img-container'> <img src="http://lorempixel.com/250/250/food/5"> </div> <h2>Product Name</h2> <p>Product Name</p> <p>$10.99</p> </div> <div class="col col-xs-12 col-md-6 col-lg-4 item"> <div class='img-container'> <img src="http://lorempixel.com/250/250/food/3"> </div> <h2>Product Name</h2> <p>Product Name</p> <p>$10.99</p> </div> <div class="col col-xs-12 col-md-6 col-lg-4 item"> <div class='img-container'> <img src="http://lorempixel.com/250/250/food/2"> </div> <h2>Product Name</h2> <p>Product Name</p> <p>$10.99</p> </div> <div class="col col-xs-12 col-md-6 col-lg-4 item"> <div class='img-container'> <img src="http://lorempixel.com/250/250/food/4"> </div> <h2>Product Name</h2> <p>Product Name</p> <p>$10.99</p> </div> <div class="col col-xs-12 col-md-6 col-lg-4 item"> <div class='img-container'> <img src="http://lorempixel.com/250/250/food/1"> </div> <h2>Product Name</h2> <p>Product Name</p> <p>$10.99</p> </div> <div class="col col-xs-12 col-md-6 col-lg-4 item"> <div class='img-container'> <img src="http://lorempixel.com/250/250/food/6"> </div> <h2>Product Name</h2> <p>Product Name</p> <p>$10.99</p> </div> <div class="col col-xs-12 col-md-6 col-lg-4 item"> <div class='img-container'> <img src="http://lorempixel.com/250/250/food/3"> </div> <h2>Product Name</h2> <p>Product Name</p> <p>$10.99</p> </div> <div class="col col-xs-12 col-md-6 col-lg-4 item"> <div class='img-container'> <img src="http://lorempixel.com/250/250/food/5"> </div> <h2>Product Name</h2> <p>Product Name</p> <p>$10.99</p> </div> </div> </div> <div class="col col-sm-3 col-xs-6"> <div id = 'cart-container' data-spy="affix" data-offset-top="10"> <h1>Shopping Cart <span class="badge" id='cartItems'></span></h1> <div class="cart" id = 'cart'> So lonely here, add something </div> <div id = 'prices'></div> </div> </div> </div> </div>  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Complete order</h4> </div> <div class="modal-body"> <div class = 'row'> <div class = 'col-xs-12' id = 'cartContentsModal'> </div> </div> <div class = 'row'> <div class = 'col-xs-12' id = 'cartForm'>  <form> <div class="form-group"> <label for="formName">Name</label> <input type="text" class="form-control" id="formName" placeholder="Your name" required> </div> <div class="form-group"> <label for="formAddress">Address</label> <input type="text" class="form-control" id="formAddress" placeholder="Your address" required> </div> </form> </div> </div> </div> <div class="modal-footer centered"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary" id='submit'>Complete order</button> </div> </div> </div> </div>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css"> </body> </html> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >var itemsInCart = 0; var subTotal = 0; const tax = 0.1; // 10% var totalPrice = 0; window.onload = function() { $('img').addClass('img-responsive'); $('.img-container').append('<button class="btn btn-success btn-add-cart"><span class="glyphicon glyphicon-shopping-cart"></span> to cart</button>'); $('.btn-add-cart').click( (e) => { //animation $(e.target).animateCss('pulse'); // find out which item is clicked // if 'span' with cart symbol is clicked, then navigate one level up to the button let eventTarget; if ($(e.target).is('span')) eventTarget = $(e.target).parent(); else eventTarget = $(e.target); let itemName = eventTarget.parent().parent().find('h2')[0].textContent ; let itemPrice = eventTarget.parent().parent().find('p')[1].textContent ; addToCart(itemName, itemPrice); }); $('#submit').click( () => { formSubmitted(); }); setRandomPrices(); } function setRandomPrices() { // just for fun let items = document.querySelectorAll('.item'); for (let item of items) {if (window.CP.shouldStopExecution(1)){break;} $(item).find('p')[1].textContent = '$' + (Math.floor(Math.random() * (199 - 0)) + 0) + '.' + (Math.floor(Math.random() * (99 - 10)) + 10); } window.CP.exitedLoop(1); } function addToCart(name, price) { let priceNumber = parseFloat(price.slice(1)); if (itemsInCart === 0) $('#cart').text(" "); let newDiv = $('<div class="cart-item"></div>'); newDiv.text(name + ' ... ' + price + ' '); newDiv.append('<button class="btn btn-danger btn-xs" onclick="deleteItem(this)">X</button>'); newDiv.append('<hr>'); newDiv.attr('name', name); newDiv.attr('price', priceNumber); $('#cart').append(newDiv); newDiv.animateCss('bounceInRight'); itemsInCart++; $('#cartItems').text(itemsInCart); subTotal += priceNumber; updatePrice(); } function deleteItem(e) { let price = $(e.parentElement).attr('price'); subTotal -= price; $(e.parentElement).animateCss('bounceOutRight'); $(e.parentElement).remove(); itemsInCart--; $('#cartItems').text(itemsInCart); updatePrice(); cartLonelyText(); } function cartLonelyText() { if (itemsInCart === 0) $('#cart').append('So lonely here, add something'); } function updatePrice() { $('#prices').empty(); if (itemsInCart === 0) return; let newDiv = $('<div></div>'); newDiv.append('<strong>Subtotal: $' + subTotal.toFixed(2) + '<br>'); newDiv.append('<strong>Tax: ' + tax * 100 + '%<br>'); newDiv.append('<strong>Total Price: $' + (subTotal + (subTotal * tax)).toFixed(2) + '</strong>'); newDiv.append('<button class="btn btn-info btn-block" onclick="openModal()">Continue</button>'); $('#prices').append(newDiv); newDiv.animateCss('bounceInRight'); } function cartToString() { let itemsString = "<small><p><strong>Your order:</strong><br>"; let cartItems = document.querySelectorAll('.cart-item'); for (let item of cartItems) {if (window.CP.shouldStopExecution(2)){break;} itemsString = itemsString + item.getAttribute('name') + " .. $" + item.getAttribute('price') + "<br>"; } window.CP.exitedLoop(2); ; itemsString += '</p><p>Subtotal: $' + subTotal.toFixed(2) + '<br>'; itemsString += 'Tax: ' + tax * 100 + '%<br>' itemsString += 'Total price with tax: <mark><strong>$' + (subTotal + (subTotal * tax)).toFixed(2) + '</strong></mark></p></small>'; return itemsString; } function openModal() { $('#cartContentsModal').html(cartToString()); $('#myModal').modal('show'); } function formSubmitted() { if (!checkEmptyFields()) { // if the fields arent empty sweetAlert("Thanks!", "Thanks for your order! We will contact you for more information", "success"); } else { return; } // clear cart and do other cleaning if order is OK $('#myModal').modal('hide'); totalPrice = 0; subTotal = 0; itemsInCart = 0; $('#cart').empty(); $('#prices').empty(); $('#cartItems').text(itemsInCart); cartLonelyText(); } function checkEmptyFields() { let somethingEmpty = false; if ( !$.trim( $('#formName').val() ).length) { $('#formName').animateCss('animated jello'); somethingEmpty = true; } if ( !$.trim( $('#formAddress').val() ).length) { $('#formAddress').animateCss('animated jello'); somethingEmpty = true; } return somethingEmpty; } $.fn.extend({ // https://github.com/daneden/animate.css animateCss: function (animationName) { var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; this.addClass('animated ' + animationName).one(animationEnd, function() { $(this).removeClass('animated ' + animationName); }); return this; } }); //# sourceURL=pen.js </script> </body></html>

Related: See More

Material Dashboard Angular

Material Dashboard Angular

bootstrap 4 card

bootstrap 4 card

Card Styles

Bootstrap Social Card

Bootstrap Social Card

Questions / Comments:

Posting GuidelinesFormatting

When I add an item to a cart, it loops indefinitely continuing to add the same item.

bwagner18 (0) - 6 years ago - Reply 0