Shopify：如何在JavaScript中正确显示Liquid元字段调用结果

你的问题核心是把Shopify的Liquid模板语法直接写在了.js文件里——浏览器只会执行JavaScript代码，不会解析Liquid变量，所以{{ product.metafields.my_fields.subscription_descriptions }}这类代码会被直接当成字符串显示，而不是替换成实际的元字段数据。

下面是两种场景的解决方案：

场景1：JS代码嵌入在Liquid模板文件中 #

如果你的JS代码是写在.liquid或.html.liquid这类Shopify模板文件的<script>标签里，可以直接使用Liquid变量，但要注意转义特殊字符：

<script>
  // 先通过Liquid解析metafield数据，转义后传给JS变量
  const subscriptionDesc = "{{ product.metafields.my_fields.subscription_descriptions | escape }}";
  
  if (subscriptionDesc) {
    // 动态创建元素并插入到页面
    const descElement = document.createElement('p');
    descElement.textContent = subscriptionDesc;
    // 替换成你需要插入的目标容器选择器
    document.querySelector('.product-info').appendChild(descElement);
  }
</script>

• 用| escape过滤器是为了避免metafield里的引号、换行等特殊字符破坏JS语法，同时降低XSS风险。

场景2：JS是独立的外部文件 #

外部.js文件无法直接解析Liquid，需要先把metafield数据传递给JS，有两种常用方法：

方法1：通过全局变量传递 #

在Liquid模板的合适位置（比如<head>或产品模块附近）添加全局变量：

<script>
  // 把需要的metafield数据挂载到window对象上
  window.productMeta = {
    subscriptionDesc: "{{ product.metafields.my_fields.subscription_descriptions | escape }}"
  };
</script>

然后在外部.js文件中读取这个全局变量：

// 检查变量是否存在
if (window.productMeta?.subscriptionDesc) {
  const descElement = document.createElement('p');
  descElement.textContent = window.productMeta.subscriptionDesc;
  document.querySelector('.product-info').appendChild(descElement);
}

方法2：通过HTML data属性传递 #

在Liquid模板的某个产品相关元素上添加data属性：

<!-- 给产品容器添加data属性存储metafield数据 -->
<div class="product-container" data-subscription-desc="{{ product.metafields.my_fields.subscription_descriptions | escape }}">
  <!-- 产品内容 -->
</div>

然后在外部.js文件中读取data属性：

const productContainer = document.querySelector('.product-container');
const subscriptionDesc = productContainer?.dataset.subscriptionDesc;

if (subscriptionDesc) {
  const descElement = document.createElement('p');
  descElement.textContent = subscriptionDesc;
  productContainer.appendChild(descElement);
}

额外注意 #

如果你的metafield是富文本（包含HTML标签），不要用textContent，改用innerHTML，但要确保内容是安全的（比如仅使用自己编辑的内容）。如果需要去除HTML标签，可以用Liquid的| strip_html过滤器：

{{ product.metafields.my_fields.subscription_descriptions | strip_html | escape }}

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