Как перезагрузить мой код, когда WooCommerce обновляет DOM?

Question

У меня есть небольшой объем кода, который нужно реализовать на веб-сайте моей работы :

window.onload = (function(){
    if ( document.querySelector('input#wc_checkout_add_ons_2.input-text') ){


        console.log("Mailing Code Check Initialized...");

        var submitButton = document.getElementById('place_order')
        var mailingCodeBox = document.querySelector('input#wc_checkout_add_ons_2.input-text');

        submitButton.disabled = true;
        mailingCodeBox.style.border = '2px solid #d83d3d';

        function authenticateInput(){
            if (mailingCodeBox.value == ''){
                mailingCodeBox.style.border = '2px solid #d83d3d';
                submitButton.disabled = true;
            } else {
                mailingCodeBox.style.border = '2px solid #52db6b';
                submitButton.disabled = false;
            }
        }


        mailingCodeBox.addEventListener('input', authenticateInput, false);

        submitButton.addEventListener('click', authenticateInput, false);

    }
}());

По сути, это проверка подлинности того, что что-то было написанов поле ввода.

WooCommerce обновляет страницу, и ее модули оформления заказа, тем не менее, нарушают мой код (кнопка отправки больше не может быть отключена моим сценарием).Есть ли обходной путь для этого?Могу ли я перезагрузить свой скрипт после обновления модулей WooCommerce?Я пробовал $( document.body ).on( 'updated_cart_totals') и $( document.body ).on( 'updated_wc_div'), но ни один не помог.Заранее спасибо.

Answer 1

Вы можете запустить свой код, когда woocormerce завершит обновление dom, например:

$(document.body).on('updated_checkout', function(){
    if ( document.querySelector('input#wc_checkout_add_ons_2.input-text') ){


        console.log("Mailing Code Check Initialized...");

        var submitButton = document.getElementById('place_order')
        var mailingCodeBox = document.querySelector('input#wc_checkout_add_ons_2.input-text');

        submitButton.disabled = true;
        mailingCodeBox.style.border = '2px solid #d83d3d';

        function authenticateInput(){
            if (mailingCodeBox.value == ''){
                mailingCodeBox.style.border = '2px solid #d83d3d';
                submitButton.disabled = true;
            } else {
                mailingCodeBox.style.border = '2px solid #52db6b';
                submitButton.disabled = false;
            }
        }


        mailingCodeBox.addEventListener('input', authenticateInput, false);

        submitButton.addEventListener('click', authenticateInput, false);

    }
});

Вы можете найти больше этих событий в их файлах js, потому что они не документированы.О событиях оформления заказа см. https://github.com/woocommerce/woocommerce/blob/master/assets/js/frontend/checkout.js