Shopify多div自定义属性值获取与输出问题求助

第一步：修复HTML结构 #

首先确保所有<div>标签正确闭合，残缺标签会导致DOM解析异常，影响jQuery选择器工作：

<div class="options-selection__option-values" data-variant-option="" data-variant-option-index="0" data-variant-option-chosen-value="One"></div>
<div class="options-selection__option-values" data-variant-option="" data-variant-option-index="0" data-variant-option-chosen-value="Two"></div>
<div class="options-selection__option-values" data-variant-option="" data-variant-option-index="0" data-variant-option-chosen-value="Three"></div>
<div class="options-selection__option-values" data-variant-option="" data-variant-option-index="0" data-variant-option-chosen-value="Four"></div>

<span class="selected-variant"></span>

第二步：调整jQuery代码，解决元素加载时机问题 #

Shopify主题的产品选项多为动态渲染，document.ready可能在元素未加载时执行，导致无法选中目标元素。以下是两种可靠解决方案：

方案1：延迟执行代码 #

$(document).ready(function() {
  // 延迟500ms确保元素完成渲染，时间可按需调整
  setTimeout(function() {
    getAndDisplayOptionValues();
  }, 500);
});

function getAndDisplayOptionValues() {
  var selectedValues = [];
  $('.options-selection__option-values').each(function() {
    // 用attr()读取动态属性值，避免data()的缓存机制影响
    var value = $(this).attr('data-variant-option-chosen-value');
    console.log(value);
    selectedValues.push(value);
  });
  // 将所有值拼接后输出到目标span，可根据需求修改格式
  $('.selected-variant').text(selectedValues.join(', '));
}

方案2：用MutationObserver监听元素加载 #

这种方式能在元素动态添加到DOM时立即触发，无需依赖延迟：

$(document).ready(function() {
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (mutation.addedNodes.length) {
        var targetElements = $('.options-selection__option-values');
        if (targetElements.length) {
          getAndDisplayOptionValues();
          observer.disconnect(); // 读取到值后停止监听
        }
      }
    });
  });

  // 监听body子元素变化，可根据实际父元素缩小监听范围
  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
});

function getAndDisplayOptionValues() {
  var selectedValues = [];
  $('.options-selection__option-values').each(function() {
    var value = $(this).attr('data-variant-option-chosen-value');
    console.log(value);
    selectedValues.push(value);
  });
  $('.selected-variant').text(selectedValues.join(', '));
}

第三步：确认jQuery已正确引入 #

检查Shopify主题的theme.liquid文件，确保已加载jQuery，示例代码如下：

{{ '//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js' | script_tag }}

若无此代码，需添加到<head>或<body>末尾。

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