WooCommerce AJAX ダイレクトの「今すぐ購入」ボタンを実装する方法-PHPチュートリアル-php.cn

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

WBOY

リリース： 2024-08-14 11:00:44

オリジナル

1177 人が閲覧しました

How to Implement a WooCommerce AJAX Direct

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 エンドポイントに送信され、商品がカートに追加されます。
製品が正常に追加されると、ユーザーはチェックアウトページにリダイレクトされます。エラーが発生した場合 (製品がもう入手できないなど)、ユーザーは製品ページにリダイレクトされます。