如何实现 WooCommerce AJAX 直接'立即购买”按钮-php教程-PHP中文网

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

WBOY

发布： 2024-08-14 11:00:44

原创

1172 人浏览过

How to Implement a WooCommerce AJAX Direct

当您使用 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);

登录后复制

说明：