如何在添加到购物车时更改 woocommerce 中的 javascript？

Question

我一直在尝试在 woocommerce 中开发一个 theme/plugin，我花了几个小时研究如何编辑关于产品的通知的钩子/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' ); ?> 加载的。我在想 wc_get_notices() 钩子也绑在那里的某个地方。此外，我已经更深入地在我的 functions.php

中使用它，将 add-to-cart.js 引入到我的主题中

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

我找不到最好的方法，因为我非常努力地尝试重建它而不是屏蔽代码，但我找不到任何关于它的文档。因此，在触发此 ajax 函数后，我使用内置监听器的 woocommerce 等待某些操作（在本例中为 updated_cart_totals），然后将 .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();
                }
            } );

如何在添加到购物车时更改 woocommerce 中的 javascript？

How to change javascript in woocommerce on add to cart?

javascript

wordpress

jquery

woocommerce

hook-woocommerce