Включить/отключить обязательное поле оформления заказа WooCommerce в зависимости от выбранного способа оплаты

Ответ на приведенный выше вопрос помог мне, но у меня все еще есть проблема: Показать скрытое пользовательское поле оформления заказа Woocommerce на основе выбранного способа оплаты

Я хочу, чтобы поле «Телефон» (поле обязательно) отображалось, когда покупатель выбирает платежный шлюз чека, а поле «Мобильный телефон» не отображалось и отключалось, если он выбирал другие платежные шлюзы.

// Conditional Show hide checkout fields based on chosen payment methods
add_action( 'wp_footer', 'conditionally_show_hide_billing_custom_field' );
function conditionally_show_hide_billing_custom_field(){
    // Only on checkout page
     if ( is_checkout() && ! is_wc_endpoint_url() ) :
    ?>
    <script>
        jQuery(function($){
            var a = 'input[name = "payment_method"]',
                b = a + ':checked',
                c = '#billing_phone_field'; // The checkout field <p> container selector

            // Function that shows or hide checkout fields
            function showHide( selector = '', action = 'show' ){
                if ( action == 'show' )
                    $(selector).show( 200, function(){
                        $(this).addClass("validate-required");
                    });
                else
                    $(selector).hide( 200, function(){
                        $(this).removeClass("validate-required");
                    });
                $(selector).removeClass("woocommerce-validated");
                $(selector).removeClass("woocommerce-invalid woocommerce-invalid-required-field");
            }

            // Initialising: Hide if choosen payment method is "cheque"
            if ( $(b).val() !== 'cheque' )
                showHide( c, 'hide' );
            else
                showHide( c );

            // Live event (When payment method is changed): Show or Hide based on "cheque"
            $( 'form.checkout' ).on( 'change', a, function() {
                if ( $(b).val() !== 'cheque' )
                    showHide( c, 'hide' );
                else
                    showHide( c );
            });
        });
    </script>
    <?php
    endif;
}

Проблема в том, что когда я выбираю другие платежные шлюзы, кроме чека, хотя поле Телефон скрыто, оно все равно проверяется и выдает ошибку (Телефон для выставления счетов - обязательное поле) - и это поле нужно заполнять, я не хочу этого!

Итак, где ваша попытка кода? Пожалуйста, укажите ваш код в вашем вопросе

LoicTheAztec 24.07.2023 09:11

Да, конечно, сейчас редактирую.

Adam Luper 24.07.2023 09:19

Я ответил ниже.

LoicTheAztec 24.07.2023 20:16

@LoicTheAztec Большое спасибо

Adam Luper 24.07.2023 20:41

@LoicTheAztec Можете ли вы помочь мне со следующим вопросом: stackoverflow.com/questions/76723816/…

Adam Luper 24.07.2023 20:45
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Symfony Station Communiqué - 7 июля 2023 г
Symfony Station Communiqué - 7 июля 2023 г
Это коммюнике первоначально появилось на Symfony Station .
Оживление вашего приложения Laravel: Понимание режима обслуживания
Оживление вашего приложения Laravel: Понимание режима обслуживания
Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...
Установка и настройка Nginx и PHP на Ubuntu-сервере
Установка и настройка Nginx и PHP на Ubuntu-сервере
В этот раз я сделаю руководство по установке и настройке nginx и php на Ubuntu OS.
Коллекции в Laravel более простым способом
Коллекции в Laravel более простым способом
Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...
Как установить PHP на Mac
Как установить PHP на Mac
PHP - это популярный язык программирования, который используется для разработки веб-приложений. Если вы используете Mac и хотите разрабатывать...
2
5
50
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете использовать jquery .prop('disabled', true); и .prop('disabled', false); для селектора ввода. Попробуйте код ниже.

add_action( 'wp_footer', 'conditionally_show_hide_billing_custom_field' );
function conditionally_show_hide_billing_custom_field(){
    // Only on checkout page
    if ( is_checkout() && ! is_wc_endpoint_url() ) :
    ?>
    <script>
        jQuery(function($){
            var a = 'input[name = "payment_method"]',
                b = a + ':checked',
                c = '#billing_phone_field'; // The checkout field <p> container selector

            // Function that shows or hides checkout fields
            function showHide( selector = '', action = 'show' ){
                if ( action == 'show' ) {
                    $(selector).show( 200, function(){
                        $(this).addClass("validate-required");
                    });
                    $(selector + ' input').prop('disabled', false);
                } else {
                    $(selector).hide( 200, function(){
                        $(this).removeClass("validate-required");
                    });
                    $(selector + ' input').prop('disabled', true);
                }
                $(selector).removeClass("woocommerce-validated");
                $(selector).removeClass("woocommerce-invalid woocommerce-invalid-required-field");
            }

            // Initialising: Hide if chosen payment method is not "cheque"
            if ( $(b).val() !== 'cheque' )
                showHide( c, 'hide' );
            else
                showHide( c );

            // Live event (When payment method is changed): Show or Hide based on "cheque"
            $( 'form.checkout' ).on( 'change', a, function() {
                if ( $(b).val() !== 'cheque' )
                    showHide( c, 'hide' );
                else
                    showHide( c );
            });
        });
    </script>
    <?php
    endif;
}

