Сообщения об ошибках проверки Fadeout на странице оформления заказа в WooCommerce - PullRequest
Новая
       18

Сообщения об ошибках проверки Fadeout на странице оформления заказа в WooCommerce

2 голосов
/ 13 марта 2019

При оформлении заказа WooCommerce проверяет все необходимые поля ввода пользователя. Если нет, то появляются сообщения об ошибках проверки, например, если имя отсутствует, и так далее.

Я хочу, чтобы эти сообщения об ошибках исчезали через определенное время.

Итак, я ввел этот код jQuery: 

(function($) {
    var wooError = $('.woocommerce-error'); 
    wooError.delay(4000).fadeOut(160);
})
(jQuery);

Пока класс .woocommerce-error не находится в пределах form.checkout, он работает нормально, например, при входе в систему или при регистрации. Но это не работает на странице оформления заказа.

Класс .woocommerce-error правильный (он есть) , но fadeOut не запускается.

Итак, я продолжил поиск в сети. Нашел другой подход, дождаться checkout_error события страницы оформления заказа, вот так: 

$( document.body ).on( 'checkout_error', function(){
    var wooError = $('.woocommerce-error'); 
    wooError.delay(4000).fadeOut(160);
})
(jQuery);

Но это не работает.

Может кто-нибудь сказать мне, почему я не могу активировать класс .woocommerce-error до тех пор, пока он находится внутри формы проверки?

Как вызвать сообщения fadeOut при проверке ошибок проверки?

Ответы [ 2 ]

1 голос
/ 13 марта 2019

Наконец я нашел путь. Если кто-то ищет это, вот как это работает: 

(function($) {
    $( document.body ).on( 'checkout_error', function(){
        var wooError = $('.woocommerce-error'); 
        wooError.delay(4000).fadeOut(160);
    })
})   
(jQuery);

После 13 часов кодирования и прочего вы иногда не видите очевидного.

1 голос
/ 13 марта 2019

Попробуйте следующий код, используя setTimeout() вместо delay(), что приведет к исчезновению любого сообщения об ошибке на странице оформления заказа с задержкой 4 секунды и продолжительностью 160 миль: 

// Checkout JS
add_action( 'wp_footer', 'checkout_fadeout_error_message');
function checkout_fadeout_error_message() {
    // Only on front-end and checkout page
    if( is_checkout() && ! is_wc_endpoint_url() ) :
    ?>
    <script>
    jQuery(function($){
        $(document.body).on( 'checkout_error', function(){
            var wooError = $('.woocommerce-error');
            setTimeout(function(){
                wooError.fadeOut(160);
            }, 4000);
        })
    });
    </script>
    <?php
    endif;
}

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

...