显示 AJAX 添加到购物车功能的 WooCommerce 通知

Question

我想将我的 WooCommerce 商店的添加到购物车行为更改为 AJAX 功能，以节省时间并提高用户体验。我发现这个非常有用的教程它就像一个魅力。

但是，此解决方案并未显示 WooCommerce 通知。我想看到成功消息“产品已添加到购物车 - 显示购物车”以及有关库存水平低等的通知。需要如何更改代码才能显示通知添加通常出现的位置还有吗？

谢谢

jQuery(document).ready(function($) {
    $('.single_add_to_cart_button').on('click', function(e){ 
    e.preventDefault();
    $thisbutton = $(this),
                $form = $thisbutton.closest('form.cart'),
                id = $thisbutton.val(),
                product_qty = $form.find('input[name=quantity]').val() || 1,
                product_id = $form.find('input[name=product_id]').val() || id,
                variation_id = $form.find('input[name=variation_id]').val() || 0;
    var data = {
            action: 'ql_woocommerce_ajax_add_to_cart',
            product_id: product_id,
            product_sku: '',
            quantity: product_qty,
            variation_id: variation_id,
        };
    $.ajax({
            type: 'post',
            url: wc_add_to_cart_params.ajax_url,
            data: data,
            beforeSend: function (response) {
                $thisbutton.removeClass('added').addClass('loading');
            },
            complete: function (response) {
                $thisbutton.addClass('added').removeClass('loading');
            }, 
            success: function (response) { 
                if (response.error & response.product_url) {
                    window.location = response.product_url;
                    return;
                } else { 
                    $(document.body).trigger('added_to_cart', [response.fragments, response.cart_hash, $thisbutton]);
                } 
            }, 
        }); 
     }); 
});

add_action('wp_ajax_ql_woocommerce_ajax_add_to_cart', 'ql_woocommerce_ajax_add_to_cart'); 

add_action('wp_ajax_nopriv_ql_woocommerce_ajax_add_to_cart', 'ql_woocommerce_ajax_add_to_cart');          

function ql_woocommerce_ajax_add_to_cart() {  
    
    $product_id = apply_filters('ql_woocommerce_add_to_cart_product_id', absint($_POST['product_id']));
    $quantity = empty($_POST['quantity']) ? 1 : wc_stock_amount($_POST['quantity']);
    $variation_id = absint($_POST['variation_id']);
    $passed_validation = apply_filters('ql_woocommerce_add_to_cart_validation', true, $product_id, $quantity);
    $product_status = get_post_status($product_id); 
    
    if ($passed_validation && WC()->cart->add_to_cart($product_id, $quantity, $variation_id) && 'publish' === $product_status) { 
        
        do_action('ql_woocommerce_ajax_added_to_cart', $product_id);
        
        if ('yes' === get_option('ql_woocommerce_cart_redirect_after_add')) { 
            wc_add_to_cart_message(array($product_id => $quantity), true); 
        } 
           
        WC_AJAX :: get_refreshed_fragments(); 
    } else { 
        $data = array( 
            'error' => true,
            'product_url' => apply_filters('ql_woocommerce_cart_redirect_after_error', get_permalink($product_id), $product_id));
                
        echo wp_send_json($data);
    }
    wp_die();
}

Answer 1

为了向用户表明存在错误，我对代码进行了一些修改。如果出现错误，用户现在将被重定向到详细信息页面。

对于成功的案例，我没有找到解决方案。但无论如何我希望它能有所帮助。

我修改了JS：beforeSend、complete、success函数 和 PHP：passed_validation 变量

jQuery(document).ready(function($) {
$('.single_add_to_cart_button').on('click', function(e){
    e.preventDefault();
    $thisbutton = $(this),
        $form = $thisbutton.closest('form.cart'),
        id = $thisbutton.val(),
        product_qty = $form.find('input[name=quantity]').val() || 1,
        product_id = $form.find('input[name=product_id]').val() || id,
        variation_id = $form.find('input[name=variation_id]').val() || 0;
    var data = {
        action: 'ql_woocommerce_ajax_add_to_cart',
        product_id: product_id,
        product_sku: '',
        quantity: product_qty,
        variation_id: variation_id,
    };
    $.ajax({
        type: 'post',
        url: wc_add_to_cart_params.ajax_url,
        data: data,
        beforeSend: function (response) {
            $thisbutton.removeClass('added').addClass('loading');
        },
        complete: function (response) {
        },
        success: function (response) {
            if (response.error && response.product_url) {
                window.location = response.product_url;
                return;
            } else {
                $(document.body).trigger('added_to_cart', [response.fragments, response.cart_hash, $thisbutton]);
                $thisbutton.addClass('added').removeClass('loading');
            }
        },
    });
});});

PHP 代码：

add_action('wp_ajax_ql_woocommerce_ajax_add_to_cart', 'ql_woocommerce_ajax_add_to_cart');

add_action('wp_ajax_nopriv_ql_woocommerce_ajax_add_to_cart', 'ql_woocommerce_ajax_add_to_cart');

function ql_woocommerce_ajax_add_to_cart() {

    $product_id = apply_filters('ql_woocommerce_add_to_cart_product_id', absint($_POST['product_id']));
    $quantity = empty($_POST['quantity']) ? 1 : wc_stock_amount($_POST['quantity']);
    $variation_id = absint($_POST['variation_id']);
    $passed_validation = apply_filters('woocommerce_add_to_cart_validation', true, $product_id, $quantity, $variation_id);
    $product_status = get_post_status($product_id);

    if ($passed_validation && WC()->cart->add_to_cart($product_id, $quantity, $variation_id) && 'publish' === $product_status) {

        do_action('ql_woocommerce_ajax_added_to_cart', $product_id);

        if ('yes' === get_option('ql_woocommerce_cart_redirect_after_add')) {
            wc_add_to_cart_message(array($product_id => $quantity), true);
        }

        WC_AJAX :: get_refreshed_fragments();
    } else {
        $data = array(
            'error' => true,
            'product_url' => apply_filters('ql_woocommerce_cart_redirect_after_error', get_permalink($product_id), $product_id));

        echo wp_send_json($data);
    }
    wp_die();
}

Answer 2

我正在使用与你们相同的功能，我想我让它按预期工作。显然我不能保证这种方法是最好的方法。在主函数内部，我根据我的功能添加了两件事（添加了产品变量，也称为 wc_notices() 函数）：

$product_id = apply_filters('woocommerce_add_to_cart_product_id', absint($_POST['product_id']));
$quantity = empty($_POST['quantity']) ? 1 : wc_stock_amount($_POST['quantity']);
$variation_id = absint($_POST['variation_id']);
$passed_validation = apply_filters('woocommerce_add_to_cart_validation', true, $product_id, $quantity);
$product_status = get_post_status($product_id);

// ASSIGNED PRODUCT VARIABLE
$product = wc_get_product( $product_id );

if ($passed_validation && WC()->cart->add_to_cart($product_id, $quantity, $variation_id) && 'publish' === $product_status) {
    
    do_action('woocommerce_ajax_added_to_cart', $product_id);

    if ('yes' === get_option('woocommerce_cart_redirect_after_add')) {
        wc_add_to_cart_message(array($product_id => $quantity), true);
    }
    
    // CALLED NOTICE FUNCTION + PRODUCT TITLE
    $message = $product->get_title() . ' - successfully added to the cart!';
    wc_add_notice( $message, 'success' ); 
    WC_AJAX :: get_refreshed_fragments();
    
} else {

    $data = array(
        'error' => true,
        'product_url' => apply_filters('woocommerce_cart_redirect_after_error', get_permalink($product_id), $product_id));

    echo wp_send_json($data);
}

wp_die();

后来我为 $fragments 添加了额外的过滤器。

function update_notices_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', 'update_notices_ajax_add_to_cart_add_fragments' );

因此，当您将新产品添加到购物车时，我们使用的ajax函数会返回带有最新woo片段信息的响应。在成功的 ajax 调用中，我将其传递给 woocommerce-notices-wrapper，如下所示

$('.woocommerce-notices-wrapper').append(response.fragments.notices_html);

希望有帮助。