大部分高級(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 ] );

			},
		});

	} );
	
} );