<div id=”add-to-cart-popup” style=”display: none;”> <div class=”add-to-cart arrow-up”></div> <div class=”content”>Item added to cart</div> </div>
<script> require([‘jquery’], function($) { $(document).on(‘ajax:addToCart’, function(event, eventData) { $(‘#add-to-cart-popup’).fadeIn(); setTimeout(function() { $(‘#add-to-cart-popup’).fadeOut(); }, 1400); }); }); </script>
The script code uses jQuery to listen for the “ajax:addToCart” event, which is triggered when an item is successfully added to the cart using AJAX. When this event is triggered, the script fades in the “add-to-cart-popup” element using the jQuery fadeIn() method. It then sets a timeout function to fade out the element after 1400 milliseconds (1.4 seconds) using the jQuery fadeOut() method. This creates a brief pop-up that appears when the item is added to the cart and then disappears after a short delay.