在 Woocommerce 中启动和停止 Ajax Overlay 微调器

Posted 2023-02-24

【中文标题】在 Woocommerce 中启动和停止 Ajax Overlay 微调器

【英文标题】：Starting and stoping Ajax Overlay spinner in Woocommerce

【发布时间】：2019-06-29 09:35:40

【问题描述】：

我已经开发了自定义支付网关，它会延迟通过 ajax 进行的支付过程。我想展示目前在 woocommerce 中使用的同一个微调器。

这是我的 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);

所以我想做这个：

如何在结帐页面中启动和停止 ajax Woocommerce 覆盖微调器？

【问题讨论】：

如何调用叠加层微调器

【参考方案1】：

Woocommerce 使用 jQuery BlockUI Plugin 在某些 jQuery 事件和特定页面上使用动画微调器制作阻塞覆盖。

以下是结帐页面上的示例，页面加载后延迟 2 秒后将激活 woocommerce 微调器，并在 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;

代码进入您的活动子主题（或活动主题）的 function.php 文件中。经过测试并且可以工作。

jQuery BlockUI Plugin 官方文档。

【讨论】：

我在我的插件中尝试过它工作正常。感谢您的代码稍作修改