如何实现 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 直接“立即购买”按钮的详细内容，更多请关注至强加速其它相关文章！