如何通过JavaScript获取BigCommerce商品页点击的SKU信息

核心思路：事件委托+精准提取SKU #

不用给每个SKU元素单独绑定事件，用事件委托监听全局点击，再从点击的元素中提取SKU，这种方式高效且适配动态加载的元素。

步骤1：先定位SKU的存储位置 #

打开浏览器开发者工具（F12），点击目标SKU选项，在Elements面板查看：

• 有没有类似data-sku="xxx"的自定义属性（最常见的存储方式）
• SKU是不是直接写在元素的文本里，比如"SKU: ABC123"
• 或者在元素的某个父/子节点的类名、属性里

步骤2：实现点击监听与SKU提取 #

根据你找到的SKU存储方式，用下面的代码模板修改后使用：

// 监听全局点击事件
document.addEventListener('click', function(e) {
  // 替换成你找到的目标元素选择器：比如[data-sku]、.sku-option、.product-sku-item等
  const targetSkuEl = e.target.closest('[data-sku], .sku-option');
  
  if (targetSkuEl) {
    let sku;
    // 情况1：SKU存在于data-sku属性中
    if (targetSkuEl.dataset.sku) {
      sku = targetSkuEl.dataset.sku;
    }
    // 情况2：SKU在文本中，比如"SKU: XYZ789"
    else {
      // 用正则提取，根据实际文本格式调整正则表达式
      const skuMatch = targetSkuEl.textContent.trim().match(/SKU:\s*(\w+)/);
      sku = skuMatch ? skuMatch[1] : null;
    }

    if (sku) {
      console.log('点击的SKU:', sku);
      // 这里加后续处理逻辑，比如调用接口拿详情
      // fetch(`/api/get-sku-detail?sku=${sku}`)
      //   .then(res => res.json())
      //   .then(detail => console.log('SKU详情:', detail));
    }
  }
});

快速定位原有应用的核心逻辑 #

如果原有代码太长，用这两个方法快速找关键部分：

• 在控制台搜索console.log，找到输出SKU的那行代码，往上溯源事件绑定和SKU提取逻辑
• 打开Elements面板的Event Listeners标签，筛选click事件，找到对应SKU点击的处理函数，点击跳转到源码查看

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