主页 / 问题 / 1412136
Accepted
Денис Беспалов
Asked:2022-07-21 03:51:11 +0000 UTC2022-07-21 03:51:11 +0000 UTC

WooCommerce 运输计算期间的预加载器

  • 772

我有一个复杂的交付逻辑，带有位置和区域检测。当用户输入地址时，费用计算开始。在计算过程中，订单视图块和“订单”按钮变为灰色。问题是这个块在手机上是不可见的，它位于查看区域的下方，用户看不到某种下载正在发生。为了不让用户感到困惑，您需要向他展示预加载器。当订单块在计算过程中变为灰色时，会触发一些过程。根据同样的原则，如果你知道正在发生什么样的过程并开始使用它，你可以制作一个预加载器。

我期待任何想法和想法。谢谢你。

到目前为止，这是我发现的

add_action( 'wp_head', 'script_update_shipping_method' );

function script_update_shipping_method() {
    if ( is_checkout() ) { //Если страница расчета
        ?>
        
        <script>
            jQuery(document).ready(function ($) {```

                $(document.body).on('updated_checkout updated_shipping_method', function (event, xhr, data) {
                    $('.checkout-loader').css('display','flex');

                });
            });
        
        </script>
        <?php
    }
    
}

updated_checkout updated_shipping_method这些 JQuery 方法负责更新。我的类下的预加载器.checkout-loader 变得可见，但我display: none还没有找到如何让它回来

wordpress woocommerce

1 个回答

  1. Best Answer

    决定了。我有这个选项

    add_action( 'wp_footer', 'awoohc_add_script_update_shipping_method' );
function awoohc_add_script_update_shipping_method() {
    if ( is_checkout() ) {
        ?>
    
        <script>
            jQuery(document).ready(function ($) {

                
                $(document.body).on('update_checkout', function () {
                    $('.checkout-loader').css('opacity','1');
                });
                
            //Срабатывает при успешном обновлении корзины. Убираем сообщение
                $(document.body).on('wc_fragments_refreshed', function () {
                        $('.checkout-loader').css('opacity','0');
                });
                
            });
        
        </script>
        <?php
    }
    
}
    此页面中非常有帮助的人：https ://wordpress.stackexchange.com/questions/342148/list-of-js-events-in-the-woocommerce-frontend

    • 0

相关问题