1

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

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

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

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

5
  • Ну пока из мыслей только попытаться найти hook либо же filter, который, возможно (!), отвечает за запуск js-скрипта, который, в свою очередь, "делает" блок заказа серым. Далее мы привяжемся к этому hook'у (filter'у) и напишем свой js-скрипт, который сделает нужный вам прелоадер, Буду признателен (возможно, не только я), если выложите решение в случае его находки) 21 мая 2022 в 0:47
  • 1
    Хм... есть идея отследить изменения в DOM-поддереве через MutationObserver (это мы про JavaScript). То есть нам необходимо отследить изменения в классах кнопки, что становится серой, или изменения дочерних элементов во всём блоке, в котором находится кнопка. Неважно. Главное - отслеживать те изменения, которые происходят при расчёте стоимости. Смысл в том, что у MutationObserver есть callback-функция. Она у нас будет запускаться только тогда, когда у кнопки удалится класс, делающий её серой. А при выполнении такая функция будет делать display: none; куда вам надо. 21 мая 2022 в 7:46
  • Это, наверное, далеко не самое корректное решение ДАННОЙ проблемы, но как костыль-вариант 21 мая 2022 в 7:47
  • Пока что роюсь в классе WC_ajax. Думаю, ответ где-то там 21 мая 2022 в 7:54
  • Всё еще ищу решение. Как найду - выложу 21 мая 2022 в 21:37

1 ответ 1

0

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.