WooCommerce:自定义 OTP 插件在结帐时无法正常工作

问题描述

我的网站有这个插件,可以验证 OTP。它在注册页面显示并完美运行。

我想将完全相同的字段添加到我的结帐登记簿中。我添加了 Woocommerce 结账地点的钩子。它显示并完美贴合,但当我尝试检查按钮时它不起作用。我已经测试过了,它不发送 OTP。换句话说,它只是一个验证字段,它不像在注册页面上那样起作用。图一是我验证后它应该如何工作。

enter image description here

第二张图片在结账页面上,只出现但不做任何事情:

enter image description here

有人可以指出我做错了什么以及如何解决吗?

<?PHP

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}


class Xoo_Ml_Phone_Frontend{

    protected static $_instance = null;
    public $settings;

    public static function get_instance(){
        if ( is_null( self::$_instance ) ) {
            self::$_instance = new self();
        }
        return self::$_instance;
    }

    public function __construct(){
        $this->settings = xoo_ml_helper()->get_phone_option();
        $this->hooks();
    }

    public function hooks(){

        if( $this->settings['r-default-country-code-type'] === 'geolocation' ){
            add_action( 'init',array( $this,'fetch_geolocation' ),0 );
        }


        if( $this->settings['l-enable-login-with-otp'] === "yes" ){
            add_action( 'woocommerce_login_form_end','wc_login_with_otp_form' ) );
            add_filter( 'gettext','wc_login_username_field_i8n' ),999,3 );
        }

        if( $this->settings['r-enable-phone'] === "yes" ){
            add_action( 'woocommerce_register_form_start','wc_register_phone_input' ) );
            add_action( 'woocommerce_edit_account_form_start','wc_myaccount_edit_phone_input' ) );
        }


        add_action( 'wp_enqueue_scripts','enqueue_styles' ) );
        add_action( 'wp_enqueue_scripts','enqueue_scripts' ),0 );
        
    }


    public function fetch_geolocation(){
        Xoo_Ml_Geolocation::get_data();
    }



    public function wc_login_with_otp_form(){
        $args = self::wc_register_phone_input_args( array(
            'cc_show' => $this->settings['l-enable-cc-field']
        ) );
        $args = apply_filters( 'xoo_ml_wc_otp_login_form',$args );
        return xoo_ml_get_login_with_otp_form( $args );

    }


    //Enqueue stylesheets
    public function enqueue_styles(){
        wp_enqueue_style( 'dashicons' );

        if( !wp_style_is( 'select2' ) ){
            wp_enqueue_style( 'select2',"https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" );
        }

        wp_enqueue_style( 'xoo-ml-style',XOO_ML_URL.'/assets/css/xoo-ml-style.css',array(),XOO_ML_VERSION );
        $style = '';
        if( $this->settings[ 'l-login-display' ] === "yes" ){
            $style = "
                .xoo-el-form-login{
                    display: none;
                }
            ";
        }
        wp_add_inline_style('xoo-ml-style',$style );
    }

    //Enqueue javascript
    public function enqueue_scripts(){

        if( !wp_script_is( 'select2' ) ){
            wp_enqueue_script( 'select2',"https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js",array('jquery'),XOO_ML_VERSION,true ); // Main JS
        }


        if( xoo_ml_helper()->get_phone_option('m-operator') === 'firebase' ){
            wp_enqueue_script( 'firebase','https://www.gstatic.com/firebasejs/7.21.0/firebase-app.js',false,true );
            wp_enqueue_script( 'firebase-auth','https://www.gstatic.com/firebasejs/7.21.0/firebase-auth.js',true );
        }


        wp_enqueue_script( 'xoo-ml-phone-js',XOO_ML_URL.'/assets/js/xoo-ml-phone-js.js',true ); // Main JS

        $settings = $this->settings;

        wp_localize_script('xoo-ml-phone-js','xoo_ml_phone_localize',array(
            'adminurl'              => admin_url().'admin-ajax.PHP','resend_wait'           => $settings['otp-resend-wait'],'phone_form_classes'    => json_encode( self::phone_form_classes() ),'auto_submit_reg'       => $settings['r-auto-submit'],'show_phone'            => $settings['r-phone-field'],'otp_form_type'         => $settings['m-otp-form-type'],'operator'              => $settings['m-operator'],'inline_otp_verify_btn' => apply_filters( 'xoo_ml_inline_otp_verify','<span class="xoo-ml-inline-verify">'.__( 'Verify','mobile-login-woocommerce' ).'</span>' ),'strings'               => array(
                'verified'              => __( '<span class="dashicons dashicons-yes"></span>','mobile-login-woocommerce' ),'verify'                => __( 'Verify','placeholderInlineOTP'  => __( 'Enter OTP','mobile-login-woocommerce' )
            ),'notices'               => array(
                'empty_phone'   => xoo_ml_add_notice( __( 'Please enter a phone number','error' ),'empty_email'   => xoo_ml_add_notice( __( 'Email address cannot be empty.','empty_password'=> xoo_ml_add_notice( __( 'Please enter a password.','invalid_phone' => xoo_ml_add_notice( __( 'Please enter a valid phone number without any special characters & country code.','try_later'     => xoo_ml_add_notice( __( 'Something went wrong. Please try later','verify_error'  => xoo_ml_add_notice( __( 'Please verify your mobile number','error_placeholder' => xoo_ml_add_notice( '%s','success_placeholder' => xoo_ml_add_notice( '%s','success' ),'firebase_api_error' => xoo_ml_add_notice( __( 'Firebase API key is empty. Please setup firebase keys,read documentation.',),'login_first'   => $settings['l-login-display'],'html'          => array(
                'otp_form_inline'   => xoo_ml_helper()->get_template( "xoo-ml-inline-otp-input.PHP",'',true ),'otp_form_external' => xoo_ml_helper()->get_template( "xoo-ml-external-otp-form.PHP",'firebase'  => array(
                'api'       => xoo_ml_helper()->get_service_option('fb-api-key'),)
        ));


        if( $settings['m-operator'] === 'firebase' && xoo_ml_helper()->get_service_option('fb-config') ){
            wp_add_inline_script('xoo-ml-phone-js','xoo_ml_phone_localize.firebase.config = '. htmlspecialchars_decode( xoo_ml_helper()->get_service_option('fb-config') ) );
        }

    }


    public static function wc_register_phone_input_args( $args = array() ){
        $default_args = array(
            'label'         => __('Phone','mobile-login-woocommerce'),'cont_class'    => array(
                'woocommerce-form-row','woocommerce-form-row--wide','form-row form-row-wide'
            ),'input_class'   => array(
                'woocommerce-Input','input-text','woocommerce-Input--text'
            )
        );
        return wp_parse_args( $args,$default_args );
    }

    public function wc_myaccount_edit_phone_input(){
        return xoo_ml_get_phone_input_field( self::wc_register_phone_input_args(
            array(
                'form_type'     => 'update_user','default_phone' => xoo_ml_get_user_phone( get_current_user_id(),'number' ),'default_cc'    => xoo_ml_get_user_phone( get_current_user_id(),'code' ),)
        ) );
    }

    public function wc_register_phone_input(){
        return xoo_ml_get_phone_input_field( self::wc_register_phone_input_args() );
    }


    public static function phone_form_classes(){
        return apply_filters( 'xoo_ml_phone_form_classes',array(
            'woocommerce-form-register'
        ) );
    }


    public function wc_login_username_field_i8n( $translation,$text,$domain ){

        if( $domain === 'woocommerce' && ( strcmp( $text,'Username or email' ) === 0 || strcmp( $text,'Username or email address' ) === 0 ) ){
            return __( 'Phone or Email address','mobile-login-woocommerce' );
        }
        return $translation;
    }

}

function xoo_ml_phone_frontend(){
    return Xoo_Ml_Phone_Frontend::get_instance();
}
xoo_ml_phone_frontend();


这是我添加的无法正常工作的检查第二张图片它没有功能验证不做任何事情:

    if( $this->settings['r-enable-phone'] === "yes" ){
        add_action( 'woocommerce_before_checkout_registration_form','wc_register_phone_input' ) );
        add_action( 'woocommerce_register_form_start','wc_register_phone_input' ) ); 
        add_action( 'woocommerce_edit_account_form_start','wc_myaccount_edit_phone_input' ) );
                                             
    }

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)