<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);
});
});
