コレクションページの表示カスタマイズ

前回作成したコレクション/コレクションテンプレートを使って、コレクションページの表示をカスタマイズします。

コレクションのテンプレートを見てみる

テーマのカスタマイズをする前に、Dawnデフォルトのコレクションテンプレート、テンプレートで使われているセクションを見てみましょう。

コレクションの中から、新しく作成した「category」を選びます。

作成しただけで手を加えていないので、現在のcategory（collection.category.json）は、デフォルトのコレクション（collection.json）の複製状態です。

作りたいレイアウトと見比べてみると、特徴やカスタマイズ箇所が見えてきます。

カスタマイズが必要なのは、コレクションバナーのセクションですね。

なお、コレクションバナーのセクションが削除できないのは、セクションのschemaに"presets": []の記述がないためです。presetsが書かれていないセクションは、カスタマイズ画面からの追加・削除ができません。

カテゴリー表示専用のセクションを作成

今回は学習も兼ねて“コレクションバナー”と同様の、カスタマイズ画面からの追加・削除ができないセクションを作ってみましょう。カテゴリーの役割を果たすコレクションテンプレートでのみ使えるセクションを作るイメージです。

1.セクションファイルの新規作成

“コレクションバナー”の代わりに表示するセクションを新規作成します。

コード編集画面から、新しいセクションを追加。 ファイル名は main-collection-categorytop.liquid とします。

とりあえず、nameだけ分かりやすいよう変更して保存します。

2.テンプレートファイルから読み込む

最初に作成した、カテゴリーに利用するためのコレクションのテンプレートファル（collection.category.json）を開きます。

赤い線を引いた部分で、読み込むセクションファイルを指定しています。 main-collection-bannerからmain-collection-categorytopに変更しましょう。 青い線で囲った部分は削除してください。

　↓

カスタマイズ画面を開いて、読み込むセクションが切り替わっているか確認します。

商品グリッドの上が、自作した「トップセクション」になっていれば成功。 あとはトップセクション、 main-collection-categorytop.liquidの中身を作っていくだけです。

3.セクションを作り込む

カテゴリー表示用コレクションの、ページトップ部分になるセクション（トップセクション/main-collection-categorytop.liquid）を作り込んでいきましょう。

3-1.ざっくりと表示を作る

セクションのデザイン、Liquidを使って出力する必要がある情報を整理します。

今回の場合、必要な情報とLiquidのコードは以下3つです。 * コレクションの画像 → {{ collection.image }} * コレクションのタイトル → {{ collection.title }} * コレクションの説明 → {{ collection.description }}

HTML、CSSと組み合わせて書いてみましょう。

collection.imageは、imgタグで書き出すようにimg_urlフィルターを使います。 collection.titleは、escapeフィルターを使ってエスケープ処理をします。 これは特殊文字が含まれていても、タグとして認識されないようにするためです。

main-collection-categorytop.liquid

<div class="collection-categorytop">
  <img src="{{ collection.image | img_url: 'master' }}">
  <div class="collection-categorytop__inner page-width">
    <h1>
      {{ collection.title | escape }}
    </h1>
    {{ collection.description }}
  </div>
</div>

style.css

/* =============================================
/  Collection --- category
/============================================ */
.collection-categorytop{
  height: 35vh;
  min-height: 380px;
  position: relative;
  overflow: hidden;
}

.collection-categorytop img,
.collection-categorytop__inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height: auto;
}

.collection-categorytop img{
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0.65;
}

.collection-categorytop__inner{
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

保存して、コレクションページの表示を確認してください。

大体イメージしたレイアウトになっています。 ただ、スマホ幅だとタイトルが消えてしまっていますね。

これは、設定した高さの中に、説明文が収まらないほど長いことが原因。 説明文表示の対応を考えてみましょう。

3-2.説明の表示設定

説明は、どこまでも長い文を打ち込めます。 更に、画像やテーブルなんかも挿入できてしまいます。

ですので、以下２つの設定を追加して対応します。

1. 画像上の場合は、レイアウトが崩れないよう文字数を制限する
2. 図や表を入れて説明を作り込みたい場合、画像下に表示する

【文字制限】

まず、1つめ。説明の文字数制限を作りましょう。 Liquidのtruncateフィルターを使って、最大の文字数を設定します。

合わせてstrip_htmlという、文字列からすべてのHTMLタグを削除するフィルターも同時に記述します。これはHTMLタグが含まれていると、文字数カウントでエラーになる可能性があるためです。

{{ collection.description | strip_html | truncate: 170 }}

上書き保存して、表示を確認してみましょう。 スマホ幅でも、タイトル+説明文が見きれず表示できていればOKです。

truncateの文字数やトップ部分の高さは、表示を見ながら調整してください。

【説明の表示位置を選択可能にする】

次に、説明の表示位置をカスタマイズ画面から選択できるようにします。 schemaで選択肢を作ります。

main-collection-categorytop.liquid

{% schema %}
  {
    "name": "トップセクション",
    "settings": [
      {
        "type": "paragraph",
        "content": "説明文が長い時、文字以外を使用している場合は画像下がおすすめです。"
      },
      {
        "type": "radio",
        "id": "desc_position",
        "label": "説明の表示位置",
        "options": [
          {
            "value": "top",
            "label": "画像と重ねる"
          },
          {
            "value": "bottom",
            "label": "画像下に表示"
          },
          {
            "value": "none",
            "label": "説明を表示しない"
          }
        ],
        "default": "top"
      }
    ]
  }
{% endschema %}

作った選択肢に応じて、説明の表示位置を変えましょう。 if文でvalueの値が〇〇ならという条件分岐を作ります。

画像と重ねて表示しない場合、字数が多くても、画像などがあっても問題ありません。 画像下表示部分はフィルターを使わず、単に {{ collection.description }} と書きます。

main-collection-categorytop.liquid

<div class="collection-categorytop">
  <img src="{{ collection.image | img_url: 'master' }}">
  <div class="collection-categorytop__inner page-width">
    <h1>
      {{ collection.title | escape }}
    </h1>
    {%- if section.settings.desc_position == 'top' -%}
      {{ collection.description | strip_html | truncate: 170 }}
    {%- endif -%}
  </div>
</div>
<div class="page-width">
  {%- if section.settings.desc_position == 'bottom' -%}
    {{ collection.description }}
  {%- endif -%}
</div>

コードを上書き保存してください。

4.表示を確認

カスタマイズ画面で動作を確認します。 選択に応じて、説明の表示場所が切り替われば成功です！

商品画像の高さが揃わない時は…

商品グリッドセクションの設定を変更すると、高さを揃えられます。 デフォルトテンプレートでも、新しく作ったcategoryのテンプレートでも、どちらでも同じ設定になります。

下図、赤い線で囲った“画像比”という設定項目を変更します。 「画像に合わせる」以外に変更してみてください。

【画像比：画像に合わせる の場合】

　　↓

【画像比：ボートレート の場合】