为我的自定义付款插件在woocommerce结帐时执行自定义js代码

Question

我正在为我的woo商务网站创建一个新的自定义付款插件。我在那里我需要添加一些信用卡和其他一些输入字段的自定义验证。我需要将所有这些验证添加到单独的js文件中，并且只有在JavaScript验证成功通过后才想触发结帐功能。

我可以使用wp_enqueue_scripts函数加载js，但我的js代码在结帐按钮单击后没有执行。 我想要的是在结帐时点击第一个需要执行我的代码，并根据我的验证检查需要继续结帐功能。

Answer 1

WooCommerce绑定订单表单上的事件并使用AJAX提交表单（您可以在checkout.js中查看代码）。

这里是我的解决方案：

1.Replace原来的提交按钮用自己的按钮

中的functions.php

add_filter('woocommerce_order_button_html', function(){ 
    return '<button class="new_submit button">Place Order</button>'; 
}); 

当新按钮，也不会直接提交订单。

2.Bind上的新按钮

jQuery(document).on('click', '.new_submit', function(e){ 
     e.preventDefault();  
     if (do_the_validation()){ 
     jQuery('form.checkout').submit(); 
     } else { 
     return false; 
     } 
}) 

同样的情况下，我会建议你做服务器端验证

add_action('woocommerce_checkout_process', 'my_validation'); 
function my_validation() { 
    //If it's invalid, add an error. 
    if (!do_validation()) { 
     wc_add_notice(__('Something goes wrong!'), 'error'); 
    } 

}