Shopifyでコレクションの一覧ページを作成する

# この記事の内容

Shopifyで**すべてのコレクション**をまとめて**一覧表示**する方法を解説します。
最後に、[おまけ](#おまけ) で、**表示するコレクションを選ぶ**方法も解説しています。

# 完成イメージ

![スクリーンショット 2021-04-11 12.27.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529064/4f7f8f5b-e8c9-d984-547c-8064e17dce06.png)

# すべてのコレクションをまとめて一覧表示する（流れ）

- テンプレートを作成
- 作成したテンプレートを用いてページを作成
- ページへの導線を設定

# すべてのコレクションをまとめて一覧表示する（詳細）

## テンプレートを作成

### 管理画面、左側サイドバーの「販売チャネル」から「**オンラインショップ**」をクリック

### テーマ > ライブテーマ > 「アクション」から「**コードを編集する**」を選択

![スクリーンショット 2021-04-10 11.53.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529064/5abfacc9-4da0-5692-391f-a0fddb7b7e14.png)

### `/Templates`フォルダ内の「**新しいtemplate**」をクリック

![スクリーンショット 2021-04-11 12.21.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529064/2be57e3e-8ba5-77b9-5c8e-0d8119bb650e.png)


### 目的：「**Page**」を選択、「名前」に適宜ファイル名を設定（この記事では`collections`とします）

![スクリーンショット 2021-04-10 11.51.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529064/10593cc7-18ea-40b6-1e50-16478d4afe39.png)

### 作成されたファイル(`page.collections.liquid`)を編集

```page.collections.liquid
<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
      <div class="section-header text-center">
        <h1>{{ page.title }}</h1>
      </div>

      <div class="rte">
        {{ page.content }}
      </div>

      <div>
        <ul class="grid grid--uniform">
          {% for collection in collections %}
            <li class="grid__item small--one-half medium-up--one-quarter">
              {% include 'collection-grid-item', collection: collection %}
            </li>
          {% endfor %}
        </ul>
      </div>

    </div>
  </div>
</div>
```

これでテンプレートが作成できました。

## 作成されたテンプレートを用いてページを作成

- 販売チャネル > オンラインショップ > ページ に移動して「**ページを追加**」をクリック
- **Title**を設定（この記事では「すべてのコレクション」とします。）
- テンプレートから`page.collections`を選択

これでコレクションの一覧ページが作成できました。

## ページへの導線を設定
あとはメニューに**導線を追加**するなどして完成です。
説明は割愛します。

![スクリーンショット 2021-04-11 12.27.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529064/b90d1ae1-9b85-88c9-e9bd-4721306c017c.png)

# おまけ
## 表示するコレクションを管理者が選択できるようにする

テンプレートを以下のようにすれば、**表示するコレクションを選ぶ**ことができます。

```page.collections.liquid
<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
      <div class="section-header text-center">
        <h1>{{ page.title }}</h1>
      </div>

      {%- assign collection_titles_base = '表示したいコレクションのタイトル1,その2,その3,その4' -%}
      {%- assign collection_titles = collection_titles_base | split: "," -%}

      <div>
        <ul class="grid grid--uniform">
          {% for collection in collections %}
            {% if collection_titles contains collection.title %}
              <li class="grid__item small--one-half medium-up--one-quarter">
                {% include 'collection-grid-item', collection: collection %}
              </li>
            {% endif %}
          {% endfor %}
        </ul>
      </div>

    </div>
  </div>
</div>

```

8行目は、**表示したいコレクションのタイトルを`,`で区切って**書いてください。

liquidファイルでは配列を宣言できないので、このように一手間かけて実装する必要がありました。

ここでは、表示したいコレクションのタイトルを**ハードコーディング**していますが、
ページ作成画面の**「コンテンツ」属性を用いて、動的にコレクションを選ぶ**こともできます。

## 表示するコレクションを動的に選ぶ

ページ作成画面の「**コンテンツ**」欄と、**テンプレート**を、以下のようにします。

### 「コンテンツ」欄

ページ設定画面の「コンテンツ」欄に、**表示したいコレクションのタイトルを`,`で区切って**書いてください。

![スクリーンショット 2021-04-14 20.24.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529064/d62bb1ac-460c-f0da-12b9-ccf6b5451175.png)

### テンプレート

```page.collections.liquid
<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
      <div class="section-header text-center">
        <h1>{{ page.title }}</h1>
      </div>

      {%- assign collection_titles = page.content | split: "," -%}

      <div>
        <ul class="grid grid--uniform">
          {% for collection in collections %}
            {%- assign collection_title = collection.title | escape -%}
            {% if collection_titles contains collection_title %}
              <li class="grid__item small--one-half medium-up--one-quarter">
                {% include 'collection-grid-item', collection: collection %}
              </li>
            {% endif %}
          {% endfor %}
        </ul>
      </div>

    </div>
  </div>
</div>

```

13行目で `collection.title` を `escape` したのは、
コンテンツ欄はhtmlとして認識されるため、コレクションのタイトルに特殊文字が入っていると
エスケープされるためです。


# おわりに
この記事が少しでもいいなと思ったら**LGTM**や**ストック**よろしくお願いします。
質問があればコメントしてください。

[Ciimaオンラインアートショップ](https://ciima.shop) ではShopifyを利用してアート作品の販売を行っています。
そちらもチェックしていただけると嬉しいです。

# 参考URL

https://web-guided.com/1240/

https://shopify.dev/docs/themes/liquid/reference/objects/collection

https://shopify.github.io/liquid/basics/operators/

https://shopify.github.io/liquid/filters/escape/