javascript - Sweet Alert Woocommerce 添加到购物车确认

Question

我有一个插件可以将 Wordpress Woocommerce 变体更改为表格格式。我已经修改了相当多的代码。我正在尝试实现 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 循环？

如果你想看看它是如何运作的，这是我页面的链接...... 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 请求，然后当它返回时，您将甜蜜警报作为单击处理程序绑定(bind)到“document.querySelector('.add-to-cart-success' )”。也就是说第一次点击绑定(bind)事件，绑定(bind)后的后续点击会触发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() 只返回匹配查询的第一个元素，所以对于成功和错误你的点击处理程序将仅绑定(bind)到第一个按钮。您只会返回成功，因此您只会看到成功警报。

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

如果你想在用户点击按钮时立即给用户一个指示器，然后在请求返回时更新警报，那么你可以将一个基本警报绑定(bind)到按钮点击，然后从 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);