update_order_review() закрывает добавленный мною div
На странице woocommerce хотел при выборе типа доставки "Самовывоз" вывести блок с информацией об адресе пункта самовывоза, как доехать и тд. Повесил его на хук after_checkout_billing_form. Получилось примерно так:
add_action('woocommerce_after_checkout_billing_form', 'samovivoz');
function samovivoz() {
?>
<div class="samo-block" id="samo-block">
<div class="samo-map">
<a href="https://yandex.ru/maps" target="blank" class="samo-href"><img class="samo-img" src="">Посмотреть на карте</a>
</div>
<div class="samo-column">
<div class="samo-prizyv">Заберите ваш товар уже сегодня!</div>
<div class="samo-adres">xxx <br>Время работы: 11:00-19:00.</div>
<div class="samo-metro"><span><img class="metro-icon" src="xxx"></span>xxx</div>
<div class="samo-bus">xxx</div>
</div>
</div>
Логика была такая - при нажатии на один из способов доставки вылезает этот блок, при других - пропадает. Также в перспективе я бы хотел скрыть поле "Адрес" на этот случай. Для этого написал функцию на JS.
const samo = document.getElementById('samo-block');
const _button = document.getElementById('shipping_method-x');
const radioButtons = document.querySelectorAll('input[name="shipping_method[0]"]');
function handleRadioClick() {
if (_button.checked) {
samo.style.display = "flex";
} else {
samo.style.display = "none";
}
}
radioButtons.forEach(radio => {
radio.addEventListener('change', handleRadioClick);
});
Но она не работала при клике. Блок висит в статусе display:none, но не появляется. Я в JS профан, думал что проблема в коде - но в CodePen все работает. И при загрузке страницы тоже срабатывает, если до этого выбрать нужный способ доставки. Потом я заметил, что все работает, пока страница грузится, но перестает, как только она загружается.
В итоге я понял, что работать скрипт перестает после того, как прогружается ?wc-ajax=update_order_review. Если постоянно тыкать по кнопкам и не давать ему грузиться, все работает хорошо:) Отключить его нельзя, т.к цена доставки должна обновляться в зависимости от способа. Подскажите пожалуйста, с чем это может быть связано, и как это побороть. Костыли вроде создания копирователя в скрытый блок и вытаскивание инфы из него также не возбраняются:)
Ответы (1 шт):
Нашел решение. Может, кому будет полезно.
Нужно обернуть скрипт в jQuery(document).on( "updated_checkout", function(){}
У меня теперь все работает.