如何在Shopify购物车商品中独立显示对应Metafield

问题核心 #

使用{{ product.metafields.custom.reviews }}在购物车显示商品自定义元字段时，出现两个异常：

• 从值为“ddddddd”的商品页打开购物车，所有商品都显示“ddddddd”
• 从首页/集合页打开购物车，元字段完全不显示

问题原因 #

1. 直接调用product对象时，在商品页面会绑定当前页面的商品，而非购物车项对应的商品，导致所有购物车项复用同一元字段值
2. 在首页/集合页，product对象未初始化，因此无法读取元字段

修复步骤 #

1. 修正购物车模板代码 #

将购物车中遍历商品项的代码，从直接调用product改为调用line_item.product，确保每个购物车项关联自身对应的商品元字段。示例代码：

{% for line_item in cart.items %}
  <div class="cart-item-container">
    <span>{{ line_item.product.title }}</span>
    <!-- 显示对应商品的自定义元字段 -->
    {% if line_item.product.metafields.custom.reviews %}
      <p>评价：{{ line_item.product.metafields.custom.reviews }}</p>
    {% endif %}
  </div>
{% endfor %}

2. 检查元字段权限 #

进入Shopify后台的设置 > 元字段 > 产品，找到custom.reviews元字段，确认其“可见性”设置为商店front end和API，确保前端能正常读取该字段。

3. 清除主题缓存 #

在Shopify后台的主题编辑器右上角，点击预览按钮旁的下拉菜单，选择“清除缓存”，避免旧代码缓存导致的异常。

验证效果 #

修复后，无论从哪个页面打开购物车，每个商品都会显示自身对应的custom.reviews元字段值：

正确效果截图：
各商品显示独立元字段

修正后代码截图：
购物车模板代码示例

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