<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>
