Shopify开发：JS实现过滤剔除Price前缀商品标签的方法

方案1：纯JS修改（改动最小，无需调整Liquid模板） #

直接在JS侧对product.tags数组做过滤，剔除价格类标签后再拼接渲染即可，替换原有quickview相关代码为如下内容：

// 过滤掉包含Price的标签，和你详情页Liquid逻辑完全对齐
var chocolatesMenu = product.tags.filter(function(tag) {
  return !tag.includes('Price');
});
// 如果要严格匹配「不以Price开头」的规则，把上面判断换成 !tag.startsWith('Price') 即可
// 兼容大小写的话可以写成 !tag.toLowerCase().startsWith('price')
var chocolatesMenuSpaced = chocolatesMenu.join(', ');
quickview.find(".proBoxInfo .quickViewSKU").append("<label>Chocolates:</label> " + chocolatesMenuSpaced);

如果站点需要兼容IE等不支持ES6箭头函数的老浏览器，用上面写法的普通函数即可，不需要调整其他逻辑。

方案2：Liquid+JS结合实现（推荐，维护成本更低） #

现在你在商品详情页、集合页quickview分别写了两套标签过滤逻辑，后续如果调整过滤规则（比如新增其他需要排除的功能性标签），很容易出现改了一处漏了另一处、两端展示不一致的问题。更合理的做法是在Liquid层输出JS要用的商品数据时，就提前完成标签过滤，从数据源层面剔除不需要的价格标签，JS侧直接用处理好的数据即可，不用重复写过滤逻辑。
具体实现：在集合页给quickview输出product对象的Liquid模板位置，不要直接输出原始tags字段，新增一个提前过滤好的巧克力标签字段：

<script>
var product = {
  // 保留你原有其他product字段，比如id、title、price等
  // 原始tags字段如果其他功能要用可以保留，新增专门给巧克力菜单用的过滤后字段
  chocolateTags: [
    {% for tag in product.tags %}
      {% unless tag contains 'Price' %}
        "{{ tag | escape }}"{% unless forloop.last %},{% endunless %}
      {% endunless %}
    {% endfor %}
  ]
}
</script>

之后JS侧直接读取预处理好的字段即可，不需要再做过滤：

var chocolatesMenuSpaced = product.chocolateTags.join(', ');
quickview.find(".proBoxInfo .quickViewSKU").append("<label>Chocolates:</label> " + chocolatesMenuSpaced);

这种写法的过滤规则和商品详情页完全同源，后续调整规则只需要改Liquid里的判断条件，能保证全站标签展示逻辑一致。

内容的提问来源于stack exchange，提问作者I AM mw