购物车商品添加效果

jQuery(document).ready(function(){
//两个目标元素

var productCustomization = $('.cd-customization'), //商品参数
cart = $('.cd-cart'), //购物车 不存在依赖关系
animating = false; //默认参数

initCustomization(productCustomization); //初始化商品函数调用

$('body').on('click', function(event){
//if user clicks outside the .cd-gallery list items - remove the .hover class and close the open ul.size/ul.color list elements
if( $(event.target).is('body') || $(event.target).is('.cd-gallery') ) {
deactivateCustomization();
}
});

//商品初始化函数 商品初始化参数样式
function initCustomization(items) {
items.each(function(){
var actual = $(this),
selectOptions = actual.find('[data-type="select"]'), //查找模拟下拉菜单元素
addToCartBtn = actual.find('.add-to-cart'), //查找加入购物车按钮 不存在依赖关系
touchSettings = actual.next('.cd-customization-trigger');

//detect click on ul.size/ul.color list elements
selectOptions.on('click', function(event) {

var selected = $(this);
//open/close options list
selected.toggleClass('is-open'); //添加或删除isopen样式
resetCustomization(selected); //重置商品参数

if($(event.target).is('li')) {
// update selected option
var activeItem = $(event.target),
index = activeItem.index() + 1;

activeItem.addClass('active').siblings().removeClass('active'); //
selected.removeClass('selected-1 selected-2 selected-3').addClass('selected-'+index);
// if color has been changed, update the visible product image
selected.hasClass('color') && updateSlider(selected, index-1); //更新商品列表
}
});

//加入方案按钮点击事件 调用提交成功动画 及购物车徽章显示动画
addToCartBtn.on('click', function() {

//加入方案点击后获取当前点击按钮所在的tr索引

//var $dotval=$(this).parentsUntil("div.med_btnb").parentsUntil("td").prevUntil("td.med_dotn").css("background","#000");
//alert($dotval);

if(!animating) {
//animate if not already animating
animating = true;
resetCustomization(addToCartBtn);

addToCartBtn.addClass('is-added').find('path').eq(0).animate({
//draw the check icon
'stroke-dashoffset':0
}, 300, function(){
setTimeout(function(){
updateCart(); //更新购物车数据
addToCartBtn.removeClass('is-added').find('em').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
//wait for the end of the transition to reset the check icon
addToCartBtn.find('path').eq(0).css('stroke-dashoffset', '19.79');
animating = false;
});

if( $('.no-csstransitions').length > 0 ) {
// check if browser doesn't support css transitions
addToCartBtn.find('path').eq(0).css('stroke-dashoffset', '19.79');
animating = false;
}
}, 600);
});
}
});

//detect click on the settings icon - touch devices only
touchSettings.on('click', function(event){
event.preventDefault();
resetCustomization(addToCartBtn);
});
});
}

function updateSlider(actual, index) {
var slider = actual.parent('.cd-customization').prev('a').children('.cd-slider-wrapper'),
slides = slider.children('li');

slides.eq(index).removeClass('move-left').addClass('selected').prevAll().removeClass('selected').addClass('move-left').end().nextAll().removeClass('selected move-left');
}

function resetCustomization(selectOptions) {
//close ul.clor/ul.size if they were left open and user is not interacting with them anymore
//remove the .hover class from items if user is interacting with a different one
selectOptions.siblings('[data-type="select"]').removeClass('is-open').end().parents('.cd-single-item').addClass('hover').parent('li').siblings('li').find('.cd-single-item').removeClass('hover').end().find('[data-type="select"]').removeClass('is-open');
}

function deactivateCustomization() {
productCustomization.parent('.cd-single-item').removeClass('hover').end().find('[data-type="select"]').removeClass('is-open');
}

function updateCart() {
//show counter if this is the first item added to the cart
( !cart.hasClass('items-added') ) && cart.addClass('items-added');
var dot_nm=$("#dot_num").val();
var cartItems = cart.find('span'),

text = parseInt(dot_nm);
cartItems.text(text);
}
});

转载于:https://www.cnblogs.com/lvlina/p/6269590.html