Bootstrap Html5 Cart

<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content="width=device-width, initial-scale=1">
<title>CartExample</title>
<link rel='stylesheet' href='bootstrap.min.css'>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='bootstrap.min.js'></script>
<style>
ul li {
display:inline;
margin:15px;
}
.border{
border-bottom:1px solid #ccc;
padding:5px 5px;
}
.cart{
border:1px solid #ccc;
position: absolute;
z-index:999;
background-color:#eee;
color:black;
width:200px;
max-height:300px;
overflow-y:auto;
padding:5px;
margin-right:25px;
}
footer{
margin-top:30px;
color:blue;
}
.delete > a{
cursor:pointer;
}
.lgImage{
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid #ccc;
z-index:1002;
overflow: auto;
background-color:#eee;
}
</style>
<script>
var items={};
$(function(){
$('.count').click(function(){
$('.cart').toggleClass('show');
});
$('img').click(function(){
$('.lgImage').toggleClass('show');
});

$(document).on('click','.delete > a',function(){
$(this).parent().parent().remove();
delete items[$(this).attr('class')];
sum();
//if($('.items > p').length==0)
//$('.cart').html('Cart Empty');
});
$('.buy').click(function(){
var text = $(this).prev().text();
if(typeof items[text] !=='undefined'){
return;
}
var value = $(this).next().text();
var item="<p class='text-warning'>"+text+" ("+value+"$)
<span class='pull-right delete'><a class='"+text+"'>x</a></span></p>";
items[text]=value;
$('.items').append(item);
sum();
});
function sum(){
$('.count').html(Object.keys(items).length);
var sum=0;
$.each(items, function(key, value) {
sum+=parseInt(value);
});
$('.sum').html(sum+'$');
}
});
</script>
</head>
<body>
<div class="container">
<header>
<h1>My Cart</h1>
</header>
<div class='row'>
<div class="col-sm-10 col-lg-10">
<nav>
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Help</a></li>
</ul>
</nav>
</div>
<div class='col-sm-2 col-lg-2 pull-right'>
<span><strong>Cart</strong></span>   <strong><a
class="count"></a></strong>
<div class='cart hide'>
<div class="items">
</div>
<div class="total">
<span class='text-success'><span
class="count"></span> Items</span><span class='text-danger pull-right
sum'></span>
</div>

</div>
</div>
</div>
<div class='row'>
<div class="row border">
<div class='col-lg-3 col-sm-6'><img
src='image.jpg'></br><span class='text-warning'><b>Item1</b></span><button
class="btn btn-primary col-xs-offset-2 buy" >Buy</button><span class="col-xs-
offset-2">10</span>$</div>
</div>
<div class="row border">
</div>
<div>
<div class='lgImage hide'><img src='image.jpg' height='500'
width='500'></div>
<footer>
<p>© me. All rights reserved.</p>
</footer>
</div>
</body>
</html>

Bootstrap Html5 Cart

Recommended

Recommended

More Related Content

What's hot

What's hot (17)

Viewers also liked

Viewers also liked (17)

Bootstrap Html5 Cart