Sweet Alert Woocommerce 添加到购物车确认

Question

我有一个插件可以将 Wordpress Woocommerce 变体更改为 table 格式。我已经修改了相当多的代码。我正在尝试实施 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，所以我知道我做的事情不对。当我单击该按钮时，它会将产品添加到购物车，但甜蜜警报直到第 3 次单击才会激活，但随后会起作用。但仅适用于列表中的第一个产品。也许需要一个 foreach 循环？

这里是 link 我的页面，如果你想看看它是如何运作的... http://192.163.245.60/~oti/product/asfs-1100-v-series/

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

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

    $.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);

Answer 1

When I click the button, it will add the product to the cart, but the sweet alert isn't activating until like the 3rd click, but then works.But only works for the first product in the list.

这是因为第一个按钮点击发送了您的 ajax 请求，然后当它 return 时，您将作为点击处理程序的 sweet alert 绑定到 [=23= 的点击事件].也就是说第一次点击是绑定事件，绑定后的后续点击会触发sweet alert

Just click the Add to Quote on first product a few time. The second product should give an error but doesn't. The third should add products.

所有三个按钮都有类 "add-to-cart-success add-to-cart-error sweet" 和 document.querySelector() 只有 return 是匹配查询的第一个元素，所以无论是成功还是错误你单击处理程序将仅绑定到第一个按钮。您只会 return 一次成功，因此您只会看到成功警报。

最简单的解决方法是完全删除 "document.querySelector('.add-to-cart-success').onclick = function() {}" 和 "document.querySelector('.add-to-cart-error.sweet').onclick = function(){}"。这样做的缺点是在 ajax 请求 return 之前不会显示警报。这很好，因为您没有提供虚假信息。您只知道在请求 returns.

之后是显示成功警报还是失败警报

如果你想在用户点击按钮时立即给用户一个指示器，然后在请求 returns 时更新警报，那么你可以将基本警报绑定到按钮点击，并且然后让 ajax 请求的警报在您的请求 returns.

时覆盖它

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);

Sweet Alert Woocommerce 添加到购物车确认

Sweet Alert Woocommerce Add to Cart Confirmation

javascript

ajax

wordpress

jquery

sweetalert