Добавьте флажок, чтобы показать / скрыть поля оформления заказа в Woocommerce - PullRequest
Новая
       10

Добавьте флажок, чтобы показать / скрыть поля оформления заказа в Woocommerce

0 голосов
/ 18 февраля 2019

Давайте проследим за scenerio:

Клиент находится на странице оформления заказа, и есть флажок с текстом: «Это подарок?»

Если флажок установлен, полениже будет исчезать, чтобы делать заметки.

Исходя из этой темы и некоторых других тем, здесь мой код: 

add_filter( 'woocommerce_checkout_fields' , 'display_checkbox_and_new_checkout_field' );   
function display_checkbox_and_new_checkout_field( $fields ) {

    $fields['billing']['checkbox_trigger'] = array(
        'type'      => 'checkbox',
        'label'     => __('Checkbox label', 'woocommerce'),
        'class'     => array('form-row-wide'),
        'clear'     => true
    );  

    $fields['billing']['new_billing_field'] = array(
        'label'     => __('New Billing Field Label', 'woocommerce'),
        'placeholder'   => _x('New Billing Field Placeholder', 'placeholder', 'woocommerce'),
        'class'     => array('form-row-wide'),
        'clear'     => true
    );

    return $fields;
}

add_action( 'woocommerce_after_checkout_form', 'conditionally_hide_show_new_field', 6 );
function conditionally_hide_show_new_field() {
      ?>
        <script type="text/javascript">
            jQuery('input#checkbox_trigger').change(function(){

                if (this.checked) {
                    jQuery('#new_billing_field_field').fadeOut();
                    jQuery('#new_billing_field_field input').val('');           
                } else {
                    jQuery('#new_billing_field_field').fadeIn();
                }

            });
        </script>
    <?php
}

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

Как я могу изменить сценарий, чтобы сделать его невидимым при загрузке?

1 Ответ

0 голосов
/ 19 февраля 2019

Вместо этого попробуйте следующее: 

add_action( 'woocommerce_before_checkout_form', 'conditionally_show_hide_checkout_field' );
function conditionally_show_hide_checkout_field() {
    ?>
    <style>
    p#new_billing_field_field.on { display:none !important; }
    </style>

    <script type="text/javascript">
    jQuery(function($){
        var a = 'input#checkbox_trigger',   b = '#new_billing_field_field'

        $(a).change(function(){
            if ( $(this).prop('checked') === true && $(b).hasClass('on') ) {
                $(b).show(function(){
                    $(b).css({'display':'none'}).removeClass('on').show();
                });
            }
            else if ( $(this).prop('checked') !== true && ! $(b).hasClass('on') ) {
                $(b).fadeOut(function(){
                    $(b).addClass('on')
                });
                $(b+' input').val('');
            }
        });
    });
    </script>
    <?php
}

add_filter( 'woocommerce_checkout_fields', 'add_custom_checkout_fields' );
function add_custom_checkout_fields( $fields ) {

    $fields['billing']['checkbox_trigger'] = array(
        'type'      => 'checkbox',
        'label'     => __('Checkbox label', 'woocommerce'),
        'class'     => array('form-row-wide'),
        'clear'     => true
    );

    $fields['billing']['new_billing_field'] = array(
        'label'     => __('New Billing Field Label', 'woocommerce'),
        'placeholder'   => _x('New Billing Field Placeholder', 'placeholder', 'woocommerce'),
        'class'     => array('form-row-wide on'),
        'clear'     => true
    );

    return $fields;
}

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

...