Woocommerce에서 Ajax Overlay Spinner 시작 및 중지

Woocommerce에서 Ajax Overlay Spinner 시작 및 중지

저는 ajax를 통한 프로세스 결제를 지연시킬 커스텀 결제 게이트웨이를 개발하였습니다.현재 우커머스에서 사용하고 있는 스피너를 보여주고 싶습니다.

그것은 내 jQuery 코드의 발췌입니다.

function callAjax(){
    jQuery.ajax({
        type : "POST",
        url: '<?php echo site_url().'/?wc-api=custom_ function'; ?>',
        data: response,
        //data: {action:'gateway'},
        dataType : "json",
        cache: false,
        success: function(response) {                               
            //alert("Your vote could not be added");
            //alert(response);
            flag = true;
            // window.location = response.redirect;
            //console.log(response);
            return false;
        }
    }); 
}

setTimeout(
    function(){ callAjax(); 
}, 3000);

그래서 저는 이것을 만들고 싶습니다.

아약스 우커머스 오버레이 스피너를 체크아웃 페이지에서 시작하고 중지하는 방법?

우커머스는 jQuery 블록을 사용합니다.UI 플러그인 일부 jQuery 이벤트 및 특정 페이지에 애니메이션 스피너로 차단 오버레이를 만듭니다.

다음은 체크아웃 페이지의 예로, 페이지가 로드되면 2초 후에 우커머스 스피너가 작동하고 3초 후에 중지됩니다.

add_action('wp_footer', 'spinners_example_on_checkout_jquery_script');
function spinners_example_on_checkout_jquery_script() {
    if ( is_checkout() && ! is_wc_endpoint_url() ) :
    ?>
    <script type="text/javascript">
    jQuery( function($){
        // Targeting checkout checkout payment and Review order table like Woocommerce does.
        var a = '.woocommerce-checkout-payment, .woocommerce-checkout-review-order-table';

        // Starting spinners with a delay of 2 seconds
        setTimeout(function() {
            // Starting spinners
            $(a).block({
                message: null,
                overlayCSS: {
                    background: "#fff",
                    opacity: .6
                }
            });

            console.log('start');

            // Stop spinners after 3 seconds
            setTimeout(function() {
                // Stop spinners
                $(a).unblock();

                console.log('stop');
            }, 5000);
        }, 2000);
    });
    </script>
    <?php
    endif;
}

코드가 작동합니다.활성 하위 테마(또는 활성 테마)의 php 파일입니다.테스트를 거쳐 작동합니다.

제이쿼리 블록UI Plugin 공식 문서.

언급URL : https://stackoverflow.com/questions/54536575/starting-and-stoping-ajax-overlay-spinner-in-woocommerce