Прелоадер во время расчета стоимости доставки WooCommerce

Question

У меня сложная логика доставки с определением положения и зон. Когда пользователь вводит адрес, начинается расчет стоимости. Пока идёт расчет, блок просмотра заказа и кнопка "заказать" становится серыми. Проблема в том, что с телефона этот блок не видно, он ниже зоны просмотра, пользователь не видит, что происходит какая то загрузка. Что бы не путать пользователя - надо показать ему прелоадер. Какой то процесс запускается, раз блок заказа становится серыми во время расчета. По такому же принципу можно сделать прелоадер, если знать, что за процесс происходит и к нему подцепиться.

Жду любых мыслей и идей. Спасибо.

Пока что вот, что нашел

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 пока не нашел

Answer 1

Решено. Мне подошёл вот такой вариант

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

БЛОГ НА HUSL

Прелоадер во время расчета стоимости доставки WooCommerce

Ответы (1 шт):