Shopify开发：如何在商品页仅展示Top Level为Yes的集合信息？

我有一个名为「Top Level」的Collection metafield，它是单值文本字段，预设选项为「yes」。需求为：若商品所属集合的该metafield值选择「yes」，则在对应商品页显示该集合的标题与图片；若未选择「yes」，则不显示该集合的相关信息。例如，若「Ranch Dip」商品属于「Dips」集合，且「Dips」集合的「Top Level」metafield值为「yes」，则需在「Ranch Dip」商品页展示「Dips」的标题和图片。

我尝试的代码 #

1. 此代码可成功显示所有关联集合的元字段、标题及图片，但会展示所有集合，无论「Top Level」值是否为「yes」或空白：

<div id="productcategory" class="productblock">
    {% for p_col in product.collections %}
      <a href="{{ p_col.url }}">{{ p_col.title }}</a>
      <a href="{{ p_col.url }}"><img src="{{ p_col.image | image_url }}"></a>
      {{ p_col.metafields.custom.top_level }}
    {% endfor %}
</div>

2. 此代码完全隐藏了商品页上的元字段和标题，无法实现仅展示「Top Level」非空白集合的需求：

{% if p_col.metafields.custom.top_level != blank %}
<div id="productcategory" class="productblock">
    {% for p_col in product.collections %}
      <a href="{{ p_col.url }}">{{ p_col.title }}</a>
      <a href="{{ p_col.url }}"><img src="{{ p_col.image | image_url }}"></a>
      {{ p_col.metafields.custom.top_level }}
    {% endfor %}
</div>
{%- endif -%}

3. 此代码也无法正常工作，原本期望匹配「Top Level」值为「yes」的集合并展示其信息，但页面无任何内容显示：

{% if p_col.metafields.custom.top_level == "yes" %}
<div id="productcategory" class="productblock">
  <h2>product category image goes here...</h2>
    {% for p_col in product.collections %}
      <a href="{{ p_col.url }}">{{ p_col.title }}</a>
      <a href="{{ p_col.url }}"><img src="{{ p_col.image | image_url }}"></a>
      {{ p_col.metafields.custom.top_level }}
    {% endfor %}
</div>
{%- endif -%}

解决方案 #

你的问题在于把if判断放在了for循环外面，此时p_col变量还未定义，自然无法触发判断逻辑。正确的做法是把if判断放到for循环内部，逐个检查每个集合的元字段值，只渲染符合条件的集合：

<div id="productcategory" class="productblock">
    {% for p_col in product.collections %}
        {% if p_col.metafields.custom.top_level == "yes" %}
            <a href="{{ p_col.url }}">{{ p_col.title }}</a>
            <a href="{{ p_col.url }}"><img src="{{ p_col.image | image_url }}"></a>
        {% endif %}
    {% endfor %}
</div>

如果需要确保只有当存在符合条件的集合时才渲染整个productcategory容器，可以先过滤出符合条件的集合，再判断是否渲染：

{% assign top_level_collections = product.collections | where: "metafields.custom.top_level", "yes" %}
{% if top_level_collections.size > 0 %}
<div id="productcategory" class="productblock">
    {% for p_col in top_level_collections %}
        <a href="{{ p_col.url }}">{{ p_col.title }}</a>
        <a href="{{ p_col.url }}"><img src="{{ p_col.image | image_url }}"></a>
    {% endfor %}
</div>
{% endif %}

第一种写法会遍历所有集合，只输出符合条件的内容；第二种写法先筛选出符合条件的集合，再判断是否渲染容器，避免出现空的div标签。

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