Как задать условие в форме заказа с помощью JS-скрипта?

Question

[Станислав]

Подскажите пожалуйста, как правильно добавить 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();
});

Вот так это выглядит:

Comments

[Тяги Тяги]

debugger'ом пройдись и посмотри, что происходит 0.0

[luxurypluxury]

Вот сокращённый вариант кода, попробуйте так:

function countDeliverySum() {
  const subTotalSum = document.querySelector('.cart-subtotal .woocommerce-Price-amount bdi');
  const subTotalSumOnlyNum = +subTotalSum.innerHTML.replace(/\D/g, '');
  const totalSum = document.querySelector('.order-total .woocommerce-Price-amount bdi');
  const deliveryTypes = document.querySelectorAll('.class_delivery input[type="radio"]');
  const locationRadios = document.querySelectorAll('.location_delivery input[type="radio"]');

  function calculateTotal(deliveryPrice) {
    totalSum.innerHTML = `${subTotalSumOnlyNum + deliveryPrice} ₽`;
  }

  function activateDeliveryTypes(...indexes) {
    deliveryTypes.forEach((type, index) => type.classList.toggle('active', indexes.includes(index)));
  }

  locationRadios.forEach((locationRadio) => {
    locationRadio.addEventListener('click', () => {
      if (locationRadio.id === 'location_moscow') {
        activateDeliveryTypes(0, 1, 2, 3, 4);
        calculateTotal(390);
      } else if (locationRadio.id === 'location_other_city') {
        activateDeliveryTypes(0, 1);
        activateDeliveryTypes(2, 3, 4, 5, 6);
        calculateTotal(1190);
      } else {
        activateDeliveryTypes(0, 1, 2, 3, 5, 6);
        calculateTotal(3500);
      }
    });
  });
}

[Станислав]

luxurypluxury, спасибо за сокращенный вариант!
Но, к сожалению, в форму не передается итоговая сумма (передается сумма без доставки)

[luxurypluxury]

Станислав, а где у вас deliveryPrice берется?

[Станислав]

luxurypluxury, стоимость доставки я вручную задаю в переменной внутри функции

[luxurypluxury]

Станислав, пробуйте действие + вынести в отдельную переменную и передавать её, дебажьте код