Чтобы удалить (Billing Phone is a required field)!, когда платежный шлюз не проверен, вы можете использовать woocommerce_checkout_fields крючок.

add_filter( 'woocommerce_checkout_fields', 'conditionally_disable_phone_field_validation' );
function conditionally_disable_phone_field_validation( $fields ) {
    // Only on checkout page
    if ( is_checkout() && ! is_wc_endpoint_url() ) {
        $chosen_payment_method = WC()->session->get( 'chosen_payment_method' );

        // Hide and disable phone field if chosen payment method is not "cheque"
        if ( $chosen_payment_method !== 'cheque' ) {
            $fields['billing']['billing_phone']['required'] = false;
            $fields['billing']['billing_phone']['validate'] = array();
        }
    }

    return $fields;
}

Спасибо за ваш ответ, но он по-прежнему не работает и отображает сообщение об ошибке (Billing Phone - обязательное поле)!

Adam Luper 24.07.2023 09:57

Еще раз спасибо, я не хочу, чтобы обязательное поле телефона удалялось, и я хочу, чтобы это поле всегда было обязательным. Потому что если оно не нужного типа, то все эти коды можно сказать неэффективны, потому что когда поле не нужного типа, заполнено оно или пусто, не важно, это не моя цель.

Adam Luper 24.07.2023 10:13
Ответ принят как подходящий

Следующее сделает работу, добавив скрытое поле для обработки проверки телефона для выставления счетов, когда поле телефона для выставления счетов видимо. Когда поле телефона для выставления счета скрыто и пусто, ошибка проверки не появится, что позволит разместить заказ в автоматическом режиме:

// Your settings goes in here
function my_checkout_settings()
{
    return array(
        'payment_id'   => 'cheque', // The payment Id
        'field_key_id' => 'billing_phone', // The checkout field key ID
    );
}

// Add a hidden billing input field for phone validation purpose
add_action('woocommerce_billing_fields', 'add_an_hidden_billing_fields');
function add_an_hidden_billing_fields($billing_fields) {
    extract(my_checkout_settings()); // Load your settings

    // Add a hidden input field
    $billing_fields[$field_key_id . '_is_valid'] = array(
        'type' => 'hidden',
        'required' => false,
        'default' => '',
    );

    return $billing_fields;
}

// Disabling conditionnally the Billing phone validation
add_action('woocommerce_after_checkout_validation', 'disable_specific_checkout_field_validation_conditionally', 20, 2);
function disable_specific_checkout_field_validation_conditionally($data, $errors) {
    extract(my_checkout_settings()); // Load your settings

    $validation_key =  $field_key_id . '_is_valid'; // The key Id of the hidden field

    if (empty($data[$field_key_id]) && isset($data[$validation_key]) && $data[$validation_key]) {
        $errors->remove($field_key_id . '_required'); // Remove unwanted error for this field
    }
}

// Conditional Show hide billing phone checkout fields based on chosen payment methods
add_action('woocommerce_checkout_init', 'enqueue_checkout_custom_script');
function enqueue_checkout_custom_script() {
    extract(my_checkout_settings()); // Load your settings

    wc_enqueue_js("const a = 'input[name=payment_method]',
        b = a + ':checked',
        c = '#{$field_key_id}',
        d = c + '_field',
        v = c + '_is_valid',
        p = '{$payment_id}';
    
    function triggerShowHide(b, d, p, v) {
        $(b).val() !== p ? $(d).show(200) : $(d).hide(200);
        $(b).val() !== p ? $(v).val('') : $(v).val('1');
    }
    
    // On the first load
     triggerShowHide(b, d, p, v);
    
    // On payment method 'change' live event
    $('form.checkout').on('change', a, function() {
        triggerShowHide(b, d, p, v);
    });");
}

Код находится в файле functions.php вашей активной дочерней темы (или в плагине). Проверено и работает.

Другие вопросы по теме