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' ); ?> 加载的。我在想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函数中，该函数会根据屏幕。我遇到的最后一个问题是更新后向上滚动，因为我希望禁用它。我使用了这段代码-

            $( 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并添加到购物车？

1 个答案: