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.method的console.log也始终是未定义的。然后跳过IF块，它总是说＆＃34;不使用我的网关。当我注释掉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中做到了这现在有效，但如果我的网关已经没有选择第一个，那么＆＃34;改变＆＃34;功能仍然无法正常工作（当您从另一个网关切换到我的网关时）。请帮忙。

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的干扰而发生的奇怪问题。正式，这可以通过包括您的将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

2 个答案: