重新定位购物车页面上的WooCommerce通知/消息

时间:2018-06-12 作者:Jon Fergus

编辑:请参阅@motivast的以下解决方案。通过他的基本设置,您可以对特定的自动滚动操作进行任何更改,并重新定位您想要的特定通知。我的最终解决方案还包括在优惠券表单中挂起一个空白div,然后针对优惠券通知,如下所示:

/* Add div to hook coupon notices to */
add_action (\'woocommerce_cart_coupon\' , \'coupon_notices_div\' , 1 );
function coupon_notices_div() {
    echo "";
?>
<div class="cart-coupon-notices"></div>
<?php
}
在自定义插件php文件中,您可以使用它。购物车优惠券通知代替。在@motivast的解决方案中运送抵押品。这将在“应用优惠券”按钮的正下方放置优惠券通知。

原始问题:

我在产品/商店页面上找到了许多如何为“添加到购物车”通知执行此操作的示例,但购物车页面似乎完全不同。我最想移动的通知是优惠券通知(即“优惠券申请成功”等)。当客户添加优惠券时,自动将其滚动到页面顶部对他们来说是非常烦人的。

每个人都在谈论的解决方案是,您只需将wc\\u print\\u通知从cart页面的顶部重新定位到其他地方(我希望它在\\u cart\\u totals之前连接到woocommerce\\u),但无论我做什么,通知仍然位于页面的顶部。

这个问题在stackexchange上有几个变体,没有一个答案是有效的。

我已经尝试了列出的所有选项here, 但运气不好。

我试过玩here, 也没有运气。

我已经试过了here, 和没有运气。

相同问题的其他变体:here, here, 仅适用于店面主题的可能解决方案here.

任何帮助都将不胜感激!

编辑:来自其他地方的两个线程有助于解决此问题:

https://wordpress.org/support/topic/relocate-coupon-notices-on-cart-page/

https://www.facebook.com/groups/advanced.woocommerce/permalink/2141163449231396/

2 个回复
最合适的回答,由SO网友:kierzniak 整理而成

优惠券通知通过使用JavaScript动态更新购物车来显示。移动wc\\u print\\u notices功能将不会生效,因为所有逻辑都放置在购物车中。js文件。您必须取消注册并退出WooCommerce购物车。js文件并添加您自己的修改版本。

/**
 * Deregister and dequeue WooCommerce cart.js file and add own modified version.
 */
function wpse_305939_replace_woocommerce_cart_script() {

    /**
     * Remove default woocommerce cart scripts.
     */
    wp_deregister_script( \'wc-cart\' );
    wp_dequeue_script( \'wc-cart\' );

    /**
     * Add own modify scripts.
     */
    wp_register_script( \'wc-cart\', plugin_dir_url( __FILE__ ) . \'js/cart.js\', array( \'jquery\', \'woocommerce\', \'wc-country-select\', \'wc-address-i18n\' ), WC_VERSION, true );

    if( is_cart() ) {
        wp_enqueue_script( \'wc-cart\' );
    }
}

add_action( \'wp_enqueue_scripts\', \'wpse_305939_replace_woocommerce_cart_script\', 20 );
复制原始购物车。js完全连接到您的自定义购物车。js和update两种方法。

apply_coupon

/**
 * Apply Coupon code
 *
 * @param {JQuery Object} $form The cart form.
 */
apply_coupon: function( $form ) {
    block( $form );

    var cart = this;
    var $text_field = $( \'#coupon_code\' );
    var coupon_code = $text_field.val();

    var data = {
        security: wc_cart_params.apply_coupon_nonce,
        coupon_code: coupon_code
    };

    $.ajax( {
        type:     \'POST\',
        url:      get_url( \'apply_coupon\' ),
        data:     data,
        dataType: \'html\',
        success: function( response ) {
            $( \'.woocommerce-error, .woocommerce-message, .woocommerce-info\' ).remove();
            show_notice( response, $(\'.cart-collaterals\') );
            $( document.body ).trigger( \'applied_coupon\', [ coupon_code ] );
        },
        complete: function() {
            unblock( $form );
            $text_field.val( \'\' );
            cart.update_cart( true, false);
        }
    } );
}
以及update_cart

/**
 * Update entire cart via ajax.
 */
update_cart: function( preserve_notices, scroll_to_notices ) {
    var $form = $( \'.woocommerce-cart-form\' );

    block( $form );
    block( $( \'div.cart_totals\' ) );

    // Make call to actual form post URL.
    $.ajax( {
        type:     $form.attr( \'method\' ),
        url:      $form.attr( \'action\' ),
        data:     $form.serialize(),
        dataType: \'html\',
        success:  function( response ) {
            update_wc_div( response, preserve_notices );
        },
        complete: function() {

            scroll_to_notices = typeof scroll_to_notices !== \'undefined\' ? scroll_to_notices : true;

            unblock( $form );
            unblock( $( \'div.cart_totals\' ) );

            if( scroll_to_notices ) {
                $.scroll_to_notices( $( \'[role="alert"]\' ) );
            }
        }
    } );
}
您可以通过将这两种方法与原始购物车进行比较来检查已更新的内容。js文件(WooCommerce 3.4.2)。

此解决方案仅适用于应用优惠券时的通知。

SO网友:Shawn W

基于@kierzniak的回答,我实现了一个解决方案,将优惠券通知添加到模式对话框中。原因是,就我的一生而言,当update\\u cart在购物车中运行时,我不知道如何在表单中保留通知。js。这将有效地清除并重新填充表单中的任何元素,包括建议的购物车优惠券通知div,以及OP建议的通知内容。我还只是在优惠券部分显示微调器,因为双微调器对任何人都不好。

apply_coupon

/**
         * Apply Coupon code
         *
         * @param {JQuery Object} $form The cart form.
         */
        apply_coupon: function( $form ) {
            // block( $form );
             block ( $( \'.cart-collaterals\' ) ) ;

            var cart = this;
            var $text_field = $( \'#coupon_code\' );
            var coupon_code = $text_field.val();

            var data = {
                security: wc_cart_params.apply_coupon_nonce,
                coupon_code: coupon_code
            };

            $.ajax( {
                type:     \'POST\',
                url:      get_url( \'apply_coupon\' ),
                data:     data,
                dataType: \'html\',
                success: function( response ) {
                    $( \'.woocommerce-error, .woocommerce-message, .woocommerce-info\' ).remove();
                    jQuery(".cart-promo-notices").dialog({
                        autoOpen: false,
                        dialogClass: "cart-promo-dialog",
                        modal: true,
                        open: function(event, ui) {
                            jQuery("body").bind("click", function(event, ui) {
                                jQuery(".cart-promo-notices").dialog("close");
                            });
                        },

                    });
                    show_notice( response, $(\'.cart-promo-notices\') );
                        $( document.body ).trigger( \'applied_coupon\', [ coupon_code ] );
                },
                complete: function(  ) {
                    // unblock( $form );
                    unblock ( $( \'.cart-collaterals\' ) ) ;
                    $(".cart-promo-notices").dialog("open");
                    $text_field.val( \'\' );
                    cart.update_cart( true, false);
                }
            } );
        }
我将div添加到cart.php 在我的WooCommerce中覆盖我主题中的文件

<div class="cart-promo-notices"></div>
在购物车窗体中隐藏微调器

.woocommerce-cart-form .blockUI.blockOverlay { 
    display: none !important;
   }

结束

相关推荐

重定向期间忽略自定义ADMIN_NOTICES消息

我在中设置了错误处理机制one of my plugins 向管理区域添加通知和错误,就像核心一样。它在大多数情况下都能正常工作,但在某些情况下(如保存自定义帖子类型)却不能正常工作。我猜重定向是在幕后发生的,消息是在重定向发生之前打印的,因此它们似乎永远不会出现。所以,我猜这就是发生的事情用户编辑自定义帖子类型并点击Publish(发布)调用My post\\u updated(我的帖子更新)回调,该回调验证并保存自定义字段。回调添加错误消息。Wordpress重定向到某个页面以进行某些处理。调用My