Home > Blockchain >  Close jQuery Popup Modal After 5 Seconds
Close jQuery Popup Modal After 5 Seconds

Time:07-11

I'm using this jQuery for an Add To Cart popup but can't work out how to add a timeout of 5 seconds to it.

(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 ><div ></div><div ><i ></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 );

I think i need to add something like this :

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

Also i'm wandering if i can add the timeout via a child theme without editing the default jQuery.

CodePudding user response:

added_to_cart is the default JS event triggered when the item is added to the cart.

List of various events into 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);
});
  • Related