WooCommerce：根据所选的运输方式隐藏运输计算器答案

【问题标题】：WooCommerce : Hide shipping calculator depending on selected shipping methodWooCommerce：根据所选的运输方式隐藏运输计算器
【发布时间】：2021-01-08 06:42:59
【问题描述】：

我试图隐藏我的购物车页面上的运费计算器（使用 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");

    }
})

任何帮助将不胜感激！

谢谢

【问题讨论】：

标签： javascript jquery wordpress woocommerce shipping-method

【解决方案1】：

试试下面的脚本，它会起作用。事实上，在每次选择单选框时，运输选择器都会重新加载，并且每当您重新加载 HTML 元素时，因此 .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);
  }  
});
});

【讨论】：

您好，非常感谢您的意见。我不确定堆栈通知是如何工作的，因为我还是个新手，但我已经发布了一个新问题作为对帖子的新答案。我并不是要你检查它，只是想确保你知道我感谢你的帮助，如果你知道如何解决“更新购物车”问题，那就是精彩的。谢谢！

【解决方案2】：

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

它几乎可以完美运行，除非我尝试更新我的购物车。如果我有一个价值足以触发免费送货的购物车（超过 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 的某个人告诉我这是一个相当复杂的开发主题。所以我想知道我是否应该这样做？

再次感谢！

【讨论】：