Javascript Sweet Alert电子商务添加到购物车确认

我有一个插件，可以将Wordpress的变体更改为表格格式。我已经修改了很多代码。我正在尝试实施Sweet Alerts 2，而不是当用户成功将产品添加到购物车（或显示错误）时，它现在发出的警报

js文件中处理警报的原始代码在这里一直到文件末尾

    $.ajax({

        'url' : wcvw_urls.ajax_url,

        'method' : 'POST',

        dataType:"json",

        data : data,

        success: function(res){

            if(res.type === 'success'){

                 main_container.find('.wcvw_messages').html(res.message).fadeIn('slow');

                $this.addClass('added').removeClass('loading');

            }else{

                main_container.find('.wcvw_messages').html(res.message).fadeIn('slow');

                $this.addClass('').removeClass('loading');
            }
           },
        });
      });
    })(jQuery);

我尝试去工作的代码有点有效。。。但行为怪异。我不太懂javascript，所以我知道我没有做正确的事情。当我点击按钮时，它会将产品添加到购物车中，但甜警报直到第三次点击时才会激活，但随后会起作用。但只适用于列表中的第一个产品。也许需要一个foreach循环

这里是我的网页的链接，如果你想看看它是如何运作的。。。

只需在第一个产品上单击“添加到报价”几次。第二个产品应该给出一个错误，但是没有。第三，增加产品

这是我试图实现的修改后的代码

    $.ajax({

        'url' : wcvw_urls.ajax_url,

        'method' : 'POST',

        dataType:"json",

        data : data,

        success: function(res){

            if(res.type === 'success'){
                //ORIGINAL CODE
                // main_container.find('.wcvw_messages').html(res.message).fadeIn('slow');

                //Added Sweet Alert Success//
                document.querySelector('.add-to-cart-success').onclick = function() {
                swal({
                     title: 'Product Added to Quote!',
                    type: 'success',
                    html:
                        '<div><a class="fusion-button button-flat button-square button-large button-default button-1" href="http://192.163.245.60/~oti/cart/">Send Quote Now!</a></div><br />',
                    timer: 10000, 
                    confirmButtonText: '<i class="fa fa-times-circle"></i> Continue Shopping', 
                    showCloseButton: false,
                    showCancelButton: false,
                    });
                };
                //End Success Sweet Alert//
                $this.addClass('added').removeClass('loading');

            }else{
                //ORIGINAL CODE
                //main_container.find('.wcvw_messages').html(res.message).fadeIn('slow');

                //Added Sweet Alert Error//
                document.querySelector('.add-to-cart-error.sweet').onclick = function(){
                swal("Oops...", "Something went wrong! Please try again!", "error");
                    };
                //End Error Sweet Alert//
                $this.addClass('').removeClass('loading');
             }
           },
        });
     });
  })(jQuery);

$.ajax({
“url”：wcvw_url.ajax_url，
'method'：'POST'，
数据类型：“json”，
数据：数据，
成功：功能（res）{
如果（res.type==='success'）{
//原始代码
//main_container.find（'.wcvw_messages'）.html（res.message）.fadeIn（'slow'）；
//添加了甜蜜警报成功//
document.querySelector（'.add to cart success'）。onclick=function（）{
游泳({
标题：“添加到报价中的产品！”，
键入：“成功”，
html:
“
”，
计时器：10000，
confirmButtonText:“继续购物”，
showCloseButton:false，
showCancelButton:false，
});
};
//结束成功甜蜜警报//
$this.addClass（'added'）.removeClass（'loading'）；
}否则{
//原始代码
//main_container.find（'.wcvw_messages'）.html（res.message）.fadeIn（'slow'）；
//添加了甜警报错误//
document.querySelector（'.add to cart error.sweet'）。onclick=function（）{
swal（“哎呀……”，“出了问题！请再试一次！”，“错误”）；
};
//结束错误甜蜜警报//
$this.addClass（“”）.removeClass（'loading'）；
}
},
});
});
})（jQuery）；

当我点击按钮时，它会将产品添加到购物车中，但甜警报在第三次点击之前不会激活，但随后会起作用。但只对列表中的第一个产品起作用

这是因为第一个按钮单击发送ajax请求，然后当它返回时，您将sweet警报作为单击处理程序绑定到“document.querySelector（'.add to cart success'）的单击事件。换句话说，第一次单击是绑定事件，绑定后的后续单击将触发sweet警报

