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發布中