<div class="page-header">
<h1>jQuery 購物車模組
<div style="float: right; cursor: pointer;">
<span class="glyphicon glyphicon-shopping-cart my-cart-icon"><span class="badge badge-notify my-cart-badge"></span></span>
</div>
</h1>
</div>
<div class="row">
<div class="col-sm-6 col-md-3 text-center">
<img src="https://www.jqueryscript.net/demo/Simple-Shopping-Cart-Plugin-With-jQuery-Bootstrap-mycart/images/img_1.png" width="150px" height="150px">
<br>
產品1 - <strong>$10</strong>
<br>
<button class="btn btn-danger my-cart-btn" data-id="1" data-name="product 1" data-summary="summary 1" data-price="10" data-quantity="1" data-image="https://www.jqueryscript.net/demo/Simple-Shopping-Cart-Plugin-With-jQuery-Bootstrap-mycart/images/img_1.png">加入購物車</button>
<a href="#" class="btn btn-info">產品內容</a>
</div>
<div class="col-sm-6 col-md-3 text-center">
<img src="https://www.jqueryscript.net/demo/Simple-Shopping-Cart-Plugin-With-jQuery-Bootstrap-mycart/images/img_2.png" width="150px" height="150px">
<br>
產品 2 - <strong>$20</strong>
<br>
<button class="btn btn-danger my-cart-btn" data-id="2" data-name="product 2" data-summary="summary 2" data-price="20" data-quantity="1" data-image="https://www.jqueryscript.net/demo/Simple-Shopping-Cart-Plugin-With-jQuery-Bootstrap-mycart/images/img_2.png">加入購物車</button>
<a href="#" class="btn btn-info">產品內容</a>
</div>
<div class="col-sm-6 col-md-3 text-center">
<img src="https://www.jqueryscript.net/demo/Simple-Shopping-Cart-Plugin-With-jQuery-Bootstrap-mycart/images/img_3.png" width="150px" height="150px">
<br>
產品 3 - <strong>$30</strong>
<br>
<button class="btn btn-danger my-cart-btn" data-id="3" data-name="product 3" data-summary="summary 3" data-price="30" data-quantity="1" data-image="https://www.jqueryscript.net/demo/Simple-Shopping-Cart-Plugin-With-jQuery-Bootstrap-mycart/images/img_3.png">加入購物車</button>
<a href="#" class="btn btn-info">產品內容</a>
</div>
<div class="col-sm-6 col-md-3 text-center">
<img src="https://www.jqueryscript.net/demo/Simple-Shopping-Cart-Plugin-With-jQuery-Bootstrap-mycart/images/img_4.png" width="150px" height="150px">
<br>
產品 4 - <strong>$40</strong>
<br>
<button class="btn btn-danger my-cart-btn" data-id="4" data-name="product 4" data-summary="summary 4" data-price="40" data-quantity="1" data-image="https://www.jqueryscript.net/demo/Simple-Shopping-Cart-Plugin-With-jQuery-Bootstrap-mycart/images/img_4.png">加入購物車</button>
<a href="#" class="btn btn-info">產品內容</a>
</div>
</div>
h1{text-align:center;}
.badge-notify{
background:red;
position:relative;
top: -20px;
right: 10px;
}
.my-cart-icon-affix {
position: fixed;
z-index: 999;
}
$(function () {
var goToCartIcon = function($addTocartBtn){
var $cartIcon = $(".my-cart-icon");
var $image = $('<img width="30px" height="30px" src="' + $addTocartBtn.data("image") + '"/>').css({"position": "fixed", "z-index": "999"});
$addTocartBtn.prepend($image);
var position = $cartIcon.position();
$image.animate({
top: position.top,
left: position.left
}, 500 , "linear", function() {
$image.remove();
});
}
$('.my-cart-btn').myCart({
currencySymbol: '$',
classCartIcon: 'my-cart-icon',
classCartBadge: 'my-cart-badge',
classProductQuantity: 'my-product-quantity',
classProductRemove: 'my-product-remove',
classCheckoutCart: 'my-cart-checkout',
affixCartIcon: true,
showCheckoutModal: true,
numberOfDecimals: 2,
clickOnAddToCart: function($addTocart){
goToCartIcon($addTocart);
},
afterAddOnCart: function(products, totalPrice, totalQuantity) {
console.log("afterAddOnCart", products, totalPrice, totalQuantity);
},
clickOnCartIcon: function($cartIcon, products, totalPrice, totalQuantity) {
console.log("cart icon clicked", $cartIcon, products, totalPrice, totalQuantity);
},
checkoutCart: function(products, totalPrice, totalQuantity) {
var checkoutString = "Total Price: " + totalPrice + "\nTotal Quantity: " + totalQuantity;
checkoutString += "\n\n id \t name \t summary \t price \t quantity \t image path";
$.each(products, function(){
checkoutString += ("\n " + this.id + " \t " + this.name + " \t " + this.summary + " \t " + this.price + " \t " + this.quantity + " \t " + this.image);
});
alert(checkoutString)
console.log("checking out", products, totalPrice, totalQuantity);
},
getDiscountPrice: function(products, totalPrice, totalQuantity) {
console.log("calculating discount", products, totalPrice, totalQuantity);
return totalPrice * 0.5;
}
});
$("#addNewProduct").click(function(event) {
var currentElementNo = $(".row").children().length + 1;
$(".row").append('<div class="col-md-3 text-center"><img src="images/img_empty.png" width="150px" height="150px"><br>product ' + currentElementNo + ' - <strong>$' + currentElementNo + '</strong><br><button class="btn btn-danger my-cart-btn" data-id="' + currentElementNo + '" data-name="product ' + currentElementNo + '" data-summary="summary ' + currentElementNo + '" data-price="' + currentElementNo + '" data-quantity="1" data-image="images/img_empty.png">Add to Cart</button><a href="#" class="btn btn-info">Details</a></div>')
});
});