"shop card"
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 ----------> <!DOCTYPE html><html lang='en' 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/tpyii/pen/aOVqgX?depth=everything&order=popularity&page=19&q=product&show_forks=false" /> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'> <style class="cp-pen-styles">html, body { width: 100%; height: 100%; margin: 0; font-family: 'Open Sans', sans-serif; font-size: .95em; background-color: #333; } a:link { text-decoration: none; color: #000; } a:visited { color: #000; } .button { border: 1px solid black; padding: .5em 1.5em; cursor: pointer; outline: none; font-size: .8em; background: #fff; } .close { display: inline; position: absolute; top: 0; left: 0; padding-bottom: .1em; background: #000; color: #fff; cursor: pointer; } .wrapper { position: relative; overflow-x: hidden; width: 100%; height: 100%; background: #fff; } #cart { position: fixed; right: -16em; width: 15em; padding: 1em; box-shadow: 0 0 5px rgba(0, 0, 0, .5); background: #fff; z-index: 99999; transition: all .5s ease; } #cart:hover { right: 0; } #cart span { display: block; } .cart-title { padding: .5em 0 1em; font-size: 1.5em; border-bottom: 1px solid black; } .cart-title .fa-shopping-cart { display: inline-block; position: relative; margin-right: .6em; } .fa-shopping-cart .cart-counter { position: absolute; top: -.3em; right: -.3em; font-size: .5em; padding: .1em .3em; background: #20B2AA; } .cart-product { margin-top: 2em; text-transform: uppercase; } .cart-product-img { float: left; width: 5em; } .cart-product-img img { width: 100%; } .cart-product-info { float: left; width: 10em; margin-bottom: .8em; } .cart-product-footer { clear: both; padding: .6em 0; border-top: 1px dotted #000; border-bottom: 1px solid #000; } #cart .product-price { display: inline-block !important; float: none; } .cart-product-footer .fa-trash-o { float: right; margin-top: 6px; } .cart-total { margin-top: .2em; border-top: 1px solid #000; } .cart-total .product-price { padding: .3em 0; font-size: 2.5em; } .cart-total .product-price .fa-rub { font-size: .6em; } .order { display: block; width: 100%; transition: all ease .2s; } #catalog {text-align: center;} .product { display: inline-block; width: 15em; padding: 15px; border: 5px solid transparent; vertical-align: top; text-transform: uppercase; text-align: left; transition: all ease .3s; } .product:hover { border-color: #20B2AA; box-shadow: 0 0 5px rgba(0, 0, 0, .5); } .product-wrapper { height: 100%; } .product-img img { width: 100%; } .product span { display: block; margin: .1em 0; } .product-info { position: relative; height: 9em; } .product-brand { font-weight: bold; } .product-footer { position: absolute; width: 100%; bottom: 0; } .product-footer span { display: inline-block; margin: 0; } .product-price { float: right; font-weight: bold; font-size: 1.7em; line-height: 1; } .product-price .fa-rub { margin-bottom: -.1em; font-size: .9em; } .add-cart { transition: all ease .2s; } .add-cart:hover, .order:hover { background: #20B2AA; border-color: #20B2AA; } .add-cart:active, .order:active { background: silver; border-color: silver; }</style></head><body> <div class="wrapper"> <section id="cart"> <span class="cart-title"><i class="fa fa-shopping-cart fa-fw"><span class="cart-counter">0</span></i>Cart</span> <article class="cart-total"> <span class="product-price"><i class="fa fa-rub fa-fw"></i><b>0</b>-</span> <button class="button order">Order</button> </article> <div class="close"><i class="fa fa-times fa-fw"></i></div> </section> <section id="catalog"> <article class="product" data-product-id="1"> <div class="product-wrapper"> <div class="product-img"> <img src="http://attaboy.hu/images/resized/coca_cola_1l_345_345_resize.png" alt=""> </div> <div class="product-info"> <span class="product-brand">The Coca Cola Company</span> <span class="product-decription">Coca Cola</span> <span class="product-volume">500 ml</span> <div class="product-footer"> <button class="add-cart button">Add to cart</button> <span class="product-price"><i class="fa fa-rub fa-fw"></i>1950-</span> </div> </div> </div> </article> <article class="product" data-product-id="2"> <div class="product-wrapper"> <div class="product-img"> <img src="https://d2mekbzx20fc11.cloudfront.net/uploads/Sprite_1__1_-web.png" alt=""> </div> <div class="product-info"> <span class="product-brand">The Coca Cola Company</span> <span class="product-decription">Sprite</span> <span class="product-volume">500 ml</span></a> <div class="product-footer"> <button class="add-cart button">Add to cart</button> <span class="product-price"><i class="fa fa-rub fa-fw"></i>1900-</span> </div> </div> </div> </article> <article class="product" data-product-id="3"> <div class="product-wrapper"> <div class="product-img"> <img src="https://imbir.com.ua/wp-conect/uploads/2015/05/pepsi_1-300x300.png" alt=""> </div> <div class="product-info"> <span class="product-brand">PepsiCo</span> <span class="product-decription">Pepsi</span> <span class="product-volume">500 ml</span></a> <div class="product-footer"> <button class="add-cart button">Add to cart</button> <span class="product-price"><i class="fa fa-rub fa-fw"></i>1800-</span> </div> </div> </div> </article> <article class="product" data-product-id="4"> <div class="product-wrapper"> <div class="product-img"> <img src="https://bigwok.com.ua/im/452.gif" alt=""> </div> <div class="product-info"> <span class="product-brand">The Coca Cola Company</span> <span class="product-decription">Bon Aqua</span> <span class="product-volume">500 ml</span></a> <div class="product-footer"> <button class="add-cart button">Add to cart</button> <span class="product-price"><i class="fa fa-rub fa-fw"></i>950-</span> </div> </div> </div> </article> </section> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script >$(document).ready(function() { var fns = {}, productData = {}, cartCounter = 0, cartTotal = 0, productCounter = 1, timer = '', addCart = $('.add-cart'), deleteCart = $('.cart-product-delete'); fns.getProductData = function(a){ var p = a.closest('.product'); productData.id = p.data('product-id'); productData.id = parseInt(productData.id); productData.img = p.find('.product-img img').attr('src'); productData.brand = p.find('.product-brand').text(); productData.decription = p.find('.product-decription').text(); productData.volume = p.find('.product-volume').text(); productData.price = p.find('.product-price').text(); productData.price = parseInt(productData.price); /*console.log('id: ' + productData.id + '\n img: ' + productData.img + '\n brand: ' + productData.brand + '\n decription: ' + productData.decription + '\n volume: ' + productData.volume + '\n price: ' + productData.price);*/ } fns.changeCart = function(){ var counter = $('.cart-counter'), total = $('.cart-total').find('.product-price b'); counter.text(cartCounter); total.text(cartTotal); } fns.hideCart = function(cart){ var width = cart.width(); cart.animate({'right' : -width}); setTimeout(function(){ cart.removeAttr('class'); cart.removeAttr('style'); timer = ''; }, 1000); } fns.cartTimer = function(cart){ timer = setTimeout(function(){ fns.hideCart(cart) }, 3000); } fns.showCart = function(cart){ var show = cart.hasClass('show'); if(show) { return false; } else { cart.addClass('show'); cart.animate({'right' : 0}); if(timer == '') { fns.cartTimer(cart); } } } fns.addToCard = function(){ var pattern = "<article class='cart-product' data-cart-product-id='" + productData.id + "' data-cart-product-counter='" + productCounter + "'>\n<div class='cart-product-img'><img src=" + productData.img + " alt=''></div>\n<div class='cart-product-info'>\n<span class='product-brand'>" + productData.brand + "</span>\n<span class='product-decription'>" + productData.decription + "</span><span class='product-volume'>" + productData.volume + "</span>\n</div>\n<div class='cart-product-footer'>\n<span class='product-price'><i class='fa fa-rub fa-fw'></i><b>" + productData.price + "</b>-</span><a href='#' class='cart-product-delete'><i class='fa fa-trash-o fa-fw'></i></a>\n</div>\n</article>", cart = $('#cart'), cartProducts = cart.find('.cart-product'), cartItem; if(cartProducts.length > 0) { for(var i = 0; i < cartProducts.length; i++) {if (window.CP.shouldStopExecution(1)){break;} //console.log("i: " + i); if(cartProducts.eq(i).data('cart-product-id') != productData.id) { //console.log("data: " + cartProducts.eq(i).data('cart-product-id') + " id: " + productData.id); if(i == cartProducts.length - 1) { $(pattern).insertBefore(cart.find('.cart-total')); cartProducts = cart.find('.cart-product'); break; } } else { cartItem = i; var cartProductPrice = cartProducts.eq(cartItem).find('.cart-product-footer .product-price b'), price = cartProductPrice.text(); price = parseInt(price); price += productData.price; cartProductPrice.text(price); break; } } window.CP.exitedLoop(1); } else { $(pattern).insertBefore(cart.find('.cart-total')); cartProducts = cart.find('.cart-product'); } cartCounter++; cartTotal += productData.price; fns.changeCart(); fns.showCart(cart); } addCart.on('click', function(){ var _THIS = $(this); fns.getProductData(_THIS); fns.addToCard(); }); /*deleteCart.on('click', function(e){ e = event || window.event; e.preventDefault(); var id = $(this).closest('.cart-product').data('cart-product-id'); console.log($(this)); });*/ }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: