刚开始购物车按钮是看不到的，当用户点击加入购物车按钮后，商品信息会添加到购物车，购物车会以按钮的形式出现在页面右下角，点击按钮则会展开购物车，显示购物车中的商品信息，同时也可以对购物车中的商品进行删除或者结算等操作。用户也可以暂时关闭购物车继续购物。
1、请不要问“在不在”之类的问题，有问题直接问！2、学生或暂时没有工作的童鞋，整站资源免费下载！3、￥9.9充值终身VIP会员,整站资源无任何限制下载！5、程序员加油，交流群：782128964 在线 充值
bootstrap响应式购物车商品列表布局
<div class="row">
<div class="col-md-3 col-xs-6 pro text-center">
<div class="selectProduct">
<img src="img/huawei_p9.jpg">
<h4>华为 P9</h4>
<a href="#0" class="btn btn-success add-button" data-price="3669.00" data-proid="1" data-proname="华为P9" data-proimg="img/huawei_p9.jpg">添加到购物车</a>
</div>
</div>
<div class="col-md-3 col-xs-6 pro text-center">
<div class="selectProduct">
<img src="img/Galaxy_s7.jpg">
<h4>Galaxy S7</h4>
<a href="#0" class="btn btn-success add-button" data-price="3559.99" data-proid="2" data-proname="Galaxy S7" data-proimg="img/Galaxy_s7.jpg">添加到购物车</a>
</div>
</div>
</div>添加、更新、删除购物车商品操作
jQuery(document).ready(function($) {
var cartWrapper = $('.cd-cart-container');
//product id - you don't need a counter in your real project but you can use your real product id
var productId = 0;
if (cartWrapper.length > 0) {
//store jQuery objects
var cartBody = cartWrapper.find('.body')
var cartList = cartBody.find('ul').eq(0);
var cartTotal = cartWrapper.find('.checkout').find('span');
var cartTrigger = cartWrapper.children('.cd-cart-trigger');
var cartCount = cartTrigger.children('.count')
//var addToCartBtn = $('.cd-add-to-cart');
var addToCartBtn = $('.add-button');
var undo = cartWrapper.find('.undo');
var undoTimeoutId;
//add product to cart
addToCartBtn.on('click', function(event) {
event.preventDefault();
addToCart($(this));
});
//open/close cart
cartTrigger.on('click', function(event) {
event.preventDefault();
toggleCart();
});
//close cart when clicking on the .cd-cart-container::before (bg layer)
cartWrapper.on('click', function(event) {
if ($(event.target).is($(this)))
toggleCart(true);
});
//delete an item from the cart
cartList.on('click', '.delete-item', function(event) {
event.preventDefault();
removeProduct($(event.target).parents('.product'));
});
//update item quantity
cartList.on('change', 'select', function(event) {
quickUpdateCart();
});
//reinsert item deleted from the cart
undo.on('click', 'a', function(event) {
clearInterval(undoTimeoutId);
event.preventDefault();
cartList.find('.deleted').addClass('undo-deleted').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function() {
$(this).off('webkitAnimationEnd oanimationend msAnimationEnd animationend').removeClass('deleted undo-deleted').removeAttr('style');
quickUpdateCart();
});
undo.removeClass('visible');
});
}
function toggleCart(bool) {
var cartIsOpen = (typeof bool === 'undefined') ? cartWrapper.hasClass('cart-open') : bool;
if (cartIsOpen) {
cartWrapper.removeClass('cart-open');
//reset undo
clearInterval(undoTimeoutId);
undo.removeClass('visible');
cartList.find('.deleted').remove();
setTimeout(function() {
cartBody.scrollTop(0);
//check if cart empty to hide it
if (Number(cartCount.find('li').eq(0).text()) == 0)
cartWrapper.addClass('empty');
}, 500);
} else {
cartWrapper.addClass('cart-open');
}
}
function addToCart(trigger) {
var cartIsEmpty = cartWrapper.hasClass('empty');
//update cart product list
var price = trigger.data('price'),
proname = trigger.data('proname'),
proid = trigger.data('proid'),
proimg = trigger.data('proimg');
addProduct(proname, proid, price, proimg);
//console.log();
//update number of items
updateCartCount(cartIsEmpty);
//update total price
updateCartTotal(trigger.data('price'), true);
//show cart
cartWrapper.removeClass('empty');
}
function addProduct(proname, proid, price, proimg) {
//this is just a product placeholder
//you should insert an item with the selected product info
//replace productId, productName, price and url with your real product info
productId = productId + 1;
var quantity = $("#cd-product-" + proid).text();
var select = '', productAdded = '';
//console.log(Number(quantity));
//console.log(quantity);
if (quantity == '') {
var select = '<span class="select">x<i id="cd-product-' + proid + '">1</i></span>';
var productAdded = $('<li class="product"><div class="product-image"><a href="#0"><img src="' + proimg + '" alt="placeholder"></a></div><div class="product-details"><h3><a href="#0">' + proname + '</a></h3><span class="price">￥' + price + '</span><div class="actions"><a href="#0" class="delete-item">删除</a><div class="quantity"><label for="cd-product-' + proid + '">件数</label>' + select + '</div></div></div></li>');
cartList.prepend(productAdded);
} else {
quantity = parseInt(quantity);
//var select = '<span class="select">x<i id="cd-product-'+proid+'">'+quantity+'</i></span>';
$("#cd-product-" + proid).html(quantity + 1);
}
//var productAdded = $('<li class="product"><div class="product-image"><a href="#0"><img src="img/product-preview.png" alt="placeholder"></a></div><div class="product-details"><h3><a href="#0">'+proname+'</a></h3><span class="price">￥'+price+'</span><div class="actions"><a href="#0" class="delete-item">删除</a><div class="quantity"><label for="cd-product-'+ proid +'">件数x</label><span class="select"><select id="cd-product-'+ proid +'" name="quantity"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option></select></span></div></div></div></li>');
//cartList.prepend(productAdded);
}
function removeProduct(product) {
clearInterval(undoTimeoutId);
cartList.find('.deleted').remove();
var topPosition = product.offset().top - cartBody.children('ul').offset().top,
productQuantity = Number(product.find('.quantity').find('.select').find('i').text()),
productTotPrice = Number(product.find('.price').text().replace('￥', '')) * productQuantity;
product.css('top', topPosition + 'px').addClass('deleted');
//update items count + total price
updateCartTotal(productTotPrice, false);
updateCartCount(true, -productQuantity);
undo.addClass('visible');
//wait 8sec before completely remove the item
undoTimeoutId = setTimeout(function() {
undo.removeClass('visible');
cartList.find('.deleted').remove();
}, 8000);
}
function quickUpdateCart() {
var quantity = 0;
var price = 0;
cartList.children('li:not(.deleted)').each(function() {
var singleQuantity = Number($(this).find('.select').find('i').text());
quantity = quantity + singleQuantity;
price = price + singleQuantity * Number($(this).find('.price').text().replace('￥', ''));
});
cartTotal.text(price.toFixed(2));
cartCount.find('li').eq(0).text(quantity);
cartCount.find('li').eq(1).text(quantity + 1);
}
function updateCartCount(emptyCart, quantity) {
if (typeof quantity === 'undefined') {
var actual = Number(cartCount.find('li').eq(0).text()) + 1;
var next = actual + 1;
if (emptyCart) {
cartCount.find('li').eq(0).text(actual);
cartCount.find('li').eq(1).text(next);
} else {
cartCount.addClass('update-count');
setTimeout(function() {
cartCount.find('li').eq(0).text(actual);
}, 150);
setTimeout(function() {
cartCount.removeClass('update-count');
}, 200);
setTimeout(function() {
cartCount.find('li').eq(1).text(next);
}, 230);
}
} else {
var actual = Number(cartCount.find('li').eq(0).text()) + quantity;
var next = actual + 1;
cartCount.find('li').eq(0).text(actual);
cartCount.find('li').eq(1).text(next);
}
}
function updateCartTotal(price, bool) {
bool ? cartTotal.text((Number(cartTotal.text()) + Number(price)).toFixed(2)) : cartTotal.text((Number(cartTotal.text()) - Number(price)).toFixed(2));
}
});
友情提示：垃圾评论一律封号 最新福利：领取阿里云限量2000通用代金券