Ajax 加入購物車 WooCommerce 產品頁面

Question

我正在嘗試讓 AJAX 為我網站的 WooCommerce 產品頁面上的“添加到購物車”按鈕工作。 我正在使用下面的代碼片段來獲取 AJAX 功能，除了代碼的最后一部分之外，它都可以正常工作。 單擊“添加到購物車”按鈕時，我看不到任何成功/通知/錯誤消息。 商品被添加到購物車，但沒有視覺通知（除了按鈕上的加載 animation 外）讓用戶知道商品已成功添加。

如果我刪除代碼的最后一部分，下面的“添加通知片段” ，我會在添加項目時看到通知，但僅在我重新加載頁面之后。

我正在嘗試這樣做，以便在點擊“添加到購物車”按鈕時，將項目添加到購物車並顯示成功消息或相應的錯誤消息。 我究竟做錯了什么？

/**
 * JS for AJAX Add to Cart handling
 */

function product_page_ajax_add_to_cart_js() {
    ?><script type="text/javascript" charset="UTF-8">
        jQuery(function($) {

            $('form.cart').on('submit', function(e) {
                e.preventDefault();

                var form = $(this);
                form.block({ message: null, overlayCSS: { background: '#fff', opacity: 0.6 } });

                var formData = new FormData(form.context);
                formData.append('add-to-cart', form.find('[name=add-to-cart]').val() );

                // Ajax action.
                $.ajax({
                    url: wc_add_to_cart_params.wc_ajax_url.toString().replace( '%%endpoint%%', 'add_to_cart' ),
                    data: formData,
                    type: 'POST',
                    processData: false,
                    contentType: false,
                    complete: function( response ) {
                        response = response.responseJSON;

                        if ( ! response ) {
                            return;
                        }

                        if ( response.error && response.product_url ) {
                            window.location = response.product_url;
                            return;
                        }

                        // Redirect to cart option
                        if ( wc_add_to_cart_params.cart_redirect_after_add === 'yes' ) {
                            window.location = wc_add_to_cart_params.cart_url;
                            return;
                        }

                        var $thisbutton = form.find('.single_add_to_cart_button'); //
//                      var $thisbutton = null; // uncomment this if you don't want the 'View cart' button

                        // Trigger event so themes can refresh other areas.
                        $( document.body ).trigger( 'added_to_cart', [ response.fragments, response.cart_hash, $thisbutton ] );

                        // Remove existing notices
                        $( '.woocommerce-error, .woocommerce-message, .woocommerce-info' ).remove();

                        // Add new notices
                        form.closest('.product').before(response.fragments.notices_html)

                        form.unblock();
                    }
                });
            });
        });
    </script><?php
}
add_action( 'wp_footer', 'product_page_ajax_add_to_cart_js' );


/**
 * Add to cart handler.
 */

function ajax_add_to_cart_handler() {
    WC_Form_Handler::add_to_cart_action();
    WC_AJAX::get_refreshed_fragments();
}
add_action( 'wc_ajax_add_to_cart', 'ajax_add_to_cart_handler' );
add_action( 'wc_ajax_nopriv_add_to_cart', 'ajax_add_to_cart_handler' );

// Remove WC Core add to cart handler to prevent double-add
remove_action( 'wp_loaded', array( 'WC_Form_Handler', 'add_to_cart_action' ), 20 );

/**
 * Add fragments for notices.
 */

function ajax_add_to_cart_add_fragments( $fragments ) {
    $all_notices  = WC()->session->get( 'wc_notices', array() );
    $notice_types = apply_filters( 'woocommerce_notice_types', array( 'error', 'success', 'notice' ) );

    ob_start();
    foreach ( $notice_types as $notice_type ) {
        if ( wc_notice_count( $notice_type ) > 0 ) {
            wc_get_template( "notices/{$notice_type}.php", array(
                'messages' => array_filter( $all_notices[ $notice_type ] ),
            ) );
        }
    }
    $fragments['notices_html'] = ob_get_clean();

    wc_clear_notices();

    return $fragments;
}
add_filter( 'woocommerce_add_to_cart_fragments', 'ajax_add_to_cart_add_fragments' );

Answer 1

替換下面的代碼。

 /**
 * Add fragments for notices.
 */

function ajax_add_to_cart_add_fragments( $fragments ) {
    $all_notices  = WC()->session->get( 'wc_notices', array() );
    $notice_types = apply_filters( 'woocommerce_notice_types', array( 'error', 'success', 'notice' ) );

    ob_start();
    foreach ( $notice_types as $notice_type ) {
        if ( wc_notice_count( $notice_type ) > 0 ) {
            wc_get_template( "notices/{$notice_type}.php", array(
                'notices' => array_filter( $all_notices[ $notice_type ] ),
            ) );
        }
    }
    $fragments['notices_html'] = ob_get_clean();

    // wc_clear_notices();

    return $fragments;
}
add_filter( 'woocommerce_add_to_cart_fragments', 'ajax_add_to_cart_add_fragments' );