Shopify：如何在.js.liquid文件中获取产品图片的Media ID？

核心原因 #

.js.liquid文件中，Liquid变量（如{{ media.id }}）仅能在服务器端渲染阶段解析。如果是在客户端JS逻辑（比如事件回调、动态拼接HTML的代码里）直接写media.id，它会被当作普通JS变量，而非Liquid变量，自然无法获取正确值。

可行解决方向 #

1. 提前将Media ID注入到全局JS变量 #

在.js.liquid文件开头，通过Liquid把产品的media数据转成JS可直接访问的对象：

{% comment %} 注入产品media数据到全局JS变量 {% endcomment %}
<script>
  const productMedias = [
    {% for media in product.media %}
      {
        id: "{{ media.id }}",
        src: "{{ media | image_url: width: 300 }}"
      }{% unless forloop.last %},{% endunless %}
    {% endfor %}
  ];
</script>

之后在动态拼接HTML的JS代码中，从productMedias数组匹配对应项获取ID：

// 匹配当前src对应的media对象
const targetMedia = productMedias.find(media => media.src === src);
if (targetMedia) {
  thumbnailContainer.append(`<img src="${src}" alt="qv-img" class="lazyload" data-media-id="${targetMedia.id}">`);
}

2. 提前用Liquid渲染带Media ID的HTML模板 #

在页面中提前渲染好包含media.id的隐藏模板，之后用JS克隆/移动到目标容器：

{% comment %} 隐藏的图片模板 {% endcomment %}
<div class="media-template" style="display:none;">
  {% for media in product.media %}
    <img src="{{ media | image_url: width: 300 }}" alt="qv-img" class="lazyload" data-media-id="{{ media.id }}">
  {% endfor %}
</div>

JS中直接复用模板元素：

const templateImg = document.querySelector(`.media-template img[src="${src}"]`);
if (templateImg) {
  const newImg = templateImg.cloneNode(true);
  thumbnailContainer.appendChild(newImg);
}

3. 服务器端渲染时直接嵌入Liquid变量（仅限非动态触发场景） #

如果JS代码是服务器端渲染阶段执行（而非客户端动态触发），可直接在拼接字符串中嵌入{{ media.id }}，前提是当前Liquid上下文存在media变量：

{% for media in product.media %}
<script>
  const src = "{{ media | image_url: width: 300 }}";
  thumbnailContainer.append('<img src="' + src +'" alt="qv-img" class="lazyload" data-media-id="{{ media.id }}">');
</script>
{% endfor %}

该方式仅适用于不需要客户端动态触发的场景，代码是服务器端渲染完成后输出到页面的。

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