WooCommerce：根据选择的运输方式隐藏运费计算器

Question

我试图根据选择的运输方式隐藏我的购物车页面上的运输计算器（使用 jQuery），首先是在页面加载时，然后当用户选择另一种方法或更新购物车时，这将启用/禁用新的运输方法，但我似乎无法让它发挥作用。

我的 Javascript / jQuery 很生锈所以我不知道我做错了什么。

下面的代码是我到目前为止尝试过的。 它确实像我想要的那样在页面加载时工作（=如果选择“免费送货”或者如果它是唯一可用的送货方式，运费计算器将被隐藏。

但是当我选择另一种运输方式时，运费计算器不会再次出现，除非我手动重新加载页面。

如果购物车更新了额外的产品数量（通过直接在购物车页面上增加产品数量）以达到免费送货的最低数量，它也不会起作用。

jQuery(document).ready(function() {
    if(jQuery("*[id*=free_shipping]").is(':checked') || jQuery("*[id*=free_shipping]").is(':hidden') ){
        jQuery(".woocommerce-shipping-calculator").css("display","none");
    }
    else{
        jQuery(".woocommerce-shipping-calculator").css("display","block");

    }
});


jQuery("input[type=radio]").click(function() {
    if(jQuery("*[id*=free_shipping]").is(':checked')){
        jQuery(".woocommerce-shipping-calculator").css("display","none !important");
    }
    else{
        jQuery(".woocommerce-shipping-calculator").css("display","block !important");

    }
})

任何帮助将不胜感激！

谢谢

Answer 1

非常感谢您的解释和代码。

它几乎可以完美运行，除非我尝试更新我的购物车。 如果我的购物车价值足以触发免费送货（超过 150 欧元），然后我删除了一个购物车低于 150 欧元的产品并点击“更新购物车”，那么常规的送货方式将显示但运费计算器不会再次显示。 要再次显示它，我必须单击其中一种运输方式的单选按钮。

我试图修改你给我的代码做类似的事情，但无法让它工作：/

jQuery(document).ready(function($) {
    if(jQuery("*[id*=free_shipping]").is(':checked') || jQuery("*[id*=free_shipping]").is(':hidden') ){
        jQuery(".woocommerce-shipping-calculator").css("display","none");
    }
    else{
        jQuery(".woocommerce-shipping-calculator").css("display","block");

    }

    jQuery('body').on('click', "input[type=radio]",function() {

      if(jQuery("*[id*=free_shipping]").is(':checked') || jQuery("*[id*=free_shipping]").is(':hidden')){
        setTimeout(function(){jQuery(".woocommerce-shipping-calculator").hide();}, 500);
      }
      else{
        setTimeout(function(){jQuery(".woocommerce-shipping-calculator").show();}, 500);
      } 
    });
});


jQuery("input[type=submit]").on('click', function() {

    if(jQuery("*[id*=free_shipping]").is(':checked') || jQuery("*[id*=free_shipping]").is(':hidden')){
      setTimeout(function(){jQuery(".woocommerce-shipping-calculator").hide();}, 500);
    }
    else{
      setTimeout(function(){jQuery(".woocommerce-shipping-calculator").show();}, 500);
    } 
  });

我尝试过使用".button"而不是"input[type=submit]" ，还尝试将这段额外代码放入整个jQuery(document).ready(function($) {[...]}) 。

另外我还有另一个问题：隐藏/显示运费计算器不会干扰内部 WooCommerce 功能，对吗？ 因为我也在 wordpress.org 上发帖，Woo Support 的人告诉我这是一个相当复杂的开发主题。 所以我想知道我是否不应该这样做？

再次感谢 ！

Answer 2

试试下面的脚本，它会起作用。 事实上，在每个单选框选择上，运输选择器都在重新加载，每当您重新加载 HTML 元素时，so.click() 事件需要与之进行新的绑定。 在jQuery我们之前调用的是.live()，现在我们调用的是.on()。 它与具有相同选择器或身份的新重新加载的元素保持绑定不变。

jQuery(document).ready(function($) {
if(jQuery("*[id*=free_shipping]").is(':checked') || jQuery("*[id*=free_shipping]").is(':hidden') ){
    jQuery(".woocommerce-shipping-calculator").css("display","none");
}
else{
    jQuery(".woocommerce-shipping-calculator").css("display","block");

}    
jQuery('body').on('click', "input[type=radio]",function() {
 
  if(jQuery("*[id*=free_shipping]").is(':checked')){
    setTimeout(function(){jQuery(".woocommerce-shipping-calculator").hide();}, 500);          
  }
  else{
    setTimeout(function(){jQuery(".woocommerce-shipping-calculator").show();}, 500);
  }  
});
});