Подскажите пожалуйста, как правильно добавить JS-скрипт в форму заказа магазина?
Скрипт работает плохо (через раз отрабатывает).
Что я делаю не так? Может быть есть способ проще?
Возможно я неправильно указываю порядок выполнения скриптов?
Буду благодарен за любую информацию.
Магазин сделан на WP / Woocommerce.
Хочу менять финальную стоимость заказа при выборе способа доставки.
Как у меня сейчас все устроено в данный момент:
Добавляю div-блок в файл
form-checkout.php
<?php echo '<div class="new_box_one"></div>' ?>
Далее не нему подцепляю JS-скрипт:
function countDeliverySum() {
let subTotalSum = document.querySelector('.cart-subtotal .woocommerce-Price-amount bdi');
let subTotalSumOnlyNum = subTotalSum.innerHTML.replace(/[^0-9]/g, "");
let totalSum = document.querySelector('.order-total .woocommerce-Price-amount bdi');
let oldBox = document.querySelector('.new_box_one');
let newBoxContent = `
<div class="delivery_new_box">
<div class="location_delivery">
<form action="">
<input type="radio" name="test" id="location_moscow">
<label for="radio1_moscow">Москва</label>
<input type="radio" name="test" id="location_other_city">
<label for="radio1_mosobl">Московская обл</label>
<input type="radio" name="test" id="location_other_country">
<label for="radio1_mosobl">Другая страна</label>
</form>
</div>
<div class="class_delivery">
<input type="radio" name="test1" id="delivery_type_1">
<label for="delivery_type_1">СДЭК</label>
<input type="radio" name="test1" id="delivery_type_2">
<label for="delivery_type_2">Почта России</label>
<input type="radio" name="test1" id="delivery_type_3">
<label for="delivery_type_3">Курьер сегодня</label>
<input type="radio" name="test1" id="delivery_type_4">
<label for="delivery_type_4">Курьер с примеркой</label>
<input type="radio" name="test1" id="delivery_type_5">
<label for="delivery_type_5">Самовывоз</label>
<input type="radio" name="test1" id="delivery_type_6">
<label for="delivery_type_6">Worldwide</label>
<input type="radio" name="test1" id="delivery_type_7">
<label for="delivery_type_7">СДЭК (Беларусь, Казахстан, Армения)</label>
</div>
</div>
`;
oldBox.innerHTML = newBoxContent;
let location1 = document.querySelector('#location_moscow');
let location2 = document.querySelector('#location_other_city');
let location3 = document.querySelector('#location_other_country');
let deliveryType1 = document.querySelector('#delivery_type_1');
let deliveryType2 = document.querySelector('#delivery_type_2');
let deliveryType3 = document.querySelector('#delivery_type_3');
let deliveryType4 = document.querySelector('#delivery_type_4');
let deliveryType5 = document.querySelector('#delivery_type_5');
let deliveryType6 = document.querySelector('#delivery_type_6');
let deliveryType7 = document.querySelector('#delivery_type_7');
let del1 = 390; // Sdek
let del2 = 1190; // Post of Russia
let del3 = 450; // Courier today
let del4 = 550; // Courier widt fitting
let del5 = 0; // Take by self
let del6 = 3500; // Worldwide
let del7 = 590; // Sdek SNG '₽'
location1.addEventListener('click', function locationOne() {
totalSum.innerHTML = subTotalSumOnlyNum + ' ₽';
deliveryType1.classList.add('active');
deliveryType2.classList.add('active');
deliveryType3.classList.add('active');
deliveryType4.classList.add('active');
deliveryType5.classList.add('active');
deliveryType6.classList.remove('active');
deliveryType7.classList.remove('active');
deliveryType1.addEventListener('click', function() {
let res = 0;
res = Number(subTotalSumOnlyNum) + Number(del1);
totalSum.innerHTML = res + ' ₽';
})
deliveryType2.addEventListener('click', function() {
let res = 0;
res = Number(subTotalSumOnlyNum) + Number(del2);
totalSum.innerHTML = res + ' ₽';
})
deliveryType3.addEventListener('click', function() {
let res = 0;
res = Number(subTotalSumOnlyNum) + Number(del3);
totalSum.innerHTML = res + ' ₽';
})
deliveryType4.addEventListener('click', function() {
let res = 0;
res = Number(subTotalSumOnlyNum) + Number(del4);
totalSum.innerHTML = res + ' ₽';
})
deliveryType5.addEventListener('click', function() {
let res = 0;
res = Number(subTotalSumOnlyNum) + Number(del5);
totalSum.innerHTML = res + ' ₽';
})
});
location2.addEventListener('click', function () {
totalSum.innerHTML = subTotalSumOnlyNum + ' ₽';
deliveryType1.classList.add('active');
deliveryType2.classList.add('active');
deliveryType3.classList.remove('active');
deliveryType4.classList.remove('active');
deliveryType5.classList.remove('active');
deliveryType6.classList.remove('active');
deliveryType7.classList.remove('active');
deliveryType1.addEventListener('click', function() {
let res = 0;
res = Number(subTotalSumOnlyNum) + Number(del1);
totalSum.innerHTML = res + ' ₽';
})
deliveryType2.addEventListener('click', function() {
let res = 0;
res = Number(subTotalSumOnlyNum) + Number(del2);
totalSum.innerHTML = res + ' ₽';
})
});
location3.addEventListener('click', function () {
totalSum.innerHTML = subTotalSumOnlyNum + ' ₽';
deliveryType1.classList.remove('active');
deliveryType2.classList.remove('active');
deliveryType3.classList.remove('active');
deliveryType4.classList.remove('active');
deliveryType5.classList.remove('active');
deliveryType6.classList.add('active');
deliveryType7.classList.add('active');
deliveryType6.addEventListener('click', function() {
let res = 0;
res = Number(subTotalSumOnlyNum) + Number(del6);
totalSum.innerHTML = res + ' ₽';
})
deliveryType7.addEventListener('click', function() {
let res = 0;
res = Number(subTotalSumOnlyNum) + Number(del7);
totalSum.innerHTML = res + ' ₽';
})
});
}
window.addEventListener("load", (event) => {
countDeliverySum();
});
Вот так это выглядит:
