Premium add-on for Bricks Builder

Mini Cart automatically pops out after a product is added to the cart

Bricks builder has a native element for the mini cart feature. In this tutorial, I am showing you how the mini cart box pops out automatically after adding a product to the cart.

Mini Cart Element

Login to your Dashboard and go to Bricks -> Settings -> Custom Code tab. Enter the following JS code in the Body (footer) scripts textbox. Or you can create a separate JS file, put the code into the JS file and save it in the child theme folder. Then you will enqueue this JS file with wp_enqueue_scripts hook.

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function(){
    jQuery(document.body).on('added_to_cart', function(){
    	document.querySelectorAll(".bricks-woo-toggle").forEach(function(e) {
			let startTimer = null;
			let endTimer = null;

			startTimer = setTimeout( function() {
				e.click();
			}, 700 );

			endTimer = setTimeout( function() {
				clearTimeout(startTimer);
				e.click();
			}, 4500 );

			e.closest('.brxe-woocommerce-mini-cart').querySelector('.cart-detail').addEventListener('mouseover', function(){
				clearTimeout(endTimer);
			});
        });
    });
});
</script>

Unit of values 700 & 4500 is in ms(millisecond). You can change these values as per your requirement.

Fills In: 

2 comments

Leave your comment