WooCommerce AJAX 添加到購物車 - 分步教程

已發表: 2019-11-20

幾週前，我們討論瞭如何以編程方式添加購物車功能以提高銷售額。今天，我們將看看如何在 WooCommerce 產品的添加到購物車按鈕中實現 AJAX 。這將改善用戶體驗和整體銷售流程，這也將幫助您優化商店並增加收入。

如今，如果您想經營一家成功的商店，您的網站動態更新購物車是關鍵。否則，每次用戶將產品添加到購物車時，頁面都會重新加載，從而導致購買過程非常緩慢並增加客戶退出的機會。這就是為什麼使用 WooCommerce AJAX添加到購物車功能改造您的商店是減少購物車放棄和增加銷售額的必要條件。

在本指南中，我們將逐步向您展示如何操作。

WooCommerce 中 AJAX 的好處

綜上所述，在您的商店中使用 AJAX 的好處是：

減少服務器負載和帶寬
加快購買過程
改善客戶體驗
減少購物車放棄
提高轉化率

教程：WooCommerce AJAX 添加到購物車

要在WooCommerce中應用AJAX添加到購物車功能，有兩個選項：

帶插件
自己編碼

讓我們來看看每種方法。

1) AJAX 使用插件添加到購物車

如果您沒有編碼經驗或者您更喜歡簡單的解決方案，那麼使用插件是一個很好的選擇。只需下載我們的 AJAX添加到購物車WooCommerce 插件，安裝它，軟件將完成剩下的工作。

Ajax 添加到 WooCommerce 的購物車

WooCommerce 的AJAX 添加到購物車是將 AJAX 添加到 WooCommerce添加到購物車按鈕的最佳插件之一。該工具允許購物者在他們的購物車中包含單個或可變產品，而無需每次都重新加載網站。更好的是，它在 99% 的 WordPress 主題中都能流暢運行，並且不需要任何初始設置。一旦你安裝它，它就準備好了。

2）自己編碼

您是否有一些編碼技能並且更喜歡自定義您的 WooCommerce AJAX添加到購物車按鈕？在本指南中，我們將逐步向您展示如何操作。

A) 安裝子主題

您需要做的第一件事是創建一個子主題。如果沒有，可以使用插件。其中有幾個，所以只需選擇您最喜歡的一個並將其安裝在您的商店中。為什麼要安裝子主題？因為如果您直接自定義主題的文件，下次更新主題時，新文件將替換您的更改，您的所有自定義將丟失。但是，如果您自定義子主題，修改將不會被覆蓋。

B) 包含 JavaScript (JS) 文件

在子主題的functions.php文件中，使用wp_enqueue_script掛鉤包含一個JavaScript 文件。這是 WordPress 提供的用於自定義網站的最受歡迎的鉤子之一。讓我們看看下麵包含ajax_add_to_cart.js文件的腳本：

 功能 ql_woocommerce_ajax_add_to_cart_js() {
    if (function_exists('is_product') && is_product()) {  
       wp_enqueue_script('custom_script', get_bloginfo('stylesheet_directory') . '/js/ajax_add_to_cart.js', array('jquery'),'1.0' );
    }
}
add_action('wp_enqueue_scripts', 'ql_woocommerce_ajax_add_to_cart_js');

使用第 2 行中的條件if (function_exists('is_product') && is_product()) ，您可以確保 JQuery 僅應用於產品頁面。

C) 創建一個 JS 文件

完成後，創建上一步中包含的文件。只需轉到您的cPanel ，然後轉到子主題文件夾。之後，按照路線wp_content /themes/ folder 。在那裡，在名為js的子主題中創建一個新文件夾，然後在其中創建一個與您在鉤子ajax-add-to-cart.js中使用的名稱相同的文件。請記住，即使您使用 FTP 客戶端，此步驟也有效。如果您的子主題已經有一個 JS 文件夾，您可以使用它而無需創建新的。

D) JQuery/JS 文件

下一步是處理您在子主題中上傳的 JQuery 文件。該文件為空，因此您需要添加腳本。首先，使用以下腳本防止添加到購物車按鈕重新加載頁面：

 $('.single_add_to_cart_button').on('點擊', function(e) { 
    e.preventDefault();
});

請注意，我們使用$('.single_add_to_cart_button')選擇器在單擊按鈕時觸發 AJAX 調用。您必須了解這一點，因為以下所有腳本都將進入此函數。

E) JQuery WooCommerce AJAX 添加到單個產品的購物車

因此，在單個產品上添加到購物車的 AJAX 的完整 JQuery 腳本是：

 jQuery(文檔).ready(函數($) {
    $('.single_add_to_cart_button').on('點擊', 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，
                變體id = $form.find('input[name=variation_id]').val() || 0;
    變量數據 = {
            行動：'ql_woocommerce_ajax_add_to_cart'，
            產品ID：產品ID，
            product_sku: '',
            數量：product_qty，
            變體ID：變體ID，
        };
    $.ajax({
            類型：'發布'，
            網址：wc_add_to_cart_params.ajax_url，
            數據：數據，
            beforeSend：函數（響應）{
                $thisbutton.removeClass('add').addClass('loading');
            },
            完成：功能（響應）{
                $thisbutton.addClass('add').removeClass('loading');
            }, 
            成功：功能（響應）{ 
                if (response.error & response.product_url) {
                    window.location = response.product_url;
                    返回;
                } 別的 { 
                    $(document.body).trigger(' added_to_cart', [response.fragments, response.cart_hash, $thisbutton]);
                } 
            }, 
        }); 
     }); 
});

F) PHP 腳本

之後，您需要 PHP 處理程序。最好的方法是使用一些 WooCommerce 過濾器掛鉤來構建您的添加到購物車功能。這次您將使用 AJAX 來完成。只需將以下腳本複制並粘貼到我們用於包含 JS 文件的上一個腳本下方的子主題的functions.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');          
功能 ql_woocommerce_ajax_add_to_cart() {  
    $product_id = apply_filters('ql_woocommerce_add_to_cart_product_id', absint($_POST['product_id']));
    $數量 = 空（$_POST['數量']）？ 1 : wc_stock_amount($_POST['數量']);
    $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(); 
            } 別的 { 
                $數據 = 數組（ 
                    '錯誤' => 真，
                    'product_url' => apply_filters('ql_woocommerce_cart_redirect_after_error', get_permalink($product_id), $product_id));
                迴聲 wp_send_json($data);
            }
            wp_die();
        }

而已！您剛剛創建了WooCommerce AJAX 添加到購物車按鈕！ 但是你怎麼知道你做的一切都是正確的呢？你可以很容易地檢查它。當您單擊添加到購物車按鈕時，該產品應添加到購物車而不重新加載頁面。

結論

總而言之，如果您想優化您的商店，WooCommerce AJAX添加到購物車功能是必須的。應用它的簡單方法是使用 AJAX添加到購物車WooCommerce 插件。但是，如果您有編碼技能，您可以使用子主題和一點 PHP 自己編寫 AJAX添加到購物車，如上所述。

這兩種選擇都非常出色，因此請選擇更適合您的需求和技能的一種。這將幫助您改善用戶體驗並提高轉化率。請在下面的評論部分告訴我們您的想法。

最後，有關 WooCommerce 的更多指南，我們建議您查看我們的指南，了解如何添加 WooCommerce 產品以及如何在 WooCommerce 中創建默認產品屬性。