在 WooCommerce 结账中自定义 AJAX 更新外部订单审核 table

Question

在我的 WooCommerce 结帐页面上，我在基于购物车总数的订单审查部分之前显示了一条通知。我在我的子主题的 functions.php 文件中包含了以下代码：

function action_woocommerce_checkout_before_order_review () {
    // Get cart total
    $cart_total = WC()->cart->get_cart_contents_total();
    
    // Compare
    if ( $cart_total == 0.01 ) {
        echo '<p>' . __( 'My message', 'woocommerce' ) . '</p>';
    }
}
add_action( 'woocommerce_checkout_before_order_review', 'action_woocommerce_checkout_before_order_review', 10, 0 );

此代码的问题在于，如果对订单应用了优惠券（购物车总金额等于 0.01 欧元），则通知不会出现，而是仅在刷新页面后出现。

如何更改此代码，使通知从 added/removed 到 AJAX？

Answer 1

如果您需要根据购物车总数添加自定义消息，您只需使用 Javascript（或 JQuery ).

使用挂钩 woocommerce_checkout_before_order_review 只有当页面加载时购物车的总数等于 0.01。

时才会显示消息

在这里您可以找到 WooCommerce Javascript 事件的列表：

Woocommerce documentation | list of JS events

然后您可以将类似的内容添加到活动主题的 functions.php 文件中 （这只是一个想法）:

// show or hide a custom message in checkout based on cart total
add_action( 'wp_footer', 'show_hide_message_based_on_cart_total' );
function show_hide_message_based_on_cart_total() {
    ?>
    <script type="text/javascript">
        // the script is triggered every time the checkout updates
        jQuery(document.body).on('updated_checkout', function(){
            // gets the values of the cart total and the discount total by removing the currency symbol and converting the string to a number
            var cartTotal = jQuery('table.shop_table tr.cart-subtotal bdi').text().replace("€","").replace(",",".").trim();
            var coupon = jQuery('table.shop_table tr.cart-discount span.amount').text().replace("€","").replace(",",".").trim();
            if ( cartTotal - coupon == 0.01 ) {
                // show the message
                jQuery('<span id="custom_message">Custom Message</span>').insertBefore('#order_review');
            } else {
                // removes the message
                jQuery('#custom_message').remove();
            } 
        });
    </script>
    <?php
}

Answer 2

以下内容将根据 Ajax 的结账优惠券事件和购物车内容总金额显示或隐藏您的自定义消息：

add_action( 'woocommerce_checkout_before_order_review', 'action_woocommerce_checkout_before_order_review', 10, 0 );
function action_woocommerce_checkout_before_order_review () {
    // Here below set your message
    $message    = __( 'My message', 'woocommerce' );
    $threshold  = 0.01; // Here your targeted subtotal amount

    $cart_total = WC()->cart->get_cart_contents_total();

    echo '<p class="custom-message" style="'. ( $cart_total > $threshold ? '' : 'display:none;' ) .'">' . $message . '</p>';

    // jQuery Ajax
    wc_enqueue_js( "jQuery( function($){
        if (typeof wc_checkout_params === 'undefined') return false;

        function checkoutCouponEvent() {
            $.ajax({
                type: 'POST',
                url: wc_checkout_params.ajax_url,
                data: {
                    'action': 'checkout_coupon',
                    'ccevent': 'Yes'
                },
                success: function (response) {
                    if ( parseFloat(response) == " . $threshold . " ) {
                        $('.custom-message').show();
                    } else {
                        $('.custom-message').hide();
                    }
                }
            });
        }

        $(document.body).on('applied_coupon_in_checkout removed_coupon_in_checkout', function( event ){
            setTimeout(function(){
                checkoutCouponEvent();
            }, event.type === 'removed_coupon_in_checkout' ? 350 : 0 );
        });
    });" );
}

// Ajax receiver function
add_action( 'wp_ajax_checkout_coupon', 'checkout_coupon_ajax_receiver' );
add_action( 'wp_ajax_nopriv_checkout_coupon', 'checkout_coupon_ajax_receiver' );
function checkout_coupon_ajax_receiver() {
    if ( isset($_POST['ccevent']) && $_POST['ccevent'] ) {
        echo WC()->cart->get_cart_contents_total();
    }
    wp_die();
}

代码进入活动子主题（或活动主题）的 functions.php 文件。已测试并有效。

Answer 3

以下代码解决了我的问题

function action_woocommerce_checkout_before_order_review () {
  $cart_total = WC()->cart->get_cart_contents_total();
  if ( $cart_total == 0.01 ) {
    echo '<p class="notice">' . __( 'My message', 'woocommerce' ) . '</p>';
  }
  ?>
  
  <script type="text/javascript">
  jQuery('.woocommerce-remove-coupon').click(function(){
    jQuery('.notice').hide();
  });
  </script>
  
  <?php
}
add_action( 'woocommerce_review_order_before_cart_contents', 'action_woocommerce_checkout_before_order_review', 10, 0 );

在 WooCommerce 结账中自定义 AJAX 更新外部订单审核 table

Custom AJAX update outside order review table in WooCommerce checkout

php

jquery

ajax

woocommerce

checkout