自作セクション作成④複数ブロックの作成と使い分け

セクション内で使用するブロック。 カスタマイズ画面で複数のブロックを使えるようにしたい、複数の設定項目を作りたい、という場合もあります。

例えば、見出しと文章がセットで設定できるブロック、任意の画像とテキストが設定できるブロック、と複数のブロックがあれば、カスタマイズ画面から出来ることもかなり増えますね。

２つ目のブロックを作成する

前回のレッスンで、基本的なブロックの作成・出力はできました。 今回は、同じセクション（lesson1.liquid）の中に、もう１つブロックを追加してみましょう。

下図のように、画像と文章を2：3の割合で横並びに表示させられるブロックを作ります。 画像と文章は、どちらもカスタマイズ画面から設定・変更可能にします。

ブロックを作成する

使えるブロックを増やしたい時は、blocks内のオブジェクトを追加します。 { } で囲まれている部分ですね。

区切りの,も忘れずに入れてください。

2つめのブロックにもsettigsを書いていきましょう。 typeの値には、画像の選択・挿入ができる「image_picker」を指定してください。 id と label は分かりやすいワードを設定すればOKです。

"blocks": [
  {
    "name": "ブロック1",
    "type": "block1",
    "settings": [
      {
        "type": "text",
        "id": "block1-1",
        "label": "確認用テキスト",
        "default":  "block1の確認用テキスト"
      }
    ]
  } ,
  {
    "name": "ブロック2",
    "type": "block2",
    "settings": [
      {
        "type": "image_picker",
        "id": "block2-img",
        "label": "画像を選択"
      }
    ]
  }
] ,

まだ出力部分を書いていませんが、テーマのカスタマイズ画面を確認してみましょう。 ブロック2を追加でき、サイドバーで「画像を選択」出来るようになっていれば成功です。

このような形で、ブロックは追加していくことができます。 同じ方法で、既存のセクションファイル（例えばmain-product.liquidなど）に使いたいブロックを追加することも可能です。

ブロックのカスタマイズ項目を増やす

settingsで設定している、ブロック内のカスタマイズ可能な項目も追加できます。 画像だけではなく、テキストもカスタマイズ画面で打ち込めるようにしましょう。

項目追加方法は、先程のブロック追加とほぼ同じ。 "settinngs": [ ]内のオブジェクト（{ } で囲まれている部分）を,で区切って追加します。

追加した方のtypeは、長めの文章を打ちやすい「textarea」を指定します。

{
  "name": "ブロック2",
  "type": "block2",
  "settings": [
    {
      "type": "image_picker",
      "id": "block2-img",
      "label": "画像を選択"
    } ,
    {
      "type": "textarea",
      "id": "block2-text",
      "label": "テキスト"
    }
  ]
}

保存して、カスタマイズ画面を見てみましょう。 サイドバーに画像選択、テキストエリアの2つが表示されていれば成功です。

お好きな画像と、テキストを登録してみてください。 画像はShopifyが用意してくれている“無料の画像”も使えます。

ブロックが複数ある場合の表示

ブロック1は入力した文字をそのまま表示させる。 ブロック2は、画像とテキストを横並びで表示させたい。

こうした時には、caseというLiquidタグを使用して、ブロックごとに出力を変更できます。 「ブロック1の時はこの処理、ブロック2ならこっち」と条件に合わせて処理を設定していきます。

Liquidタグ“case”を使った条件分岐

case文は、変数の値を使った条件分岐を作りたいときに使います。 case文では、分岐に使いたい変数名をcase、分岐を実行する変数の値をwhenで指定します。

今回作っているlesson1.liquidなら、以下のようになります。

{% case block.type %}

    {% when 'block1' %}

    {% when 'block2' %}

{% endcase %}

caseでは、schemaで設定したブロックの“type”を指定します。 セクションからブロックを呼び出す場合、最初にfor文のループを書いていますよね。 下図のように{% for block in section.blocks %}だと、取り出したブロックの情報は変数「block」に入っています。

ですので、caseの後に書く変数は「block.type」になっています。 そして、{% when '〇〇' %} と、ブロックの“type”の値の時に行って欲しい処理（表示させたい内容）を書いていきます。

block1だった時に表示させる内容は、先程書いた{{ block.settings.block1-1 }}を使いましょう。

出力部分のコード

<div class="page-width"> 
  <h2>{{ section.settings.s-heading }}</h2>

  {% for block in section.blocks %}
    {% case block.type %}
      {% when 'block1' %}
        {{ block.settings.block1-1 }}
      {% when 'block2' %}

    {% endcase %}
  {% endfor %}
</div>

画像-テキストのブロックを表示

{% when 'block2' %}の下に、ブロック2の時の記述をしていきます。 今回はお試しなので、Dawnで既に定義されているCSSクラス+スタイル直書きでサクッと作ってみましょう。

{% case block.type %}
    {% when 'block1' %}
        {{ block.settings.block1-1 }}
    {% when 'block2' %}
        <div class="grid">
            <div style="flex: 2;">
                <!-- ここで画像を呼び出す-->
            </div>
            <div style="flex: 3;">
                <!-- ここでテキストを呼び出す -->
            </div>
        </div>
{% endcase %}

テキストの呼び出しは、block1の時とほぼ同じ。idだけ変えればOKです。

<div style="flex: 3;">
    {{ block.settings.block2-text }}
</div>

Liquidのフィルターを使う

画像の方は{{ block.settings.block2-img }} と書いても、上手く表示されません。

画像を表示できるように、Liquidのフィルターを使ってみましょう。 フィルターは、Liquidで呼び出した情報の出力方法を変更するものです。 {{ }}内で、パイプ文字（|）の後に入力します。

今回使うフィルターは、画像のURLを出力する「img_url」です。 その後に付けている'master'はサイズパラメーターの一つで、元の画像のサイズのまま出力するよう指示しています。

{{ block.settings.block2-img | img_url: 'master' }}

フィルターによって出力されるのは画像URLになりました。 Liquidタグをimgタグ（srcの値）に入れ込みましょう。

<div style="flex: 2;">
    <img src="{{ block.settings.block2-img | img_url: 'master' }}" style="max-width: 100%;">
</div>

コードを保存して、プレビューを見てみましょう。 下図のように、画像と文字が横並びで表示されていれば完成です。

今回は簡単なスタイル指定のみで作りましたが、HTML&CSSで見た目を作り込めば汎用性の高いブロックになるのではないでしょうか。