WooCommerce购物车页面需要在没有“更新购物车”按钮的情况下实时更新


WooCommerce Cart page needs to update live without the Update Cart button

我正在处理的WooCommerce商店在数量更改后需要更新其购物车页面。此外,它不能有一个更新购物车按钮作为一个默认存在。有没有关于如何做到这一点的想法,可能使用AJAX或任何其他线索?

任何帮助都将是美妙的!目前,我们页面的购物车与http://www.shoopclothing.com应该是这样http://www.shoescribe.com/例如

到目前为止我尝试过的:

  • 尝试搜索更新购物车方法本身,但无法找到更改购物车小计的确切内容。

  • 还尝试使用AJAX再次打印出页面而不重新加载。这只是重新加载了整个页面,但数量仍然是相同的

这是我们尝试过的脚本:

 $(".product-order").on("click", "span.add", function () {
        var form = $(this).closest('form').serialize();
        $.ajax({
          type: "POST",
          url: "update_cart url",
          data: form
        }).done(function( msg ) {
            console.log(msg);
            alert("Data Saved: " + msg);
        });
  });

嘿,如果还不算太晚,这里有一个快速解决方案,用户无需单击"更新购物车"按钮即可更新购物车。这不是AJAX,但它是一种简单的方法。

基本上,如果用户更改了任何商品的数量,一旦用户退出产品数量td,购物车就会更新。它使用.trigger()jQuery事件处理程序自动提交表单。

只需使用这个jQuery代码:

jQuery(document).ready(function() {
    var itemQtyInitial;
    jQuery('.woocommerce table.cart tr.cart_item .product-quantity').hover(function() {
        itemQtyInitial = jQuery('.qty', this).val();
    }, function() {
        var itemQtyExit = jQuery('.qty', this).val();
        if(itemQtyInitial != itemQtyExit) {
            jQuery(".button[name='update_cart']").trigger("click");
        }
    });
});

然后你可以用这个CSS隐藏"更新购物车"按钮:

.woocommerce table.cart td.actions input[name="update_cart"] {
    display: none;
}

这应该行得通!

感谢Niko。我对他的代码片段做了一些改动。现在,即使使用wooccommerce的ajax,它也应该能很好地工作。用户点击"+"或"-"后,购物车将自动更新。
$('body').on('click','table.cart .quantity',function(){
    var itemQtyInitial;
    jQuery('.woocommerce table.cart tr.cart_item .product-quantity').hover(function() {
        itemQtyInitial = jQuery('.qty', this).val();
        console.log("inital",itemQtyInitial);
    }, function() {
        var itemQtyExit = jQuery('.qty', this).val();
        console.log("change",itemQtyExit);
        if(itemQtyInitial != itemQtyExit) {
            jQuery(".button[name='update_cart']").trigger("click");
        }
    });
});

您的问题是,您发送SERIALIZED数据来更新cart函数,因此它无法识别post数据,您必须将所有输入字段

放在jquery post中