Question

我有以下代码来实现Opencart的fly to cart。

问题：第一次点击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'); 
            }
        }
    });
}

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

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

另外，请注意$('.button').off('click')取消绑定您之前的点击次数，以免多次触发。

备注：
- 而不是alert，尝试了解浏览器的开发者工具，改为使用console.log（Firefox中的Firebug和Google Chrome中的Chrome Developer Tools）。你不会有唠叨警报，你可以在控制台中看到你所有的javascript错误。

飞到购物车的Opencart

1 个答案: