list-collections

list-collections 模板用于渲染 collection 列表页面，这个页面会列出商店的所有 collections。这个页面位于商店的 /collections URL 下。

提示

可以参考 Dawn 主题中的 list-collections template 以及它的 main section 来查看示例实现。

位置

list-collections 模板位于主题的 templates 目录下：

└── theme
    ├── layout
    ├── templates
    |   ...
    |   ├── list-collections.json
    |   ...
    ...

内容

你可以在你的 list-collections 模板或模板中的 section 中包含以下内容：

• The collections object

The collections object

你可以通过 Liquid 的 collections object 来展示商店的 collections。

用法

在使用 list-collections 模板时，你应该了解以下内容：

• Changing the order of collections
• Setting a fallback image for collection images

提示

如果你使用的是 JSON 模板，那么所有 HTML 或 Liquid 代码需要包含在模板引用的 section 中。

Change the order of collections

通常，这个模板会通过以下循环来输出 collections，并按字母顺序显示：

{% for collection in collections %}
  <!-- collection info -->
{% endfor %}

如果你想改变顺序，可以创建一个 menu，以你想要的顺序承载 collections，然后循环输出 menu items。如果使用这种方法，你应该创建一个 setting，让商家选择要使用的菜单。你可以通过 Liquid 的 linklist object 访问菜单，基于 link.type 过滤 menu items，只保留 collections，并通过 link.object 获取 collection 的信息。

比如：

{% for link in settings.collection_list_menu.links %}
  {% if link.type == 'collection_link' %}
    {% assign collection = link.object %}
    <!-- collection info -->
  {% endif %}
{% endfor %}

Collection image fallback

你应该为 collection 没有设置 collection image 的情况准备一个备用方案。比如，可以使用该 collection 中第一个产品的图片：

{% if collection.image %}
  {{ collection.image | image_url: width: 450, height: 450 | image_tag: collection.image.alt }}
{% else %}
  {% assign alt = collection.title | escape %}
  {{ collection.products.first.image | image_url: width: 450, height: 450 | image_tag: alt }}
{% endif %}