JAVASCRIPT / Повторный onclick на странице с изменяющимися элементами

170

20 декабря 2021, 22:20

Drupal 8, Commerce 2, аттрибуты товара типа Rendered Attribute. Функция подключена в libraries по всем правилам Drupal.

После загрузки страницы кликаем на первый размер (XS) - кнопка покупки блокируется, текст на ней меняется, так как есть скрытый div с количеством на складе и его там 0, - все хорошо.
После выбора кликом второго размера (S) меняются соответственно цена и скрытое значение запаса на 1, но проверка запаса скриптом уже не выполняется. В этом случае кнопка должна стать активной с текстом "В корзину".
После выбора "назад" первого размера (XS) тоже ничего не проверяется (цена и сток конечно меняются).

Я понимаю, что дело в первую очередь в событиях выбора размеров, но сам не могу ничего решить (очень новичок). И конечно скрипт не проверяет пока стоковое значение при загрузке страницы на первом выбранном по умолчанию элементе, чтобы при его нуле сразу блокировать кнопку покупки. Но это, думаю, сам решу. Хотя, за подсказку буду очень признателен :-)

Итого

При смене атрибута (здесь размера) меняется значение запаса на стоке (в скрытом div), при загрузке страницы грузится значение первого атрибута.

Задача

При загрузке страницы и при каждой смене атрибута требуется проверка количества на стоке, чтобы менять свойства кнопки покупки.

Скрин формы: https://snipboard.io/t528oH.jpg.

Код:

var attributeRadio = document.querySelector(".control-label");
var addToCartButton = document.querySelector(".button--add-to-cart");
var stockControlValue = document.querySelector(".field--name-field-com-ware-stock-control").children[1].innerText;
var inStock = "В корзину";
var outOfStock = "Нет в наличии";
attributeRadio.addEventListener("click", addToCartControl);
function addToCartControl() {
    if (stockControlValue <= 0) {
        addToCartButton.innerHTML = outOfStock;
        addToCartButton.disabled = true;
    }
    else {
        addToCartButton.innerHTML = inStock;
        addToCartButton.disabled = false;
    }
}

Update

Также понимаю, что нужно что-то типа

var attributeRadio = document.querySelector(".control-label")[all];

И, вероятно, это ajax меняет значения. Как тогда быть с проверкой не представляю.

Answer 1

[РЕШЕНО]

Через twig debug найден шаблон //themes/bootstrap/templates/input/form-element-label.html.twig.
Добавлено событие onClick для label с вызовом функции соответственно. В этом случае вызов функции никуда не денется.
Код ниже. Вероятно, можно короче, но я иначе не умею.
Таймаут дает возможность обойти подгружаемые элементы.

Код:

// Stock control on page load
document.addEventListener("DOMContentLoaded", addToCartControlOnPageLoad);
function addToCartControlOnPageLoad() {
    setTimeout(addToCartControlOnPageLoad, 1000);
    var addToCartButton = document.querySelector(".button--add-to-cart");
    var stockControlValue = document.querySelector(".field--name-field-com-ware-stock-control").children[1].innerText;
    var inStock = "В корзину";
    var outOfStock = "Нет в наличии";
    if (stockControlValue <= 0) {
        addToCartButton.innerHTML = outOfStock;
        addToCartButton.disabled = true;
    }
    else {
        addToCartButton.innerHTML = inStock;
        addToCartButton.disabled = false;
    }
}
// Stock control on attribute selection
function addToCartControlOnAttributeSelection() {
    setTimeout(addToCartControlOnAttributeSelection, 1000);
    var addToCartButton = document.querySelector(".button--add-to-cart");
    var stockControlValue = document.querySelector(".field--name-field-com-ware-stock-control").children[1].innerText;
    var inStock = "В корзину";
    var outOfStock = "Нет в наличии";
    if (stockControlValue <= 0) {
        addToCartButton.innerHTML = outOfStock;
        addToCartButton.disabled = true;
    }
    else {
        addToCartButton.innerHTML = inStock;
        addToCartButton.disabled = false;
    }
}