"shopping card js"
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 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/markbeekman/pen/WRPBjM?limit=all&page=3&q=shop" /> <style class="cp-pen-styles">body { background: #F3F3F3; padding: 0; margin: 0; overflow-x: hidden; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px; } body.open { overflow-y: hidden; } .shop { position: relative; z-index: 5; } .shop__header { box-sizing: border-box; position: fixed; background: rgba(255, 255, 255, 0.9); width: 100%; padding: 15px; overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .shop__products { padding-top: 70px; } .shop__title { display: block; margin: 0; float: left; font-size: 30px; line-height: 40px; } .shop__text { display: block; padding: 0; margin: 0; float: right; } .shop__text .button { padding: 10px 15px; } .products { display: flex; flex-wrap: wrap; justify-content: center; padding: 20px 0 20px 20px; } .products__item { width: 290px; } .product { background: #FFF; padding: 30px 15px; margin: 0 20px 20px 0; border-radius: 5px; text-align: center; } .product__title { font-weight: bold; font-size: 20px; margin: 0 0 15px 0; } .product__text { margin: 0; } .button { display: inline-block; background: #39C; padding: 5px 10px; border-radius: 3px; font-weight: bold; font-size: 14px; text-decoration: none; color: #FFF; } .button--light { background: #FFF; color: #F00; } .cart { position: fixed; background: #F3F3F3; width: 400px; max-width: 90%; height: 100%; top: 0; right: 0; box-shadow: -2px 0 4px rgba(0, 0, 0, 0.2); overflow: hidden; transform: translate(500px, 0); transition: transform 250ms ease-in-out; z-index: 20; } body.open .cart { transform: translate(0, 0); } .cart__header { box-sizing: border-box; position: absolute; background: rgba(255, 255, 255, 0.9); width: 100%; padding: 15px 15px; top: 0; left: 0; overflow: hidden; z-index: 2; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .cart__header .cart__text { float: right; } .cart__title { font-size: 20px; line-height: 40px; margin: 0; float: left; } .cart__products { box-sizing: border-box; position: absolute; width: 100%; height: 100%; padding: 70px 0; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; z-index: 1; } .cart__products article { padding: 15px; border-bottom: 1px dotted #CCC; } .cart__products article h1 { font-size: 16px; line-height: 20px; margin: 0; } .cart__products article p { font-size: 14px; margin: 0; } .cart__products article p a { color: #F00; } .cart__product { display: none; } .cart__empty { padding: 30px 15px; margin: 0; font-style: italic; text-align: center; } .cart__empty.hide { display: none; } .cart__footer { box-sizing: border-box; position: absolute; background: rgba(255, 255, 255, 0.9); width: 100%; padding: 15px; left: 0; bottom: 0; z-index: 2; box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2); text-align: right; } .cart__text { margin: 0; } .cart__text .button { padding: 10px 15px; } .lightbox { position: fixed; background: #000; width: 0; height: 100%; top: 0; left: 0; z-index: 10; opacity: 0; transition: opacity 250ms ease-in-out, width 0ms ease-in-out 250ms; } body.open .lightbox { width: 100%; opacity: 0.8; transition: opacity 250ms ease-in-out, width 0ms ease-in-out; } </style></head><body> <section class="shop"> <div class="shop__header"> <h1 class="shop__title">Shop title</h1> <p class="shop__text"> <a class="button js-toggle-cart" href="#" title="View cart"> View cart </a> </p> </div> <div class="shop__products"> <div class="products"> <div class="products__item"> <article class="product"> <h1 class="product__title">Product title</h1> <p class="product__text"> <a class="button js-add-product" href="#" title="Add to cart"> Add to cart </a> </p> </article> </div> <div class="products__item"> <article class="product"> <h1 class="product__title">Product title</h1> <p class="product__text"> <a class="button js-add-product" href="#" title="Add to cart"> Add to cart </a> </p> </article> </div> <div class="products__item"> <article class="product"> <h1 class="product__title">Product title</h1> <p class="product__text"> <a class="button js-add-product" href="#" title="Add to cart"> Add to cart </a> </p> </article> </div> <div class="products__item"> <article class="product"> <h1 class="product__title">Product title</h1> <p class="product__text"> <a class="button js-add-product" href="#" title="Add to cart"> Add to cart </a> </p> </article> </div> <div class="products__item"> <article class="product"> <h1 class="product__title">Product title</h1> <p class="product__text"> <a class="button js-add-product" href="#" title="Add to cart"> Add to cart </a> </p> </article> </div> <div class="products__item"> <article class="product"> <h1 class="product__title">Product title</h1> <p class="product__text"> <a class="button js-add-product" href="#" title="Add to cart"> Add to cart </a> </p> </article> </div> <div class="products__item"> <article class="product"> <h1 class="product__title">Product title</h1> <p class="product__text"> <a class="button js-add-product" href="#" title="Add to cart"> Add to cart </a> </p> </article> </div> <div class="products__item"> <article class="product"> <h1 class="product__title">Product title</h1> <p class="product__text"> <a class="button js-add-product" href="#" title="Add to cart"> Add to cart </a> </p> </article> </div> <div class="products__item"> <article class="product"> <h1 class="product__title">Product title</h1> <p class="product__text"> <a class="button js-add-product" href="#" title="Add to cart"> Add to cart </a> </p> </article> </div> <div class="products__item"> <article class="product"> <h1 class="product__title">Product title</h1> <p class="product__text"> <a class="button js-add-product" href="#" title="Add to cart"> Add to cart </a> </p> </article> </div> <div class="products__item"> <article class="product"> <h1 class="product__title">Product title</h1> <p class="product__text"> <a class="button js-add-product" href="#" title="Add to cart"> Add to cart </a> </p> </article> </div> <div class="products__item"> <article class="product"> <h1 class="product__title">Product title</h1> <p class="product__text"> <a class="button js-add-product" href="#" title="Add to cart"> Add to cart </a> </p> </article> </div> </div> </div> </section> <aside class="cart js-cart"> <div class="cart__header"> <h1 class="cart__title">Shopping cart</h1> <p class="cart__text"> <a class="button button--light js-toggle-cart" href="#" title="Close cart"> Close cart </a> </p> </div> <div class="cart__products js-cart-products"> <p class="cart__empty js-cart-empty"> Add a product to your cart </p> <div class="cart__product js-cart-product-template"> <article class="js-cart-product"> <h1>Product title</h1> <p> <a class="js-remove-product" href="#" title="Delete product"> Delete product </a> </p> </article> </div> </div> <div class="cart__footer"> <p class="cart__text"> <a class="button" href="#" title="Buy products"> Buy products </a> </p> </div> </aside> <div class="lightbox js-lightbox js-toggle-cart"></div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script >var cartOpen = false; var numberOfProducts = 0; $('body').on('click', '.js-toggle-cart', toggleCart); $('body').on('click', '.js-add-product', addProduct); $('body').on('click', '.js-remove-product', removeProduct); function toggleCart(e) { e.preventDefault(); if(cartOpen) { closeCart(); return; } openCart(); } function openCart() { cartOpen = true; $('body').addClass('open'); } function closeCart() { cartOpen = false; $('body').removeClass('open'); } function addProduct(e) { e.preventDefault(); openCart(); $('.js-cart-empty').addClass('hide'); var product = $('.js-cart-product-template').html(); $('.js-cart-products').prepend(product); numberOfProducts++; } function removeProduct(e) { e.preventDefault(); numberOfProducts--; $(this).closest('.js-cart-product').hide(250); if(numberOfProducts == 0) { $('.js-cart-empty').removeClass('hide'); } } //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: