購物車中的WooCommerce加號/減號按鈕間歇顯示

Question

在按照此處的步驟將AJAX添加到適用於可變產品的購物車后，我遇到了一個問題，即在我（成功）將商品添加到購物車后，立即動態刷新購物車，數量+/-按鈕可以不顯示（不隱藏，但不渲染）。 數量值顯示，但通常不顯示旁邊的按鈕。

奇怪的是，如果刷新頁面（此時頁面已正常加載，而不是通過get_refreshed_fragments加載），按鈕會重新出現。關於導致這種現象的任何想法？

解

感謝@dingo_d的貢獻，很容易弄清楚。 我不知道WC刪除了數量按鈕，它自然指向主題（在本例中為Avada），該主題在main.js底部插入了一個代碼塊以重新添加按鈕。 該模塊僅在加載時運行，沒有用AJAX重新加載，在購物車刷新后沒有數量按鈕。

我只是將其分解為一個單獨的函數，並在刷新片段后手動調用它。

Answer 1

我不知道您是否使用自定義模板文件（主題內有woocommerce文件夾），還是僅使用woocommerce +外觀鈎子，但是新的woocommerce（來自2.3 iirc版本）刪除了單個項目上的+/-按鈕產品。

我從呈現舊按鈕的舊模板中提取了一些jQuery代碼，並將其用於主題：

// Input +- tweak

$(function(a){
a(".woocommerce-ordering").on("change", "select.orderby", function(){
    a(this).closest("form").submit();
}),
a("div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)").addClass("buttons_added").append('<input type="button" value="+" class="plus" />').prepend('<input type="button" value="-" class="minus" />'), a("input.qty:not(.product-quantity input.qty)").each(function(){
    var b=parseFloat(a(this).attr("min"));b&&b>0&&parseFloat(a(this).val())<b&&a(this).val(b);
}),
a(document).on("click", ".plus, .minus", function(){
    var b=a(this).closest(".quantity").find(".qty"),
    c=parseFloat(b.val()),
    d=parseFloat(b.attr("max")),
    e=parseFloat(b.attr("min")),
    f=b.attr("step");c&&""!==c&&"NaN"!==c||(c=0),
    (""===d||"NaN"===d)&&(d=""),
    (""===e||"NaN"===e)&&(e=0),
    ("any"===f||""===f||void 0===f||"NaN"===parseFloat(f))&&(f=1),
    a(this).is(".plus")?b.val(d&&(d==c||c>d)?d:c+parseFloat(f)):e&&(e==c||e>c)?b.val(e):c>0&&b.val(c-parseFloat(f)),
    b.trigger("change");
    });
});

這將在數​​量的側面添加一個+/-按鈕。

現在，如果您的主題中包含帶有硬編碼這些按鈕的模板文件，那么您需要查看它們的類並嘗試查找控制它們的代碼。

希望這可以幫助。

Answer 2

要解決以上問題，您只需將ajaxComplete函數添加到主題functions.php中

    var cartUpdateStart=false;

    jQuery( document ).ajaxComplete(function() {

        if(cartUpdateStart){

            addPlusMinusIcons();

            cartUpdateStart=false;

        }

    });

將以下腳本添加到您的子主題script.js

var aObj;

函數addPlusMinusIcons（）{

console.log('executing');

aObj(".woocommerce-ordering").on("change", "select.orderby", function() {

    aObj(this).closest("form").submit()

}), aObj("div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)").addClass("buttons_added").append('<span class="minus"><i class="fa fa-minus" aria-hidden="true"></i></span>').prepend('<span class="plus"><i class="fa fa-plus" aria-hidden="true"></i></span>'), aObj("input.qty:not(.product-quantity input.qty)").each(function() {

    var b = parseFloat(aObj(this).attr("min"));

    b && b > 0 && parseFloat(aObj(this).val()) < b && aObj(this).val(b)

}), aObj(document).on("click", ".plus, .minus", function() {  
    var b = aObj(this).closest(".quantity").find(".qty"), c = parseFloat(b.val()), d = parseFloat(b.attr("max")), e = parseFloat(b.attr("min")), f = b.attr("step");

    c && "" !== c && "NaN" !== c || ( c = 0), ("" === d || "NaN" === d) && ( d = ""), ("" === e || "NaN" === e) && ( e = 0), ("any" === f || "" === f ||

    void 0 === f || "NaN" === parseFloat(f)) && ( f = 1), aObj(this).is(".plus") ? b.val(d && (d == c || c > d) ? d : c + parseFloat(f)) : e && (e == c || e > c) ? b.val(e) : c > 0 && b.val(c - parseFloat(f)), b.trigger("change")

})
}

jQuery(function(a) {
   aObj=a;
   addPlusMinusIcons();
});