如何实现 WooCommerce AJAX 直接“立即购买”按钮

admin数码14/08/2024 13:08:1500

如何实现 WooCommerce AJAX 直接“立即购买”按钮-第1张图片-海印网

当您使用 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-&gt;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' =&gt; 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 &amp;&amp; res.product_url) {
                        window.location.href = res.product_url;
                    } else {
                        window.location.href = matico_child_script_obj.checkout_page_url;
                    }
                }
            });
        }
    };

    MaticoChildThemeConfig.init();
})(jQuery);

登录后复制

说明：