How to change javascript in woocommerce on add to cart?

Question

I've been trying to develop a theme/plugin in woocommerce and I've spend hours researching how to edit the hook / JS for notices in regards to products.

Ultimately I would like to remove the default notice and stop it from scrolling up to the top of the page. Instead, I would like the notice to show up with position:absolute near the top of the page.

In the image above I have added JS to my products listing page. Here is the code I have created for it. This works fine, but it is me making my own div rather than using woocommerces ajax built in notice. (I believe I should be using the notices as it's an important feature on woocommerce)

$('.atc').click(function(e){
    var productAdded = $(this).attr('aria-label');
    var productNumber = $(this).attr('data-product_id');
    var fixedPlacement = 'top';
    var bannerID = "cart-notice-" + productNumber;
    if($(window).width() <= 768) {
        fixedPlacement = 'bottom';
    }
    var addToCartButton = '<div onmouseover="testThis()" class="position-fixed fixed-' + fixedPlacement + ' container alert-primary p-3 add-to-cart-banner" id="' + bannerID + '"><div class="row">';
    addToCartButton += '<div class="col-8"> <h3>' + productAdded + '</h3></div>';
    addToCartButton += '<div class="col-4 d-flex justify-content-end"><a href="/cart" class="btn btn-danger">View Cart</a> </div>';
    addToCartButton += '</div></div>';
    var currentItemHeight = $(this).scrollTop();
    console.log(currentItemHeight);
    if($('#' + bannerID).length) {
        $('#' + bannerID).remove();
    }
    $('body').append(addToCartButton);


    //determine if mobile or desktop
    if($(window).width() <= 768) {
        console.log('mobile');
        $('#' + bannerID).css("bottom", 0);

    }
    else {
        //DESKTOP
        var windowHeight = $(window).scrollTop();
        if(windowHeight < 143) {
            windowHeight = 150 - windowHeight;
        } else {
            windowHeight = 10;
        }
        $('#cart-notice-' + productNumber).css("top", windowHeight);
    }
    $('#' + bannerID).delay(4000).fadeOut(800);
    e.preventDefault();

});

When looking into the code, I noticed the notice is loaded via do_action( 'woocommerce_before_cart' ); ?> do_action( 'woocommerce_before_cart' ); ?> on the cart page. I am thinking wc_get_notices() hook is tied somewhere in there too. Additionally I have went deeper and brought in the add-to-cart.js into my theme using this in my functions.php

wp_deregister_script('wc-add-to-cart');
wp_register_script('wc-add-to-cart', get_template_directory_uri(). '/js/add-to-cart.js' , array( 'jquery' ), WC_VERSION, TRUE);
wp_enqueue_script('wc-add-to-cart');

The javascript file is now editable but I didn't find the notices in it, I know which hooks make my notices appear, but still have no idea how to change them. Any ideas how to customize the notices?

Update 1

I have used the updated_cart_totals event handler and intercepted it to be able to customize how it displays. However, for some reason my remove cart isn't working. It always refreshes the page. Below is the JS code to make it work on the cart page.

 $(document.body).on('updated_cart_totals, removed_from_cart',function(event){
                display_alert('.woocommerce-notices-wrapper');
                event.preventDefault();


            });
            function display_alert(alert_handle) {
                var fixedPlacement = 'top';
                if($(window).width() <= 768) {
                    fixedPlacement = 'bottom';
                }
                fixedPlacement = 'fixed-' + fixedPlacement;
                //determine if mobile or desktop
                if($(window).width() <= 768) {
                    console.log('mobile');
                    $(alert_handle).css("bottom", 0);

                }
                else {
                    //DESKTOP
                    var windowHeight = $(window).scrollTop();
                    if(windowHeight < 143) {
                        windowHeight = 150 - windowHeight;
                    } else {
                        windowHeight = 10;
                    }
                    $(alert_handle).addClass('position-fixed ' + fixedPlacement + ' container alert-primary p-3 add-to-cart-banner');
                    $(alert_handle).css("top", windowHeight);

                }
                $(alert_handle).show();
                $(alert_handle).delay(4000).fadeOut(800);
            }

Answer 1

I couldn't find a best way, as I tried really hard to instead of masking the code, to rebuild it, but I couldn't find any documentation on it. So I used woocommerce built in listeners to wait for certain actions (in this case updated_cart_totals ) after this ajax function is triggered it then passes .woocommerce-notices-wrapper into my display_alert function which adds classes and CSS depending on the size of screen. The last problem I had was the scrolling up after updates, as I wanted that disabled. I used this code -

            $( document.body ).on( 'checkout_error', function() {
                $( 'html, body' ).stop();
            } );
            $( document ).ajaxComplete( function() {
                if ( $( 'body' ).hasClass( 'woocommerce-checkout' ) || jQuery( 'body' ).hasClass( 'woocommerce-cart' ) ) {
                    $( 'html, body' ).stop();
                }
            } );

Here is the full code I have created to solve this problem. but I am open to a cleaner way...

            $(document.body).on('updated_cart_totals',function(event){
                display_alert('.woocommerce-notices-wrapper');
                event.preventDefault();
            });
            function display_alert(alert_handle) {
                var fixedPlacement = 'top';
                //determine if mobile or desktop
                if($(window).width() <= 768) {
                    fixedPlacement = 'bottom';
                    console.log('mobile');
                    $(alert_handle).css("bottom", 0);
                }
                else {
                    //DESKTOP
                    var windowHeight = $(window).scrollTop();
                    if(windowHeight < 143) {
                        windowHeight = 150 - windowHeight;
                    } else {
                        windowHeight = 10;
                    }
                    $(alert_handle).css("top", windowHeight);

                }

                fixedPlacement = 'fixed-' + fixedPlacement;
                $(alert_handle).removeClass('position-fixed  fixed-top fixed-bottom container alert-primary p-3 add-to-cart-banner');

                $(alert_handle).addClass('position-fixed ' + fixedPlacement + ' container alert-primary p-3 add-to-cart-banner');

                $(alert_handle).show();
                $(alert_handle).delay(4000).fadeOut(800);
            }
            $( document.body ).on( 'checkout_error', function() {
                $( 'html, body' ).stop();
            } );
            $( document ).ajaxComplete( function() {
                if ( $( 'body' ).hasClass( 'woocommerce-checkout' ) || jQuery( 'body' ).hasClass( 'woocommerce-cart' ) ) {
                    $( 'html, body' ).stop();
                }
            } );