"list card shop"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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 -->
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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>');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Now UI Dashboard PRO
bootstrap 4 card
Card Styles
Bootstrap Social Card

Questions / Comments: