當(dāng)您使用 woocommerce 運(yùn)營在線商店時(shí)，使購買流程盡可能無縫至關(guān)重要。一種有效的方法是添加“立即購買”按鈕，使客戶無需瀏覽多個(gè)頁面即可直接購買產(chǎn)品。本博客將引導(dǎo)您使用提供的代碼片段創(chuàng)建 woocommerce ajax“立即購買”按鈕。
第 1 步：添加“立即購買”按鈕
首先，您需要在 woocommerce 產(chǎn)品頁面上添加自定義“立即購買”按鈕。我們將通過掛鉤 woocommerce_after_add_to_cart_button 操作來完成此操作，該操作將我們的按鈕放在標(biāo)準(zhǔn)“添加到購物車”按鈕之后。
這是 php 代碼片段：
add_action( 'woocommerce_after_add_to_cart_button', 'add_content_after_addtocart' );
function add_content_after_addtocart() {
$current_product_id = get_the_id();
$product = wc_get_product( $current_product_id );
if( $product->is_type( 'simple' ) ){
echo '<button data-id="'.$current_product_id.'" class="buy-now button"><i class="matico-icon-toys"></i>'.__('buy now', 'woocommerce').'</button>';
}
}
關(guān)注：愛掏網(wǎng)
說明：
- 我們使用 woocommerce_after_add_to_cart_button 掛鉤在“添加到購物車”按鈕后面插入“立即購買”按鈕。
- get_the_id() 函數(shù)檢索當(dāng)前產(chǎn)品 id，wc_get_product() 函數(shù)獲取產(chǎn)品詳細(xì)信息。
- 我們檢查產(chǎn)品是否為簡單類型，然后使用適當(dāng)?shù)?data-id 屬性和自定義圖標(biāo)渲染按鈕。
第 3 步：將腳本排入隊(duì)列
接下來，您需要將腳本排入主題中，以確保其正確加載到您的 woocommerce 頁面上。操作方法如下：
wp_enqueue_script('matico-child-script', get_stylesheet_directory_uri() . '/assets/js/script.js', array( 'jquery', 'scrollfix-script' ), $matico_version, true);
wp_localize_script( 'matico-child-script', 'matico_child_script_obj',
array(
'checkout_page_url' => wc_get_checkout_url(),
)
);
關(guān)注：愛掏網(wǎng)
說明：
- wp_enqueue_script() 用于加載我們的自定義腳本文件（script.js），其中包含 jquery 代碼。
- wp_localize_script() 將 php 數(shù)據(jù)傳遞給腳本，例如結(jié)帳頁面 url，允許我們在腳本中使用它。
第 2 步：處理 ajax 請求
最后，我們將使用 jquery 處理按鈕單擊事件。 jquery 腳本向 woocommerce 發(fā)送 ajax 請求，后者將產(chǎn)品添加到購物車，然后將用戶直接重定向到結(jié)帳頁面。
這是 jquery 代碼片段：
(function ($) {
var MaticoChildThemeConfig = {
init: function () {
this.bindEvents();
},
bindEvents: function () {
$(document).on('click', '.buy-now', this.handleBuyNowClick);
},
handleBuyNowClick: function (event) {
event.preventDefault();
var $button = $(this),
quantity = parseFloat($button.closest('.quantity').find('.qty').val()) || 1,
productID = $button.data('id');
var data = {
product_id: productID,
quantity: quantity,
};
$.ajax({
type: 'POST',
url: wc_add_to_cart_params.wc_ajax_url.toString().replace('%%endpoint%%', 'add_to_cart'),
data: data,
dataType: 'json',
beforeSend: function () {
$button.addClass('loading');
},
success: function (res) {
if (res.error && res.product_url) {
window.location.href = res.product_url;
} else {
window.location.href = matico_child_script_obj.checkout_page_url;
}
}
});
}
};
MaticoChildThemeConfig.init();
})(jQuery);
關(guān)注：愛掏網(wǎng)
說明：
- 單擊“立即購買”按鈕時(shí)，我們會阻止默認(rèn)操作以避免頁面重新加載。
- 我們從當(dāng)前產(chǎn)品頁面收集產(chǎn)品 id 和數(shù)量。
- ajax 請求發(fā)送到 woocommerce 的 add_to_cart 端點(diǎn)，該端點(diǎn)將產(chǎn)品添加到購物車。
- 如果產(chǎn)品添加成功，我們會將用戶重定向到結(jié)帳頁面。如果出現(xiàn)錯誤（例如，產(chǎn)品不再可用），用戶將被重定向到產(chǎn)品頁面。
結(jié)論
通過實(shí)施上述步驟，您可以創(chuàng)建一個(gè)“立即購買”按鈕，以簡化客戶的購買流程。此功能在通過減少客戶在完成購買之前需要導(dǎo)航的點(diǎn)擊次數(shù)和頁面數(shù)量來提高轉(zhuǎn)化率方面特別有用。
以上就是如何實(shí)現(xiàn) WooCommerce AJAX 直接“立即購買”按鈕的詳細(xì)內(nèi)容，更多請關(guān)注愛掏網(wǎng) - it200.com其它相關(guān)文章！
聲明：所有內(nèi)容來自互聯(lián)網(wǎng)搜索結(jié)果,不保證100%準(zhǔn)確性,僅供參考。如若本站內(nèi)容侵犯了原著者的合法權(quán)益，可聯(lián)系我們進(jìn)行處理。