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

当我点击按钮时，它会将产品添加到购物车，但甜蜜警报不会激活，直到第三次点击，但然后工作。但仅适用于列表中的第一个产品。

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

只需点击第一个产品上的添加到报价几次。第二个产品应该给出错误但不会。第三个应该添加产品。

所有三个按钮都有“add-to-cart-success add-to-cart-error sweet”类，而document.querySelector（）只返回与查询匹配的第一个元素，因此对于成功和错误，您的点击处理程序将仅绑定到第一个按钮。你只会获得成功，所以成功警报是你见过的唯一一个。

最简单的解决方法是删除“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);

Sweet Alert Woocommerce添加到购物车确认

1 个答案: