根据所选字段值显示或隐藏 WooCommerce 注册字段

Question

我在注册表单中添加了 2 个自定义字段，我需要根据用户选择的“代理”角色隐藏它们，但我做不到，这是我的代码示例，我将很高兴获得任何帮助。

//that's how I added the fields that need to be hidden if the agent user role is selected
add_action('woocommerce_register_form_start', 'text_domain_woo_reg_form_fields');
function text_domain_woo_reg_form_fields() {
    ?>
    <p class="form-row form-row-first">
        <label for="billing_company"><?php _e('Name Company', 'text_domain'); ?><span class="required">*</span></label>
        <input type="text" class="input-text" name="billing_company" id="billing_company" value="<?php if (!empty($_POST['billing_company'])) esc_attr_e($_POST['billing_company']); ?>" />
    </p>
    <p class="form-row form-row-last">
        <label for="billing_product"><?php _e('Company Product', 'text_domain'); ?><span class="required">*</span></label>
        <input type="text" class="input-text" name="billing_product" id="billing_product" value="<?php if (!empty($_POST['billing_product'])) esc_attr_e($_POST['billing_product']); ?>" />
    </p>
    <div class="clear"></div>
    <?php
}

 //Thats how I tried to hide the fields
add_action( 'woocommerce_register_form', 'hide_show_field', 9999 );
  
function hide_show_field() {
   wc_enqueue_js( "
      $('#reg_role').keyup(function() {
         if ($(this).val().length == 'subscriber') {
            $('#billing_company').hide();
         } else {
            $('#billing_product').hide();
         }
      });
   " );
}

//adding a role selection field
add_action( 'woocommerce_register_form', 'wc_extra_registation_fields' );
function wc_extra_registation_fields() {
    ?>
        <p class="form-row form-row-first">
            <label for="reg_role"><?php _e( 'Agent?', 'woocommerce' ); ?></label>
            <select class="input-text" name="role" id="reg_role">
            <option <?php if ( ! empty( $_POST['role'] ) && $_POST['role'] == 'customer') esc_attr_e( 'selected' ); ?> value="customer">Client</option>
            <option <?php if ( ! empty( $_POST['role'] ) && $_POST['role'] == 'subscriber') esc_attr_e( 'selected' ); ?> value="subscriber">Agent</option>
            </select>
        </p>
    <?php
}

Answer 1

尝试以下重新访问的代码，根据所选用户角色处理显示/隐藏字段，验证正确的字段（可选）并将字段值保存到数据库。

// Display fields in registration account form
add_action('woocommerce_register_form_start', 'display_account_registration_field');
function display_account_registration_field() {
    wc_enqueue_js("var role = $('select[name=role]').val();
    function showHideRegFields( role ) {
        if ( role == 'subscriber') {
            $('#billing_company_field').hide();
            $('#billing_product_field').show();
        } else {
            $('#billing_company_field').show();
            $('#billing_product_field').hide();
        }
        console.log(role); // For testing, to be removed
    }
    showHideRegFields( role );
    $(document.body).on('change', 'select[name=role]', function() {
        showHideRegFields( $(this).val() );
    });");

    $role = isset($_POST['role']) && ! empty($_POST['role']) ? $_POST['role'] : 'customer';
    ?>
    <p class="form-row form-row-first">
        <label for="reg_role"><?php _e( 'Agent?', 'woocommerce' ); ?></label>
        <select class="input-text" name="role" id="reg_role">
            <option value="customer"<?php echo $role === 'customer' ? ' selected' : '';?> ><?php _e( 'Client', 'woocommerce' ); ?></option>
            <option value="subscriber"<?php echo $role === 'subscriber' ? ' selected' : '';?> ><?php _e( 'Agent', 'woocommerce' ); ?></option>
        </select>
    </p>
    <p class="form-row form-row-last" id="billing_company_field" style="display:none;">
        <label for="billing_company"><?php _e('Name Company', 'text_domain'); ?><span class="required">*</span></label>
        <input type="text" class="input-text" name="billing_company" id="billing_company" value="<?php if (!empty($_POST['billing_company'])) esc_attr_e($_POST['billing_company']); ?>" />
    </p>
    <p class="form-row form-row-last" id="billing_product_field" style="display:none;">
        <label for="billing_product"><?php _e('Company Product', 'text_domain'); ?><span class="required">*</span></label>
        <input type="text" class="input-text" name="billing_product" id="billing_product" value="<?php if (!empty($_POST['billing_product'])) esc_attr_e($_POST['billing_product']); ?>" />
    </p>
    <div class="clear"></div>
    <?php
}

// registration Field validation
add_filter( 'woocommerce_registration_errors', 'account_registration_field_validation', 10, 3 );
function account_registration_field_validation( $errors, $username, $email ) {
    if ( $_POST['role'] === 'customer' && isset($_POST['billing_company']) && empty($_POST['billing_company']) ) {
        $errors->add( 'billing_company_error', __( 'Name Company is a required field', 'woocommerce' ) );
    }
    if ( $_POST['role'] === 'subscriber' && isset($_POST['billing_product']) && empty($_POST['billing_product']) ) {
        $errors->add( 'billing_product_error', __( 'Company Product is a required field', 'woocommerce' ) );
    }
    return $errors;
}

// Save registration Field value
add_action( 'woocommerce_created_customer', 'save_account_registration_field' );
function save_account_registration_field( $customer_id ) {
    if ( $_POST['role'] === 'customer' && isset($_POST['billing_company']) && ! empty($_POST['billing_company']) ) {
        update_user_meta( $customer_id, 'billing_company', sanitize_text_field( $_POST['billing_company'] ) );
    }
    if ( $_POST['role'] === 'subscriber' && isset($_POST['billing_product']) && ! empty($_POST['billing_product']) ) {
        update_user_meta( $customer_id, 'billing_product', sanitize_text_field( $_POST['billing_product'] ) );
    }
}

代码位于子主题的functions.php 文件中（或插件中）。已测试并有效。