[{"value":"位置","id":"位置","hLevel":2,"level":1},{"value":"内容","id":"内容","hLevel":2,"level":1},{"value":"collection 对象","id":"collection-对象","hLevel":2,"level":1},{"value":"用法","id":"用法","hLevel":2,"level":1},{"value":"过滤商品分类","id":"过滤商品分类","hLevel":2,"level":1},{"value":"对分类中的商品进行排序","id":"对分类中的商品进行排序","hLevel":2,"level":1},{"value":"对产品进行分页","id":"对产品进行分页","hLevel":2,"level":1}]

collection

collection 模板渲染商品分类页面，该页面列出了商品分类中的所有商品。

位置

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

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

内容

你可以将 collection 对象包含在 collection 模板中或模板内的某个 section 中。

collection 对象

通过访问 Handlebars collection 对象，你可以展示商品分类的详细信息。

用法

在使用 collection 模板时，你应该熟悉以下内容：

过滤商品分类
对分类中的商品进行排序
对产品进行分页

提示

如果你使用的是 JSON templates，那么任何 HTML 或 Handlebars 代码都需要包含在模板引用的 section 中。

过滤商品分类

你可以使用店面过滤功能在商品分类页面上对商品进行筛选，支持包含库存、价格和属性在内的筛选器。

对分类中的商品进行排序

你可以使用商品分类页面上的 sort_by URL 参数来选择商品的排序方式：

https://my-store.myshopline.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" (default collection.sort_by collection.default_sort_by) }}
  {{#for collection.sort_options as |option|}}
    <option value="{{ option.value }}" {{#if option.value == sort_by }}selected="selected"{{/if}}>
      {{ option.name }}
    </option>
  {{/for}}
</select>
<script>
  let queryParams = {};
  // Preserve existing query parameters
  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) {
        queryParams[decodeURIComponent(keyValue[0])] = decodeURIComponent(keyValue[1]);
      }
    }
  }
  // Update sort_by query parameter on select change
  document.querySelector('#sort-by').addEventListener('change', function(e) {
    var value = e.target.value;
    queryParams.sort_by = value;
    location.search = new URLSearchParams(queryParams).toString();
  });
</script>

对产品进行分页

通过 collection 对象的 products 属性可以访问商品，并且每页有 50 个商品的限制。因此，你应该对商品分类的商品进行分页，以确保所有商品都可以被访问：

{{#paginate collection.products by=10}}
  {{#for collection.products as |product|}}
    {{ product.title }}
  {{/for}}
  
  <ul class="pagination">
    <li class="paginate-previous">
      <a href="{{ paginate.previous.url }}">Previous</a>
    </li>
    <li class="pagination-page">
      <span>{{ paginate.current_page }}/{{ paginate.pages }}</span>
    </li>
    <li class="paginate-next">
      <a href="{{ paginate.next.url }}">Next</a>
    </li>
  </ul>
{{/paginate}}