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);
});