<button class="product-add__button add-to-cart button button--primary set--w-100"
data-pid="${product.id}" ${!product.readyToOrder || !product.available ? "disabled : ""}
data-product-component="add-button"
data-url="${pdict.addToCartUrl}"
title="${product.productType == 'master' ? Resource.msg('button.addtocart.select.all.options', 'common', null) : ''}"
>
<isif condition="${product.productType === 'set' || product.productType === 'bundle'}">
${Resource.msg('button.addalltocart', 'common', null)}
<iselse>
${Resource.msg('button.addtocart', 'common', null)}
</isif>
</button>
Это проект SF CC (облако коммерции salesforce). Сайт электронной коммерции, на странице корзины, если пользователь не выбрал размер или количество продукта, кнопка останется неактивной.
В настоящее время мы показываем всплывающую подсказку по умолчанию, которая исходит из значения атрибута title, но новое требование состоит в том, что нам нужно показывать то же сообщение при нажатии, а не при наведении курсора. Поскольку мы не можем добавить событие щелчка к отключенному элементу, я хочу добавить атрибут data-disabled вместо атрибута disabled из (backend).
поэтому на основе атрибута data-disabled мне нужно добавить отключенный класс (для создания фиктивной отключенной кнопки).
Мне нужно добавить прослушиватель событий click в зависимости от условия (выбранный пользователем размер или нет) и показать всплывающую подсказку, чтобы указать пользователю, чтобы выбрать размер или количество.
Примечание: я хочу чистое javascript решение, без фреймворков и библиотек, пожалуйста
Ниже приведен код, который я дал мне для анализа, чтобы решить эту проблему, но я не понимаю, как чтобы реализовать его с помощью этого скрипта.
jsfidle link> https://jsfiddle.net/xhwftvkm/
export function updateAddToCart(productData, productContainer) {
let isDisabled = !productData.readyToOrder || !productData.available,
testQuery = productContainer.querySelectorAll('[data-product-component="add-button"]'),
queryString = (testQuery.length > 0) ? '[data-product-component="add-button"]' : '[data-product-component*="update-button"]';
[].forEach.call(productContainer.querySelectorAll(queryString), (currentEl) => {
if (isDisabled) {
currentEl.setAttribute('data-disabled', '');
} else {
currentEl.removeAttribute('data-disabled');
showAddToCartError(currentEl, false);
}
});
_handleApplePay(productData, productContainer);
}
export function setupAddToCart(container) {
let addToCartButtons = (container || document).querySelectorAll('[data-product-component="add-button"]:not([data-add-ready])');
[].forEach.call(addToCartButtons, function(currentBtn) {
currentBtn.setAttribute('data-add-ready', '');
currentBtn.addEventListener('click', function() {
if (this.getAttribute('data-disabled') !== null) {
showAddToCartError(this, true);
} else {
handleCartAdd(this);
showAddToCartError(this, false);
}
})
});
}