如果选择了特定的付款方式，Woocommerce 仅运行 javascript

Question

我为 Woocommerce 开发了一个支付网关插件，它严重依赖于一些加载弹出窗口以捕获用户详细信息的 javascript。仅当从单选按钮中选择了该网关时，我才需要运行该 javascript。由于某种原因，它不起作用。这是我的代码

jQuery(document).ready(function() {
  usingGateway();
  jQuery('form[name="checkout"] input[name="payment_method"]:checked').change(function(){
    usingGateway();
  });
});

function usingGateway(){
    console.log(jQuery("input[name='payment_method']:checked").val());
    if(jQuery('form[name="checkout"] input[name="payment_method"]:checked').val() == 'my_gateway'){
        console.log("Using my gateway");
        //Etc etc
    }else{
         console.log("Not using my gateway. Proceed as usual");
    }
}

似乎 woocommerce 以某种方式覆盖了 javascript，因为即使选择了单选按钮，我用于 payment_method 的 console.log 始终未定义。然后跳过 IF 块，它总是说“不使用我的网关。当我注释掉 IF 语句时，支付网关工作正常。

但我需要它来工作，因为如果用户选择另一种付款方式（甚至是 BACS 或离线付款），javascript 仍将加载弹出窗口并尝试使用我的自定义网关处理付款。

更新：根据 rnevius 的评论，我检查了 woocommerce checkout.js 并将其从那里复制到我的插件 javascript 中：

var payment_methods = jQuery('.woocommerce-checkout').find( 'input[name="payment_method"]' );
if ( 0 === payment_methods.filter( ':checked' ).size() ) {
payment_methods.eq(0).attr( 'checked', 'checked' );
}

所以基本上如果没有检查任何内容，woocommerce 将强制检查第一项。不知道为什么我需要这样做，因为 woocommerce 已经在 checkout.js 中这样做了 现在可以了，但是如果我的网关还不是第一个选择的，“更改”功能仍然不起作用（当您从另一个网关更改为我的网关时）。请帮忙。

Answer 1

试试这个在支付方式选择上分配回调

jQuery(function(){
    jQuery( 'body' )
    .on( 'updated_checkout', function() {
          usingGateway();

        jQuery('input[name="payment_method"]').change(function(){
            console.log("payment method changed");
              usingGateway();

        });
    });
});


function usingGateway(){
    console.log(jQuery("input[name='payment_method']:checked").val());
    if(jQuery('form[name="checkout"] input[name="payment_method"]:checked').val() == 'my_gateway'){
        console.log("Using my gateway");
        //Etc etc
    }else{
         console.log("Not using my gateway. Proceed as usual");
    }
}   

Answer 2

事实证明，我称为“等”的区域是问题最后一部分的关键。这是最终奏效的方法，但谢天谢地，我接受了 Swarnendu 对他的努力的回答。原来在使用网关的时候，我是在绑定表单提交流程。

也就是说默认选择网关的时候，表单已经绑定到那个了支付网关。 然后，当用户更改支付方式时，即使选择了另一种方式，表单仍会尝试使用该网关。

解决方案是
(a) 强制检查单选选项作为默认选项（处理“未定义”问题。不知道为什么这是必要的，因为 woocommerce checkout.js 已经这样做了）。
(b) 如果在更改付款方式后，没有选择单选选项，则选择当前选项（由于 woocommerce checkout.js 的干扰，有时会出现一个奇怪的问题。官方可以通过包含您自己的结帐来解决此问题.js 到主题文件夹中，但是对于将在不同站点上使用的插件，没有这样的方法可以覆盖 checkout.js）所以然后使用“on”更改委托重复“a”。
(c) 如果网关没有被使用，解绑默认打通到网关的提交方法。

jQuery(document).ready(function() {
  jQuery('form[name="checkout"] input[name="payment_method"]').eq(0).prop('checked', true).attr( 'checked', 'checked' );
  usingGateway();
});

jQuery(document).on("change", "form[name='checkout'] input[name='payment_method']", function(){
  if ( 0 === jQuery('form[name="checkout"] input[name="payment_method"]' ).filter( ':checked' ).size() ) {
    jQuery(this).prop('checked', true).attr( 'checked', 'checked' );
  };
  usingGateway();
});

function usingGateway(){
  if(jQuery("form[name='checkout'] input[name='payment_method']:checked").val() == 'my_gateway'){
      console.log("Using my gateway");
      jQuery('form[name="checkout"]').on('submit', function(e){
         // Process using custom gateway
         // Etc etc
         e.preventDefault();
      });
  }else{
   // Not using gateway
   console.log("Not using my gateway. Proceed as usual");
   jQuery('form[name="checkout"]').unbind('submit');
   }
};