WordPress与JavaScript：无SKU商品隐藏按钮的变量商品兼容问题

问题根本原因 #

WooCommerce 可变商品的SKU属于动态渲染内容，DOM初始加载完成时，仅普通无变体商品的SKU会直接写入DOM，可变商品的SKU需要用户选择对应变体后，通过JS异步更新到页面中，因此初始状态下读取sku[0].innerHTML会得到空值，触发误判。

解决方案 #

我们可以结合WooCommerce可变商品的专属事件做分场景处理，完整实现代码如下：

document.addEventListener('DOMContentLoaded', function() {
    const makerBtn = document.getElementById("maker-button");
    const sku = document.getElementsByClassName("sku");
    // 可变商品专属表单类，用于区分商品类型
    const isVariableProduct = document.querySelector('.variations_form') !== null;

    // 初始化跳转按钮
    const newLink = document.createElement("a");
    newLink.innerText = "Buy at Maker's Site";
    newLink.className += "fusion-button button-flat fusion-button-default-size button-custom button-3 fusion-button-default-span fusion-button-default-type";
    newLink.addEventListener("click", ()=> {
        newLink.target = "_blank";
        newLink.href = sku[0].innerHTML.trim();
    });
    makerBtn.appendChild(newLink);

    // 封装SKU校验与按钮切换逻辑
    function toggleBuyBtn() {
        const currentSku = sku[0]?.innerHTML.trim() || '';
        newLink.style.display = currentSku ? 'inline-block' : 'none';
    }

    // 初始状态校验
    toggleBuyBtn();

    // 可变商品额外监听变体更新事件
    if (isVariableProduct) {
        // 变体选择完成、数据加载完成后触发
        document.querySelector('.variations_form').addEventListener('found_variation', function(e, variation) {
            // 可选：直接用返回的变体SKU判断，无需等待DOM更新，更高效
            // newLink.style.display = variation.sku ? 'inline-block' : 'none';
            setTimeout(toggleBuyBtn, 30);
        });
        // 变体取消选中时隐藏按钮
        document.querySelector('.variations_form').addEventListener('reset_data', toggleBuyBtn);
    }
})

代码说明 #

• 代码外层包裹DOMContentLoaded事件，确保DOM节点全部加载完成后再执行逻辑，避免读取不到元素的报错
• 用trim()方法处理SKU值，避免空格、换行等空白字符导致的空值判断错误
• 利用WooCommerce官方内置的found_variation、reset_data事件监听变体状态变化，无需自行监听下拉菜单变化，兼容性更强
• 可选优化：直接使用事件返回的variation对象中的SKU值做判断，无需等待DOM更新，判断效率和准确性更高

内容的提问来源于stack exchange，提问作者Stuart Wong