У меня сложная логика доставки с определением положения и зон. Когда пользователь вводит адрес, начинается расчет стоимости. Пока идёт расчет, блок просмотра заказа и кнопка "заказать" становится серыми. Проблема в том, что с телефона этот блок не видно, он ниже зоны просмотра, пользователь не видит, что происходит какая то загрузка. Что бы не путать пользователя - надо показать ему прелоадер. Какой то процесс запускается, раз блок заказа становится серыми во время расчета. По такому же принципу можно сделать прелоадер, если знать, что за процесс происходит и к нему подцепиться.
Жду любых мыслей и идей. Спасибо.
Пока что вот, что нашел
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
пока не нашел
hook
либо жеfilter
, который, возможно (!), отвечает за запуск js-скрипта, который, в свою очередь, "делает" блок заказа серым. Далее мы привяжемся к этомуhook'у
(filter'у
) и напишем свой js-скрипт, который сделает нужный вам прелоадер, Буду признателен (возможно, не только я), если выложите решение в случае его находки)MutationObserver
(это мы про JavaScript). То есть нам необходимо отследить изменения в классах кнопки, что становится серой, или изменения дочерних элементов во всём блоке, в котором находится кнопка. Неважно. Главное - отслеживать те изменения, которые происходят при расчёте стоимости. Смысл в том, что уMutationObserver
есть callback-функция. Она у нас будет запускаться только тогда, когда у кнопки удалится класс, делающий её серой. А при выполнении такая функция будет делатьdisplay: none;
куда вам надо.