• Никакой политики на форуме. Иначе - бан!
  • Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!
  • Темы озаглавленные с маленькой буквы или капсом удаляются без предупреждения!

На странице товара проблема с событием на кнопках +/- количества товара

misha25

Форумчанин
Вопрос не совсем по Woocommerce, скорее всего по JS.
Не срабатывает событие при клике на кнопки количества товаров.

В товарах вывел числовое поле Упаковка. Скриптом сделал связь между этим полем и полем количества товара: когда меняем количество упаковок меняется количество товара.
>> Тестовая страница
Не получается сделать наоборот - чтобы при изменении поля количества товара менялось количество упаковок.
Хотел прикрепить функцию к событию клика на кнопки +/- количества товара, но оно не срабатывает.

JavaScript:
document.addEventListener('DOMContentLoaded', function(){
 
    // Поле упаковок
    let y = document.querySelector("#qty-pak");
    // Поле количества товара
    let x = document.querySelector("form.cart .quantity input.qty");
 
    // Цена товара 1 единицы
    let price = document.querySelector(".wpcr-price");
    // Общая цена упаковок
    let sumPrice = document.querySelector(".wpcr-sum-price");
 
    // Кнопка "+" количества товара
    var plusQty = document.querySelector("form.cart a.plus");
    // Кнопка "-" количества товара
    var minusQty = document.querySelector("form.cart a.minus");
 
    // Обновить Общую цену
    function updateSumPrice (){
        sumPrice.innerHTML = ( x.value * price.innerHTML ).toFixed(2);
    }
 
    updateSumPrice();
 
    // При изменении упаковок (y) изменить количество товара (x)
    function upgradeXbyY(){                        

        x.value = (y.value * x.step).toFixed(2);
     
        // обновить поле количества товара событием 'change'
        let event = new Event('change');
        x.dispatchEvent(event);

        updateSumPrice();

        console.log("upgradeXbyY сработал");
    }

    y.addEventListener('change', upgradeXbyY);

    // При изменении количество товара (x) изменить упаковки (y)
    function upgradeYbyX(){

        y.value = (x.value / x.step).toFixed(0);

        updateSumPrice ();

        console.log("upgradeYbyX сработал");
    }
 
    // Вешаю событие клика на кнопки "+/-", но клик не срабатывает
    plusQty.addEventListener('click', upgradeYbyX);
    minusQty.addEventListener('click', upgradeYbyX);

});

Добавлено 15.09.2022:
Была тема OceanWP. На данный момент сменил тему и решилась моя проблема. Но почему в теме OceanWP на элементы поля количества товара нельзя повесить никакие события, не получилось разобраться.
 
Последнее редактирование:
Сверху Снизу