为 Opencart 飞到购物车

Question

我有以下代码为 Opencart 实现飞到购物车。

问题：第一次点击 AddtoCart 时，没有产品飞到购物车 - 但产品已成功添加。第二次单击 AddtoCart 时，产品会飞到购物车（这就是我想要的）。第三次单击 AddtoCart 时，两个图像克隆飞到购物车，依此类推。

谁能指出我下面代码中的错误。

function addToCart(product_id, quantity) {

    quantity = typeof(quantity) != 'undefined' ? quantity : 1;
i = 10;
    $.ajax({
            url: 'index.php?route=checkout/cart/add',
        type: 'post',
        data: 'product_id=' + product_id + '&quantity=' + quantity,
        dataType: 'json',
        success: function(json) {
        //alert(this);

            $('.success, .warning, .attention, .information, .error').remove();

            if (json['redirect']) {
                location = json['redirect'];
            }
            //alert(this);
//alert("button is clicked");
            if (json['success']) {
            alert(this);
//alert("button is clicked");
            $('.button').click(function () {
//      alert("button is clicked");
        adt = $(this);
        var cart = $('#cart');
    //  alert (this);
        var imgtodrag = $(adt).parent().siblings(".image").find("img").eq(0);
        //alert (this);
//      alert(imgtodrag);

      if (imgtodrag) {
//alert(imgtodrag);

        i = i + 30;
            var imgclone = imgtodrag.clone()
                .offset({
                top: imgtodrag.offset().top,
                left: imgtodrag.offset().left
            })
                .css({
                'opacity': '0.5',
                    'position': 'absolute',
                    'height': '150px',
                    'width': '150px',
                    'z-index': '100'
            })
                .appendTo($('body'))
                .animate({
                'top': cart.offset().top + 10,
                    'left': cart.offset().left + i ,
                    'width': 75,
                    'height': 75
            }, 1000, 'easeInOutExpo');

            /*setTimeout(function () {
                cart.effect("shake", {
                    times: 2
                }, 200);
            }, 1500); */

            imgclone.animate({
                'width': 15,
                    'height': 15
            }, function () {
                $(this).detach()
            });
        }
    });
        //      $('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');

                $('.success').fadeIn('slow');

                $('#cart-total').html(json['total']);

                $('html, body').animate({ scrollTop: 0 }, 'slow'); 
            }   
        }
    });
}

Answer 1

问题是您仅在将产品添加到购物车后才添加到$('.button').click 事件（至少从上面的代码中）。我会亲自创建一个为该按钮创建该事件的函数。您的代码将变为：

function bindButtonClick() {
    $('.button').off('click').click(function () {
        adt = $(this);
        var cart = $('#cart');
        var imgtodrag = $(adt).parent().siblings(".image").find("img").eq(0);

        if (imgtodrag) {

            i = i + 30;
            var imgclone = imgtodrag.clone()
                .offset({
                    top: imgtodrag.offset().top,
                    left: imgtodrag.offset().left
                })
                .css({
                    'opacity': '0.5',
                    'position': 'absolute',
                    'height': '150px',
                    'width': '150px',
                    'z-index': '100'
                })
                .appendTo($('body'))
                .animate({
                    'top': cart.offset().top + 10,
                    'left': cart.offset().left + i ,
                    'width': 75,
                    'height': 75
                }, 1000, 'easeInOutExpo');

            imgclone.animate({
                'width': 15,
                'height': 15
            }, function () {
                $(this).detach()
            });
        }
    });
}

function addToCart(product_id, quantity) {

    quantity = typeof(quantity) != 'undefined' ? quantity : 1;
    i = 10;
    $.ajax({
        url: 'index.php?route=checkout/cart/add',
        type: 'post',
        data: 'product_id=' + product_id + '&quantity=' + quantity,
        dataType: 'json',
        success: function(json) {

            $('.success, .warning, .attention, .information, .error').remove();

            if (json['redirect']) {
                location = json['redirect'];
            }

            if (json['success']) {

                bindButtonClick();

                $('.success').fadeIn('slow');

                $('#cart-total').html(json['total']);

                $('html, body').animate({ scrollTop: 0 }, 'slow'); 
            }
        }
    });
}

现在，函数 bindButtonClick 必须在 domready 上调用

$(function(){
    bindButtonClick();
});

另外，请注意 $('.button').off('click') 取消绑定您之前的点击，这样它就不会被多次触发。

注意事项：
- 代替alert，尝试学习浏览器的开发工具，使用console.log 代替（在Firefox 中使用Firebug，在Google Chrome 中使用Chrome Developer Tools）。您将不会收到烦人的警报，并且可以在控制台中看到您的所有 javascript 错误。