misha25
Форумчанин

Вопрос не совсем по Woocommerce, скорее всего по JS.
Не срабатывает событие при клике на кнопки количества товаров.
В товарах вывел числовое поле Упаковка. Скриптом сделал связь между этим полем и полем количества товара: когда меняем количество упаковок меняется количество товара.
>> Тестовая страница
Не получается сделать наоборот - чтобы при изменении поля количества товара менялось количество упаковок.
Хотел прикрепить функцию к событию клика на кнопки +/- количества товара, но оно не срабатывает.
Добавлено 15.09.2022:
Была тема OceanWP. На данный момент сменил тему и решилась моя проблема. Но почему в теме OceanWP на элементы поля количества товара нельзя повесить никакие события, не получилось разобраться.
Не срабатывает событие при клике на кнопки количества товаров.
В товарах вывел числовое поле Упаковка. Скриптом сделал связь между этим полем и полем количества товара: когда меняем количество упаковок меняется количество товара.
>> Тестовая страница
Не получается сделать наоборот - чтобы при изменении поля количества товара менялось количество упаковок.
Хотел прикрепить функцию к событию клика на кнопки +/- количества товара, но оно не срабатывает.
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 на элементы поля количества товара нельзя повесить никакие события, не получилось разобраться.
Последнее редактирование: