大部分高級(jí) WooCommerce 主題的產(chǎn)品列表都有 Ajax 方式添加產(chǎn)品到購物車的功能,這確實(shí)是一個(gè)提升用戶體驗(yàn)比較常見的做法,本文中,我將為大家介紹怎么通過代碼在自己的主題或插件中實(shí)現(xiàn)這一功能。
下面的 Gif 動(dòng)畫就是本文所實(shí)現(xiàn)效果的預(yù)覽。

無需 JavaScript 即可創(chuàng)建 AJAX 添加到購物車按鈕
該功能在add-to-cart.js文件的幫助下實(shí)現(xiàn),我們不需要編寫額外的 JavaScript 代碼,就可以實(shí)現(xiàn)Ajax 添加到購物車功能。

代碼如下:
add_action( 'woocommerce_after_shop_loop_item', function() {
$product_id = get_the_ID();
echo '<a href="?add-to-cart=' . $product_id . '&quantity=10" data-quantity="10" data-product_id="' . $product_id . '" class="button add_to_cart_button ajax_add_to_cart">Add 10 to cart</a>';
}, 99 );
為了使該按鈕正常工作,您需要確保以下幾點(diǎn):
- 在
data-product_id屬性中提供產(chǎn)品 ID。 - 按鈕必須包含以下類
add_to_cart_button ajax_add_to_cart。
除此之外
- 您可以在
data-quantity屬性中提供產(chǎn)品數(shù)量(就像我們所做的)。 href屬性只有在瀏覽器關(guān)閉 JavaScript 時(shí)才需要。
在將產(chǎn)品添加到購物車之前選擇數(shù)量
實(shí)際上,我們需要做的就是使用 WooCommerce 的默認(rèn)函數(shù) woocommerce_quantity_input(),并使用 JavaScript 修改「添加到購物車」按鈕的data-quantity屬性,下圖就是實(shí)現(xiàn)的效果。

讓我們用這個(gè)非常簡單的代碼片段來顯示數(shù)量輸入:
add_action( 'woocommerce_after_shop_loop_item', function() {
global $product;
// 如果不是簡單商品,直接返回
if( ! $product->is_type( 'simple' ) ) {
return;
}
woocommerce_quantity_input();
} );
然后,我們用一段非常簡單的 JavaScript 代碼片段來更改「添加到購物車」按鈕的data-quantity屬性的值。
$( 'li.product .qty' ).change( function() {
const qty = $(this).val();
$(this).parent().next().attr( 'data-quantity', qty );
} );
在商店頁面上選擇產(chǎn)品變體
產(chǎn)品變體的情況要復(fù)雜得多。下面是一個(gè)簡單的靜態(tài)示例,如果要?jiǎng)討B(tài)顯示產(chǎn)品變體列表,也是有辦法的,我將在另外一個(gè)教程中為大家展示。
add_action( 'woocommerce_after_shop_loop_item', function() {
$variation_id = 25;
echo ' <a href="?add-to-cart=' . $variation_id . '" data-product_id="' . $variation_id . '" class="button add_to_cart_button ajax_add_to_cart">Add a blue hoodie to cart</a>';
}, 30 );
正如你所看到的,我們?nèi)栽谑褂孟嗤?code>data-product_id屬性,唯一不同的是我們?cè)谄渲刑峁┝艘粋€(gè)變體 ID。

因此,像這樣在商店頁面上顯示產(chǎn)品變體是可能的,請(qǐng)注意,我們?cè)谶@里甚至沒有使用大量的 JavaScript。
自定義 AJAX 添加到購物車的 JavaScript 功能
有時(shí)僅僅使用默認(rèn)按鈕、data-product_id 和 data-quantity屬性是不夠的。
jQuery( function( $ ) {
$( '#custom-add-to-cart' ).click( function( event ) {
event.preventDefault();
const data = {
product_id: 54,
quantity: 2,
}
$.ajax( {
type: 'POST',
url: wc_add_to_cart_params.wc_ajax_url.toString().replace( '%%endpoint%%', 'add_to_cart' ),
data: data,
dataType: 'json',
beforeSend: function( xhr ) {
// 我們可以在這里設(shè)置加載狀態(tài)
},
complete: function( res ) {
// 在這里移除按鈕加載狀態(tài)
},
success: function( res ) {
$( document.body ).trigger( 'added_to_cart', [ res.fragments, res.cart_hash ] );
},
});
} );
} );

