在woocommerce checkout

Question

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

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

Answer 1

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

这是我的解决方案：

1.用您自己的按钮替换原始提交按钮

在functions.php中

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

点击新按钮时，它不会直接提交订单。

2.在新按钮上绑定事件

 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' );
    }

}