0 
<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>

这是SFCC（salesforce commerce cloud）项目电子商务站点，在购物车页面，如果用户没有选择产品尺寸或数量，按钮将保持禁用状态。

目前，我们正在显示来自 title 属性值的默认工具提示，但新要求是我们需要在单击而不是悬停时显示相同的消息，由于我们无法向禁用元素添加单击事件，我想添加一个数据-disabled 属性，而不是来自（后端）的禁用属性。

所以基于 data-disabled 属性我需要添加一个禁用类（创建一个虚拟禁用按钮）。

我需要根据条件（用户是否选择大小）添加一个点击事件监听器，并显示一个工具提示来指示用户选择大小或数量。

注意：我想要纯 javascript 解决方案，没有框架没有库，请

下面是我的领导给我分析以解决这个问题的代码，但我不知道如何使用这个脚本来实现它。

jsfiddle 链接 > 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);
            }
        })
    });
}
4

1 回答 1

0

我从这个问题中了解到的是在用户单击按钮时显示工具提示。

1.您可以在按钮上方设计一个带有绝对位置的工具提示，以及您实际想要的任何设计。先做吧。

2.一旦完成，最初为工具提示 div 保留一个 display none 属性，该属性对 button 是绝对的。

3.一旦用户单击或悬停在禁用按钮上，只需使用 dom 操作使工具提示 div 的显示可见。如果要禁用工具提示，请使用 settimeout 或任何其他逻辑。

谢谢

于 2020-08-02T19:34:14.317 回答