如何實現 WooCommerce AJAX 直接「立即購買」按鈕

當您使用 WooCommerce 經營線上商店時，讓購買流程盡可能無縫至關重要。一種有效的方法是添加「立即購買」按鈕，使客戶無需瀏覽多個頁面即可直接購買產品。本部落格將引導您使用提供的程式碼片段建立 WooCommerce AJAX「立即購買」按鈕。

第 1 步：新增「立即購買」按鈕

首先，您需要在 WooCommerce 產品頁面上新增自訂「立即購買」按鈕。我們將透過掛鉤 woocommerce_after_add_to_cart_button 操作來完成此操作，該操作將我們的按鈕放在標準「新增至購物車」按鈕之後。

這是 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>';
    }
}

說明：

• 我們使用 woocommerce_after_add_to_cart_button 掛鉤在「加入購物車」按鈕後面插入「立即購買」按鈕。
• get_the_ID() 函數檢索目前產品 ID，wc_get_product() 取得產品詳細資料。
• 我們檢查產品是否為簡單類型，然後使用適當的 data-id 屬性和自訂圖示呈現按鈕。

步驟 3：將腳本排入隊列

接下來，您需要將腳本排入主題中，以確保其正確載入到您的 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(),
    )
);

說明：

• wp_enqueue_script() 用於載入我們的自訂腳本檔案 (script.js)，其中包含 jQuery 程式碼。
• wp_localize_script() 將 PHP 資料傳遞給腳本，例如結帳頁面 URL，允許我們在腳本中使用它。

第 2 步：處理 AJAX 請求

最後，我們將使用 jQuery 處理按鈕來點擊事件。 jQuery 腳本向 WooCommerce 發送 AJAX 請求，後者將產品新增至購物車，然後將使用者直接重新導向至結帳頁面。

這是 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);

說明：

• 點擊「立即購買」按鈕時，我們會阻止預設操作以避免頁面重新載入。
• 我們從目前產品頁面收集產品 ID 和數量。
• AJAX 請求發送到 WooCommerce 的 add_to_cart 端點，該端點將產品新增至購物車。
• 如果產品新增成功，我們會將使用者重新導向到結帳頁面。如果發生錯誤（例如，產品不再可用），使用者將被重新導向到產品頁面。

結論

透過實施上述步驟，您可以建立一個「立即購買」按鈕，以簡化客戶的購買流程。此功能在透過減少客戶在完成購買之前需要導航的點擊次數和頁面數量來提高轉換率方面特別有用。

以上是如何實現 WooCommerce AJAX 直接「立即購買」按鈕的詳細內容。更多資訊請關注PHP中文網其他相關文章！