How to change javascript in woocommerce on add to cart?

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.

enter image description here

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' ); ?> 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?

Source: Ask Javascript Questions

LEAVE A COMMENT