自作セクション作成③セクションにブロックを追加する

自作セクションにブロックを追加して、カスタマイズ画面からより柔軟な設定を行えるようにしましょう。

Shopifyのブロック（blocks）

ブロックとは

Shopifyのテーマブロックは、セクション内で追加、削除、再配置ができるコンテンツのモジュールです。 「カスタマイズ画面から、セクションごとに使えるパーツ」をイメージしていただくと分かりやすいかもしれません。

下図で赤線で囲った部分は全てブロックです。 カスタマイズ画面で、多くの文字や画像・コレクションを表示させているのはブロックと言っても過言ではないでしょう。

テーマディレクトリでブロックがある場所は？

ブロックはセクションの中で設定されています。 テーマの構造としても、ブロック用のディレクトリやファイルはありません。

セクションファイルの中にコードを書くことで、ブロックは追加されます。 どのセクションでも使える共通のブロック、というものはありません。 セクション毎、個別にブロックを作成する必要があります。

Shopifyテーマのブロックを自作する

前回作成したセクション（lesson1.liquid）にブロックを追加しましょう。

1.セクションにブロックを追加する基本書式

ブロックはschemaタグ内にblocks属性（キー）を記述することで追加できます。

ブロックは複数追加もできますが、1つのブロックごとに{ }で囲う必要があります。 { }ごとに、それぞれ必須項目である name と type を重複無く定義しましょう。

以下は必須項目のみ、ブロックを1つ作成する最小限の記述です。

このコードをschemaタグ内に記述すればブロックができます。 settings: []の後に書いてみましょう。区切りの,（カンマ）の入れ忘れに注意してください。

lesson1.liquid - schema全体

{% schema %}
  {
    "name": "lesson1 Section",
    "settings": [
      {
        "type": "text" ,
        "id": "s-heading" ,
        "label": "セクション見出し" ,
        "default":  "HELLO!" ,
        "info" : "見出しを入力してください"
      }
    ] ,
    "blocks": [
      {
        "name": "ブロック1",
        "type": "block1"
      }
    ] ,
    "presets": [
      {
        "name": "lesson1"
      }
    ]
  }
{% endschema %}

2.ブロックsettingsを追加する

それぞれのブロックごとにsettingsを記述し、カスタマイズ画面での変更が出来るようにすることも出来ます。 ブロックのsettingsも、セクション全体のsettingsと書き方はほぼ同じです。

必須要素である「type」「id」「label」の3つと、デフォルト値を設定できる「default」を書いてみましょう。

"blocks": [
    {
        "name": "ブロック1",
        "type": "block1",
        "settings": [
            {
                "type": "text",
                "id": "block1-1",
                "label": "確認用テキスト",
                "default":  "block1の確認用テキスト"
            }
        ]
    }
] ,

ちょっと紛らわしい type の値

下図、オレンジ色の線で囲ったtype。 これはブロックのタイプ、識別子として使用できる文字列を設定します。

識別子とは、このブロックを見分けるための名前のようなもの。 ですので、分かりやすい名前を自分で好きに付けることが出来ます。

反対に、青線で囲ったsettings内で設定するtype。 こちらは、テーマのカスタマイズ画面で「何を使って入力・設定をするか」を指定します。

テキストフィールドやカラーピッカーなど、Shopifyがあらかじめ用意してくれているパーツを呼び出すイメージです。 Shopifyが用意したパーツを使うので、値も決められたワードの中から選びます。

3.ブロック表示のliquidタグを書く

schemaでブロックを作ったら、セクション内に表示させるコードを書きましょう。

ブロックの情報を取り出す時は、Liquidのfor文を使います。 for文は、設定した条件に当てはまるものがある間、実行を繰り返すという構文です。繰り返し処理、ループ処理、なんて言い方もします。

以下が、ブロックを表示するためのfor文です。

{% for block in section.blocks %}
    // ここに、ブロックがあるときの処理を書く
{% endfor %} 

実際にカスタマイズ画面からブロックを追加すると、上図の意味が分かりやすいです。 ですので、とりあえず以下のブロック出力コードをh2タグの下に書いてみましょう。

{% for block in section.blocks %}
    {{ block.settings.block1-1 }}
{% endfor %} 

コードを上書き保存。

「テーマをカスタマイズ」からカスタマイズ画面を開きます。

作成したブロック1が追加できるようになっています。 追加してみましょう。

もう一つ、ブロック1を追加します。 今度はサイドバーを使って、テキストを打ち替えてみます。

上図のように、プレビューにも反映されていれば成功です。

for文の仕組みを確認しよう

コードとブラウザでの表示を見ながら、for文をもう一度見てみましょう。

for ~ endfor間の処理を終えると、配列にまだアイテムがあるか確認します。

他にもアイテムがある場合は、それを使って先ほどと同じ処理を行います 今回の場合は2個めの「ブロック1」で設定された、block1-1を出力しています。

取り出せるアイテムがなくなるまで、同じ処理を繰り返し行います。

Shopifyのブロックは、カスタマイズ画面で好きに設定できます。 人（ストア）によって1回も使わないこともあれば、同じブロックが複数回使われることもあります。 臨機応変に対応できるように、こうした書き方をしているわけです。