javascript - WooCommerce 结帐页面中的淡出验证错误消息

Question

下订单时，WooCommerce 会验证所有必需的用户字段输入。如果不是，结帐错误消息会显示为缺少名字等。

我希望这些错误验证消息在给定时间后淡出。

所以，我注入(inject)了这段 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 类淡出，只要它在结帐表单内？

如何触发结帐错误验证消息的淡出？

Answer 1

使用 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 文件。经过测试并有效。