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

Posted 2023-02-22

【中文标题】如果选择了特定的付款方式，Woocommerce 仅运行 javascript

【英文标题】：Woocommerce to only run javascript if a specific payment method is selected

【发布时间】：2016-04-01 01:10:46

【问题描述】：

我为 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 中这样做了 现在可以了，但是如果我的网关还不是第一个选择的，“更改”功能仍然不起作用（当您从另一个网关更改为我的网关时）。请帮忙。

【问题讨论】：

了解一下付款方式更改后 WooCommerce 方面发生的情况可能会有所帮助：github.com/woothemes/woocommerce/blob/…

感谢 rnevius。但事情是这样的：即使在更改付款方式之前，当我的网关是默认网关（并且收音机已由 woocommerce 预先检查）时，它仍然显示为“未定义”。即使它是唯一的支付网关并且已经被选中，它也会显示为“未定义”。

用您的评论 rnevius 中的一些想法更新了帖子。

【参考方案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");
    
   

【讨论】：

嗨，谢谢，我试过了。我还尝试使用“on change”进行绑定。不走运......这通常有效，但 woocommerce 似乎使用其 checkout.js 覆盖了通常的行为

@Cogicero 请检查我更新的答案。我正在触发回调或更改付款方式。

【参考方案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');
   
;

【讨论】：

这是我发现的唯一可行的解​​决方案 :) 谢谢