collection

collection 模板用于渲染 collection 页面，会列出一个 collection 里面的所有产品。

小提示

可以参考 Dawn 主题里的 collection 模板、它的 banner section，还有 product grid section 来了解一个示例实现。

位置

collection 模板位于主题的 templates 目录下：

└── theme
    ├── layout
    ├── templates
    |   ...
    |   ├── collection.json
    |   ...
    ...

内容

你需要在 collection 模板或者它里面的某个 section 里引入 collection object。

collection object

你可以通过 Liquid 的 collection object 来展示 collection 的详细信息。

使用方法

在使用 collection 模板的时候，最好熟悉以下内容：

• 筛选 collections
• 给 collection 中的产品排序
• 分页展示产品

小提示

如果你用的是 JSON 模板的话，那么所有的 HTML 或 Liquid 代码都必须放到 section 里面，并且由模板引用。

筛选 collections

你可以用 storefront filtering 来把 collection 细分成更小的产品集合。

给 collection 中的产品排序

你可以通过在 collection 页面 URL 上加 sort_by 参数，来控制产品的排序方式，比如：

https://my-store.myshopify.com/collections/frontpage?sort_by=price-descending

通过 collection object，你可以访问到这些内容：

• 用 sort_options 属性拿到可选的排序方式。
• 用 sort_by 属性拿到当前选中的排序方式（如果有的话）。
• 用 default_sort_by 属性拿到默认的排序方式。

你可以把这些排序选项输出到一个 <select> 元素里，让顾客自己选择，然后根据当前选中项和默认值初始化这个下拉框。当顾客换了一个排序方式之后，你可以用 JavaScript 把新的参数加到 URL 上，并刷新页面。

下面是一个简单的排序选择器和配套的 JavaScript 示例：

<select id="sort-by">
  {% assign sort_by = collection.sort_by | default: collection.default_sort_by %}
  {% for option in collection.sort_options %}
    <option value="{{ option.value }}" {% if option.value == sort_by %}selected="selected"{% endif %}>
      {{ option.name }}
    </option>
  {% endfor %}
</select>
<script>
  Shopify.queryParams = {};
  // 保留已有的查询参数
  if (location.search.length) {
    var params = location.search.substr(1).split('&');
    for (var i = 0; i < params.length; i++) {
      var keyValue = params[i].split('=');
      if (keyValue.length) {
        Shopify.queryParams[decodeURIComponent(keyValue[0])] = decodeURIComponent(keyValue[1]);
      }
    }
  }
  // 在下拉框变化时更新 sort_by 参数
  document.querySelector('#sort-by').addEventListener('change', function(e) {
    var value = e.target.value;
    Shopify.queryParams.sort_by = value;
    location.search = new URLSearchParams(Shopify.queryParams).toString();
  });
</script>

分页展示产品

可以通过 collection object 的 products 属性访问到产品，每页最多显示 50 个。所以你应该给 collection 的产品 做分页，保证所有产品都能被浏览到：

{% paginate collection.products by 20 %}
  {% for product in collection.products %}
    <!-- 产品信息 -->
  {% endfor %}
  {{ paginate | default_pagination }}
{% endpaginate %}