购物车中的WooCommerce Plus / Minus按钮间歇性地显示 [英] WooCommerce Plus/Minus button in cart shows intermittently

问题描述

按照以下步骤此处让AJAX加入购物车为变量产品工作我遇到了一个问题，在我（成功）将商品添加到购物车后，购物车动态刷新，数量+/-按钮不显示（没有隐藏，但没有渲染）。数量值显示，但不是通常位于它旁边的按钮。

After following the steps here to get AJAX add to cart working for variable products I'm running into an issue where immediately after I (successfully) add an item to the cart, and the cart is refreshed dynamically, the quantity +/- buttons do not show (not hidden, but are not rendered). The quantity value shows, but not the buttons that normally sit beside it.

奇怪的是，如果我刷新页面（此时页面正常加载 - 不是通过get_refreshed_fragments - 按钮重新出现。有什么可能导致这种行为的想法？

The odd thing is if I refresh the page (at which point the page is loaded normally - not via get_refreshed_fragments - the buttons re-appear. Any ideas on what could lead to this behavior?

解决方案

感谢@ dingo_d的贡献很容易搞清楚。我不知道WC删除了数量按钮，这自然指向主题 - 在这种情况下是Avada - 它插入了一个代码块main.js的底部重新添加按钮。该块仅在加载时运行，没有用AJAX重新加载，在购物车刷新后没有数量按钮。

Thanks to @dingo_d's contribution it was pretty easy to figure it out. I didn't know WC removed the quantity buttons, which naturally pointed to the theme - in this case Avada - which plugged a code block at the bottom of main.js to re-add the buttons. The block only ran on load, no re-load with AJAX, a la no quantity buttons after cart refresh.

我刚把它分解成一个单独的函数，并在片段刷新后手动调用它。

I just broke it out into a separate function and called it manually after the fragments are refreshed.

推荐答案

我不知道如果您使用自定义模板文件（主题中有woocommerce文件夹），或者只是简单的woocommerce +挂钩外观，但新的woocommerce（来自ver 2.3 iirc）删除了单品商品上的+/-按钮。

I don't know if you use a custom template files (you have woocommerce folder inside the theme), or just plain woocommerce + hook for appearance, but the new woocommerce (from ver 2.3 iirc) removed the +/- buttons on single item products.

我从旧版中提取了一些jquery代码渲染旧按钮的模板，并在我的主题上使用它：

I pulled a bit of jquery code from the old templates that renders the old buttons, and use it on my themes:

// 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");
    });
});

这将在数量的一侧添加+/-按钮。

This will add a +/- buttons on the side of the quantity.

现在，如果你的主题里面有模板文件，那些按钮是硬编码的，那么你需要查看他们的类并尝试找到管理它们的代码。

Now, if your theme has template files inside that have those buttons hardcoded, then you need to see their class and try to find the code that's governing them.

希望这会有所帮助。

这篇关于购物车中的WooCommerce Plus / Minus按钮间歇性地显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！