如何用Liquid判断产品元字段存在性并控制Div显示？

问题分析 #

你的代码逻辑是通过判断元字段值是否为空来控制容器显示，但当元字段未创建（或元字段对象本身不存在）时，product.metafields.energielabel.energie.value会返回nil，直接和blank比较不符合Liquid的判断逻辑，导致变量display无法被正确重定义。

修复方案 #

修改判断逻辑，先处理元字段的空值情况，同时优化图片标签的渲染（避免无效请求）：

{% assign display = "inline-block" %}
{% assign energielabel_value = product.metafields.energielabel.energie.value | default: "" %}

{% if energielabel_value == blank %}
  {% assign display = "none" %}
{% endif %}

<div id="energielabel-container">
  {% if energielabel_value != blank %}
    <img class="label" src="https://cdn.shopify.com/s/files/1/0619/8034/4516/{{ energielabel_value }}" />
  {% endif %}
</div>

<style>
#energielabel-container {
  width: 80px;
  display: {{ display }};
}
</style>

关键改动说明 #

1. 使用default: ""过滤器：把可能的nil值转为空字符串，确保后续的blank判断一致有效。
2. 增加图片渲染条件：只有当元字段值存在时才生成<img>标签，避免浏览器请求无效的图片链接。
3. 保持原有的显示逻辑：默认显示容器，仅在元字段值为空时隐藏。

另一种更严谨的判断方式 #

如果需要同时判断元字段对象是否存在，可以用以下条件：

{% unless product.metafields.energielabel.energie and product.metafields.energielabel.energie.value != blank %}
  {% assign display = "none" %}
{% endunless %}

这个逻辑会同时检查元字段对象是否存在，以及其值是否非空，进一步避免潜在的判断误差。

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