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()는 jQuery 코드가 포함된 사용자 정의 스크립트 파일(script.js)을 로드하는 데 사용됩니다.
• wp_localize_script()는 결제 페이지 URL과 같은 PHP 데이터를 스크립트에 전달하여 스크립트 내에서 사용할 수 있도록 합니다.

2단계: AJAX 요청 처리

마지막으로 jQuery를 사용하여 버튼 클릭 이벤트를 처리하겠습니다. jQuery 스크립트는 WooCommerce에 AJAX 요청을 보내고, 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 Direct \'지금 구매\' 버튼을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!