Shopify主题应用扩展：如何在集合页按产品标签调整价格显示？

之前的方案在产品页生效，是因为产品页的product变量在服务器端渲染时处于可用上下文，但你通过客户端JS插入Liquid代码的方式在集合页行不通——Liquid是服务器端模板语言，客户端JS运行时页面已经完成渲染，插入的Liquid代码不会被Shopify解析，而且集合页的产品网格是循环渲染的，每个产品的product变量在客户端没有对应上下文。

下面是几种可行的解决方案：

方案1：利用主题应用扩展的区块（推荐） #

主题应用扩展允许你向集合页的产品卡片中注入自定义区块，此时能直接访问当前产品的product对象，完全在服务器端处理逻辑：

1. 在你的Shopify应用中创建一个主题应用扩展区块，目标位置选择集合页的「产品卡片」（Product Card）区域；
2. 在区块的Liquid代码中编写价格逻辑：

{% comment %} 自定义产品价格显示逻辑 {% endcomment %}
<div class="custom-product-price">
  {%- if product.tags contains 'mytags' -%}
    <!-- 这里替换成你的自定义价格代码，比如特殊标识、自定义格式 -->
    <span class="tagged-price">专属优惠价</span>
  {%- else -%}
    {{ product.price | money | strip_html }}
  {%- endif -%}
</div>

3. 在主题编辑器中，将默认的产品价格元素隐藏，或者直接用这个自定义区块替换默认价格的位置。

方案2：客户端JS读取产品数据（适合无法修改区块位置的场景） #

如果你的主题在产品卡片中嵌入了产品的JSON数据（很多主题会通过data-*属性输出），可以直接用JS读取每个产品的标签并修改价格：
首先确保主题的产品卡片有类似这样的结构（如果没有，可以通过主题应用扩展的区块注入产品JSON）：

<div class="product-card" data-product='{{ product | json }}'>
  <!-- 产品卡片原有内容 -->
  <div class="product-card__price">{{ product.price | money }}</div>
</div>

然后编写客户端JS：

// 遍历所有产品卡片
document.querySelectorAll('.product-card').forEach(card => {
  // 解析产品数据
  const productData = JSON.parse(card.dataset.product);
  // 找到价格元素
  const priceEl = card.querySelector('.product-card__price');
  
  if (productData.tags.includes('mytags')) {
    // 替换成自定义价格显示
    priceEl.innerHTML = '<span class="custom-price">自定义价格内容</span>';
  }
});

为什么之前的方案在集合页失效？ #

集合页的产品网格是服务器端循环渲染的，每个产品的product变量仅存在于循环的服务器端上下文。当你的客户端JS运行时，页面已经渲染完成，插入的Liquid代码无法被Shopify服务器解析，自然无法读取产品标签。

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