只需在第一个产品上单击“添加到报价”几次。第二个产品应该给出一个错误，但是没有。第三，增加产品

这三个按钮都有类“Addtocart success addtocart error sweet”和document.querySelector（）只返回与查询匹配的第一个元素，因此对于success和error，您的单击处理程序将只绑定到第一个按钮。您将只返回成功，因此成功警报是您唯一看到的警报

最简单的修复方法是完全删除“document.querySelector（'.add to cart success'）.onclick=function（）{}”和“document.querySelector（'.add to cart error.sweet'）.onclick=function（）{}”。回到这一点，在ajax请求返回之前，警报不会显示。这很好，因为你没有提供虚假信息。您只知道在请求返回后是否显示成功或失败警报

如果您希望在用户单击按钮时立即给用户一个指示器，然后在请求返回时更新警报，那么您可以将一个基本警报绑定到按钮单击，然后在请求返回时让来自ajax请求的警报覆盖它

JQuery：

(function($){

// Button click event binding
$(document).on('click','.wcvw_varition_add_to_cart', function(){  

    var $this = $(this);
    $this.removeClass('added').addClass('loading');
    var main_container = $('.wcvw_main_container');
    var rows = $(this).closest('.wcvw_row_of_items');
    var qty_data = rows.find('.wcvw_quantity input').val();

    if(qty_data=="" || qty_data==undefined){
        qty_data = 1;   
    }

    var data = {

        'action' : 'add_varition_product_into_cart',
        'product_id' : $this.attr('data-id'),
        'qty' : qty_data
    };

    // Initial alert when button is clicked
    swal({
        title: 'Adding to Quote...',
        showConfirmButton: false,
        allowOutsideClick: false
    })

    $.ajax({
        'url' : wcvw_urls.ajax_url,
        'method' : 'POST',
        dataType:"json",
        data : data,
        success: function(res){

            if(res.type === 'success'){

                //Added Sweet Alert Success//
                swal({
                    title: 'Product Added to Quote!',
                    type: 'success',
                    html:
                        '<div><a class="fusion-button button-flat button-square button-large button-default button-1" href="http://192.163.245.60/~oti/cart/">Send Quote Now!</a></div><br />',
                    timer: 10000, 
                    confirmButtonText: '<i class="fa fa-times-circle"></i> Continue Shopping', 
                    showCloseButton: false,
                    showCancelButton: false,
                    });

                //End Success Sweet Alert//
                $this.addClass('added').removeClass('loading');

            }else{

                //Added Sweet Alert Error//
                swal("Oops...", "Something went wrong! Please try again!", "error");
                //End Error Sweet Alert//
                $this.addClass('').removeClass('loading');
            }
        }
    });
});
})(jQuery);

（函数（$）{
//按钮单击事件绑定
$（文档）.on（'click'，'.wcvw_variation_add_to_cart'，function（）{
var$this=$（this）；
$this.removeClass（'added'）.addClass（'loading'）；
var main_container=$（'.wcvw_main_container'）；
var rows=$（this）.closest（'.wcvw_row_of_items'）；
var qty_data=rows.find（'.wcvw_数量输入'）.val（）；
如果（数量数据==“”| |数量数据==未定义）{
数量数据=1；
}
风险值数据={
“操作”：“将产品添加到购物车中”，
“产品id”：$this.attr（'data-id'），
“数量”：数量数据
};
//单击按钮时的初始警报
游泳({
标题：“添加到报价中…”，
showconfixton:false，
allowOutsideClick:false
})
$.ajax({
“url”：wcvw_url.ajax_url，
'method'：'POST'，
数据类型：“json”，
数据：数据，
成功：功能（res）{
如果（res.type==='success'）{
//添加了甜蜜警报成功//
游泳({
标题：“添加到报价中的产品！”，
键入：“成功”，
html:
“
”，
计时器：10000，
confirmButtonText:“继续购物”，
showCloseButton:false，
showCancelButton:false，
});
//结束成功甜蜜警报//
$this.addClass（'added'）.removeClass（'loading'）；
}否则{
//添加了甜警报错误//
swal（“哎呀……”，“出了问题！请再试一次！”，“错误”）；