WooCommerce购物车页面需要实时更新，而无需“更新购物车”按钮

Question

数量更改后，我正在处理的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);
        });
  });

Answer 1

嘿，如果还不算太晚，这是一个快速的解决方案，它将更新您的购物车，而无需用户单击“更新购物车”按钮。 它不是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;
}

那应该工作！

Answer 2

感谢Niko。 我对他的代码段几乎没有改变。 即使使用woocommerce的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");
        }
    });
});

Answer 3

您的问题是您发送SERIALIZED数据以更新购物车功能，因此它无法识别发布数据，因此您必须将所有输入字段都放入jquery发布中