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 中创建默认产品属性。