在Woocommerce中启动和停止Ajax Overlay微调器 [英] Starting and stoping Ajax Overlay spinner in Woocommerce

问题描述

我开发了自定义支付网关，它将通过ajax延迟流程付款。我想展示目前在woocommerce中使用的相同的微调器。

I have developed custom payment gateway which will delay the process payment through ajax. I would like to show the same spinner which is currently used in woocommerce.

这是我的jQuery代码的摘录：

That is an extract of my jQuery code:

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);

所以我想这样做：

如何在结帐页面启动和停止ajax Woocommerce叠加旋转器？

How to start and stop in checkout page the ajax Woocommerce overlay spinners?

推荐答案

Woocommerce使用 jQuery BlockUI插件在一些jQuery事件和特定页面上使用动画微调器进行阻塞叠加。

Woocommerce Uses jQuery BlockUI Plugin to make a blocking overlay with an animate spinner on some jQuery events and on specific pages.

以下是结帐页面上的一个示例，它将激活woocommerce加载页面后延迟2秒后旋转器并在3秒后停止它们：

Here below is an example on the checkout page, that will activate woocommerce spinners after a delay of 2 seconds once page is loaded and will stop them after 3 seconds:

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;
}

代码进入活动子主题（或活动主题）的function.php文件）。测试和工作。

Code goes in function.php file of your active child theme (or active theme). Tested and works.

jQuery BlockUI插件官方文件。

这篇关于在Woocommerce中启动和停止Ajax Overlay微调器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！