jquery - 5 秒后关闭 jQuery 弹出模式

Question

我使用这个 jQuery 来添加“添加到购物车”弹出窗口，但不知道如何为其添加 5 秒的超时。

(function($) {
    "use strict";
    
    jQuery(document).mouseup(function (e) {
        
        container = jQuery('.atc-notice-wrapper');
        if (!container.is(e.target) && container.has(e.target).length === 0 ) {
            jQuery('.atc-notice-wrapper').fadeOut();
        }
    }); 

    jQuery(document).ready(function(){

        jQuery('body').append('<div class="atc-notice-wrapper"><div class="atc-notice"></div><div class="close"><i class="fa fa-times-circle"></i></div></div>');

        jQuery('.atc-notice-wrapper .close').on('click', function(){
            jQuery('.atc-notice-wrapper').fadeOut();
            jQuery('.atc-notice').html('');
        });
        var ajaxPId = 0;
        jQuery('body').on( 'adding_to_cart', function(event, button, data) {
            ajaxPId = button.attr('data-product_id');
        });
        jQuery('body').on( 'added_to_cart', function(event, fragments, cart_hash) {
            //get product info by ajax
            jQuery.post(
                ajaxurl, 
                {
                    'action': 'get_productinfo',
                    'data':   {'pid': ajaxPId}
                },
                function(response){
                    jQuery('.atc-notice').html(response);
                    //show product info after added
                    jQuery('.atc-notice-wrapper').fadeIn();
                }
            );
        });
        jQuery('body').on( 'added_to_cart', function(event, fragments, cart_hash) {
            //show product info after added
            jQuery('.atc-notice-wrapper').fadeIn();
        }); 
        
        
function hideQuickView(){
    jQuery('.quickview-wrapper').removeClass('open');
            
    window.setTimeout(function(){
        jQuery('body').removeClass('quickview');
    }, 500);
}


    } );
})( window.jQuery );

我想我需要添加这样的内容:

setTimeout(function(){
  $('.atc-notice-wrapper').modal('hide')
}, 5000);

此外，我还在想是否可以通过子主题添加超时而不编辑默认的 jQuery。

Answer 1

added_to_cart 是商品添加到购物车时触发的默认 JS 事件。

woocommerce 的各种事件列表 Link

jQuery('body').on( 'added_to_cart', function(event, fragments, cart_hash) {
 //show product info after added
 jQuery('.atc-notice-wrapper').fadeIn();
 // add setTimeout to autoclose it after 5 seconds
 setTimeout(function(){
   jQuery('.atc-notice-wrapper').fadeOut();
 }, 5000);
});