Shopify内置JSON类型元字段循环遍历失效问题求助

咱们先揪出代码里的两个小疏忽，就能搞定这个循环失效的问题了：

问题1：没找对数组的层级 #

你设置的元字段值是一个包裹着slides数组的对象，不是直接的数组。之前的代码直接遍历整个元字段值，相当于在遍历这个对象的键（也就是slides这个字符串），根本没碰到底层的轮播项数组。

问题2：循环内部变量名搞混了 #

你在循环里写了slides.image、slides.title，但实际上循环的每一项是你定义的slider（单数），slides是数组的名字，不是当前正在遍历的单个轮播项。

修正后的Liquid代码 #

{% if product.metafields.spec.slider != blank %}
<div class="grid">
  {% assign slider_data = product.metafields.spec.slider %}
  {% for slide in slider_data.slides %}
  <div class="grid__item">
    <img src="{{ slide.image }}" alt="{{ slide.title }}" />
    <h4>{{ slide.title }}</h4>
    <p>{{ slide.description }}</p>
  </div>
  {% endfor %}
</div>
{% endif %}

改动说明 #

1. 把元字段值赋值给slider_data，更清晰地表示这是包含数组的完整对象；
2. 遍历的时候明确指向slider_data.slides这个数组，这才是你要循环的轮播项集合；
3. 循环项改用slide（单数），内部变量也对应改成slide.image、slide.title，和循环项保持一致；
4. 给图片加上了和标题对应的alt属性，更符合SEO规范。

这样修改后，就能正常遍历JSON元字段里的每一个轮播项了。

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