如何在添加到購物車時更改 woocommerce 中的 javascript？

Question

我一直在嘗試在 woocommerce 中開發一個主題/插件，並且我花了幾個小時研究如何編輯掛鈎/ JS 以獲取有關產品的通知。

最終，我想刪除默認通知並阻止它向上滾動到頁面頂部。 相反，我希望通知顯示position:absolute靠近頁面頂部。

在上圖中，我已將 JS 添加到我的產品列表頁面。 這是我為它創建的代碼。 這工作正常，但它是我制作自己的 div 而不是使用 woocommerces ajax 內置通知。 （我相信我應該使用通知，因為它是 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();

});

在查看代碼時，我注意到通知是通過do_action( 'woocommerce_before_cart' ); ?>加載的do_action( 'woocommerce_before_cart' ); ?> do_action( 'woocommerce_before_cart' ); ?>在購物車頁面上。 我在想wc_get_notices()鈎子也被綁在那里的某個地方。 此外，我已經更深入地將 add-to-cart.js 引入到我的主題中，在我的 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');

javascript 文件現在是可編輯的，但我沒有在其中找到通知，我知道哪些鈎子使我的通知出現，但仍然不知道如何更改它們。 任何想法如何自定義通知？

更新 1

我使用了updated_cart_totals事件處理程序並攔截了它，以便能夠自定義它的顯示方式。 但是，由於某種原因，我的移除購物車無法正常工作。 它總是刷新頁面。 以下是使其在購物車頁面上工作的 JS 代碼。

 $(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

我找不到最好的方法，因為我非常努力地嘗試重建它，而不是屏蔽代碼，但我找不到任何關於它的文檔。 因此，我使用 woocommerce 內置偵聽器來等待某些操作（在本例中為updated_cart_totals ），在此 ajax 函數被觸發后，它將.woocommerce-notices-wrapper傳遞到我的 display_alert 函數中，該函數根據屏幕大小添加類和 CSS。 我遇到的最后一個問題是更新后向上滾動，因為我希望禁用它。 我使用了這個代碼 -

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

這是我為解決此問題而創建的完整代碼。 但我對更清潔的方式持開放態度......

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