"list card shop"
Bootstrap 3.0.0 Snippet by evarevirus

<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 ----------> <div class="container-fluid"> <!-- Navigation --> <div class="row navigation"> <div class="logo"> <img src="http://www.jarrow.com/images/logo.png" alt="" /> </div> <!-- Mini Cart Starts Here --> <div class="mini-cart"> <button class="btn btn-default mini-cart-button"><span class="glyphicon glyphicon-shopping-cart"></span></button> </div> <div class="mini-cart-container"> <div class="mini-cart-items"> <ul> </ul> <div class="mini-cart-totals"> <div id="total-price"> <p>Total Price</p> <span> $50.50 </span> </div> <div id="total-items"> <p>Total Items</p> <span> 10 </span> </div> </div> </div> </div> <!-- Mini Cart Ends Here --> </div> <!-- Product Grid --> <div class="row product-grid"> <!-- START The Product Item --> <div class="col-md-4 col-sm-4 grid-item"> <img src="http://www.jarrow.com/productImg2/KETO.jpg" alt="" /> <h1 class="product-title">7-Keto DHEA 100 mg</h1> <h3 class="product-price">$12.99</h3> <div class="quantity-input"> <input class="minus btn" type="button" value="-"> <input id="text_7_keto_dhea" value="1" class="input-text qty text" size="4"/> <input class="plus btn" type="button" value="+"> </div> <button class="btn btn-success add-to-cart-button" rel="7_keto_dhea" product="7-Keto DHEA 100 mg" sel="12.99"><span class="glyphicon glyphicon-ok"></span> Add to Cart</button> </div> <!-- END!! The Product Item --> <!-- START The Product Item --> <div class="col-md-4 col-sm-4 grid-item"> <img src="http://www.jarrow.com/productImg2/TRIB.jpg" alt="" /> <h1 class="product-title">Tribulus Complex</h1> <h3 class="prodcut-price">$19.99</h3> <div class="quantity-input"> <input class="minus btn" type="button" value="-"> <input id="text_tribulus" value="1" class="input-text qty text" size="4"/> <input class="plus btn" type="button" value="+"> </div> <button class="btn btn-success add-to-cart-button" rel="tribulus" product="Tribulus Complex" sel="19.99"><span class="glyphicon glyphicon-ok"></span> Add to Cart</button> </div> <!-- END!! The Product Item --> <!-- START The Product Item --> <div class="col-md-4 col-sm-4 grid-item"> <img src="http://www.jarrow.com/productImg2/CHRY.jpg" alt="" /> <h1 class="product-title">Chrysin 500 mg</h1> <h3 class="prodcut-price">$24.99</h3> <div class="quantity-input"> <input class="minus btn" type="button" value="-"> <input id="text_chrysin_500_mg" value="1" class="input-text qty text" size="4"/> <input class="plus btn" type="button" value="+"> </div> <button class="btn btn-success add-to-cart-button" rel="chrysin_500_mg" product="Chrysin 500 mg" sel="24.99" ><span class="glyphicon glyphicon-ok"></span> Add to Cart</button> </div> <!-- END!! The Product Item --> <div class="succes-message">Item Succesfully Added to Cart</div> </div> </div>
html {} .container-fluid {} .btn { /*border-radius: 50px;*/ } .navigation { min-height: 50px; display: block; border-bottom: 1px solid rgb(199, 199, 199); padding-left: 10px; padding-right: 10px; background: black; } .logo { float: left; } .logo img { max-width: 150px; margin-top: 6px; } .mini-cart { float: right; } .mini-cart-button { float: right; color: #ffc008; font-size: 16px; padding: 6px 8px; position: relative; top: 9px; background: none; border-width: 2px; border-color: #ffc008; width: 36px; height: 36px; border-radius: 50px; } .mini-cart-button span {} .mini-cart-container { min-height: 200px; position: absolute; width: 50%; max-width: 400px; display: none; background: white; box-shadow: 0px 10px 50px -5px rgb(199, 199, 199); top: 50px; right: 10px; z-index: 1; } .mini-cart-container ul { margin-left: 0!important; padding-left: 20px!important; padding-right: 20px!important; } .mini-cart-container ul li { list-style: none; position: relative; border-bottom: 1px solid grey; min-height: 60px; } .mini-cart-container ul li h3 { font-size: 16px; } .mini-cart-container ul li h3 span { font-size: 16px; color: grey; position: relative; } .mini-cart-container ul li span { position: absolute; right: 5px; top: 10px; } .mini-cart-open { display: block; } .product-grid { padding-top: 20px; } .grid-item { text-align: center; padding: 15px; margin: ; box-shadow: 2px 0px 0px 1px rgb(199, 199, 199); transition: all .25s ease; max-width: 300px; position:relative; } .grid-item:hover { box-shadow: 0px 0px 20px -1px rgb(99, 99, 99); } .grid-item img {} .grid-item h1 { font-size: 24px; margin-bottom: 10px } .grid-item h3 { margin-top: 10px; } .grid-item .quantity-input { margin: 5px auto; } .grid-item .quantity-input button {} .grid-item .quantity-input input { max-width: 50px; } .add-to-cart-button { background: green; } .mini-cart-totals { text-align: center; } #total-price { float: left; padding: 5px; border: 1px solid grey; margin: 10px; min-width: 100px; margin-left: 20px; } #total-items { float: right; padding: 5px; border: 1px solid grey; margin: 10px; min-width: 100px; margin-right: 20px; } #total-items p, #total-price p { font-weight: 700; color: grey; margin-bottom: 0; } #total-items span, #total-price span { font-size: 16px; font-weight: 700; color: grey; } .succes-message { display: none; position: absolute; height:100px; background:white; width: 200px; z-index: 2; left: 40%; right: 0; top:30%; font-size:20px; box-shadow: 0px 0px 20px -1px rgb(99, 99, 99); text-align:center; padding:20px; }
function commaSeparateNumber(val){ while (/(\d+)(\d{3})/.test(val.toString())){ val = val.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2'); } return val; } $('document').ready(function(){ $('.mini-cart-button').click(function(){ $('.mini-cart-container').toggleClass('mini-cart-open'); }) $('.plus').on('click', function(e) { var val = parseInt($(this).prev('input').val()); $(this).prev('input').val(val + 1).change(); }); $('.minus').on('click', function(e) { var val = parseInt($(this).next('input').val()); if (val !== 0) { $(this).next('input').val(val - 1).change(); } }); $('.add-to-cart-button').on('click', function(e) { var val = $(this).attr("rel"); var price = $(this).attr('sel'); var qty = $("input#text_"+val).val(); var productName =$(this).attr('product'); if($(".mini-cart-items ul li#"+val).length) { var new_val=parseFloat($("span#price_"+val).text())+(parseFloat(qty)*parseFloat(price)); $("span#price_"+val).text(new_val.toFixed(2)); var new_qty_val=parseInt($("span#qty_"+val).text())+parseInt(qty); $("span#qty_"+val).text(new_qty_val); }else{ $('.mini-cart-items ul').append('<li id="'+val+'">'+'<h3>'+productName+'<br/>'+'<span class="item-prices" id="price_'+val+'">'+price+'<span>'+'</h3>'+'<span class="item-quantities" id="qty_'+val+'">'+qty+'</span>'+'</li>'); }; var totalPrice = 0.0; $(".item-prices").each(function() { totalPrice += parseFloat($(this).text()); }); $('div#total-price > span').text(commaSeparateNumber(totalPrice.toFixed(2))); var totalQty = 0; $(".item-quantities").each(function(){ totalQty += parseFloat($(this).text()); }); $('div#total-items > span').text(totalQty.toFixed(0)); $('.succes-message').show(0).delay(1000).hide(0); }); });

Related: See More


Questions / Comments: