Блог

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

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

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

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

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

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

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

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

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

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

Как вызвать исчезновение сообщений о проверке ошибок при оформлении заказа?

Попробуйте следующий код, используя 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() amp;amp; ! 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 файл вашей активной дочерней темы (или active theme). Протестировано и работает.

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

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

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