WooCommerce AJAX ダイレクトの「今すぐ購入」ボタンを実装する方法

WooCommerce を使用してオンライン ストアを運営する場合、購入プロセスを可能な限りシームレスにすることが重要です。これを行う効果的な方法の 1 つは、顧客が複数のページを移動することなく製品を直接購入できるようにする「今すぐ購入」ボタンを追加することです。このブログでは、提供されたコード スニペットを使用して 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() は、jQuery コードを含むカスタム スクリプト ファイル (script.js) をロードするために使用されます。
• wp_localize_script() は、チェックアウト ページ URL などの PHP データをスクリプトに渡し、スクリプト内で使用できるようにします。

ステップ 2: AJAX リクエストを処理する

最後に、jQuery を使用してボタンのクリック イベントを処理します。 jQuery スクリプトは AJAX リクエストを WooCommerce に送信し、WooCommerce によって商品がカートに追加され、ユーザーがチェックアウト ページに直接リダイレクトされます。

これが 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 ダイレクトの「今すぐ購入」ボタンを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。