如果选择了特定的付款方式，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，因为即使选择了单选按钮，我的 console.log 和 payment_method 始终未定义。然后跳过 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 中做到了现在可以了，但是如果我的网关不是第一个选择的网关，"change" 函数仍然不起作用（当您从另一个网关切换到我的网关时）。请帮忙。

Answer 1

试试这个来分配支付方式的回调 select

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

原来我提到的"Etc etc"区域是问题最后一部分的关键。这是最终奏效的方法，但我很高兴接受 Swarnendu 对他的努力的回答。原来在使用网关的时候，我在绑定表单提交流程。

这意味着当网关是select 默认情况下，表单已绑定到该支付网关。 然后，当用户更改付款方式时，表单仍会尝试使用该网关，即使已经selected。

解决方案是
(a) 强制检查一个单选选项作为默认选项（处理 "undefined" 问题。不知道为什么这是必要的，因为 woocommerce checkout.js 已经做到了）。
(b) 如果在更改付款方式后，没有无线电选项 selected 然后 select 当前的（有时由于干扰而发生的奇怪问题woocommerce checkout.js. 官方来说，这可以通过将你自己的 checkout.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');
   }
};

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

Woocommerce to only run javascript if a specific payment method is selected

javascript

wordpress

payment-gateway

woocommerce

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

Woocommerce to only run javascript if a specific payment method is selected

javascript

wordpress

payment-gateway

woocommerce

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