フッターをカスタマイズしてimage-barを表示する【テーマ：Debut】

ShopifyのLiquidテンプレートファイルは、表示側を制御するテンプレート部と入力側を制御するschema部の2部構成になっているというお話を、以前ご説明しました。

そういうことなので、画像を4つ登録できる「コンテンツ」を管理画面に追加し、「コンテンツ」に登録した画像をimage-barとしてフッターメニューの上部に並べて表示させようとするときも、テンプレート部とschema部の両方を追加で記述する必要があります。
　
それでは修正していきましょう。
【テーマ：Debut】ではsections/footer.liquidがフッター部のテンプレートなのでそれを修正します。

まずschema部。
「blocks」を検索してその末尾に次のように4画像入力用のコンテンツを追加します。

{% schema %}
{
  "blocks": [
    {
      "type": "image",
      "name": "ImageBar",
      "settings": [
        {
          "type": "image_picker",
          "id": "image1",
          "label": "画像1"
        },
        {
          "type": "image_picker",
          "id": "image2",
          "label": "画像2"
        },
        {
          "type": "image_picker",
          "id": "image3",
          "label": "画像3"
        },
        {
          "type": "image_picker",
          "id": "image4",
          "label": "画像4"
        }
      ]
    }
  ]
}
{% endschema %}

次に表示テンプレート部では、表示させたい場所でblockをfor文で回し、blockタイプが”image”の”image1″,”image2″,”image3″,”image4″の値を取得してテンプレートに出力します。

{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'image' -%}
<div id="loopslider" class="grid grid--no-gutters image-bar image-bar--small footer-image-bar">
  {%- assign column_size = 'medium-up--one-quarter' -%}

  <div class="loopslider_child">
    <div class="grid__item {{ column_size }} js">
        <div class="image-bar__item image-bar__item--{{ block.id }} box ratio-container lazyload"
             data-bgset="{% include 'bgset', image: block.settings.image1 %}"
             data-sizes="auto"
             data-parent-fit="cover"
             style="background-position: center center; background-image: url('{{ block.settings.image1 | img_url: '300x300' }});">

        </div>
    </div>
    <noscript>
      <div class="grid__item {{ column_size }}">
        <div class="image-bar__item image-bar__item--{{ block.id }}" style="background-image: url({{ block.settings.image1 | img_url: '2048x' }});"></div>
      </div>
    </noscript>
  </div>
  <div class="loopslider_child">
    <div class="grid__item {{ column_size }} js">
        <div class="image-bar__item image-bar__item--{{ block.id }} box ratio-container lazyload"
             data-bgset="{% include 'bgset', image: block.settings.image2 %}"
             data-sizes="auto"
             data-parent-fit="cover"
             style="background-position: center center; background-image: url('{{ block.settings.image2 | img_url: '300x300' }});">

        </div>
    </div>
    <noscript>
      <div class="grid__item {{ column_size }}">
        <div class="image-bar__item image-bar__item--{{ block.id }}" style="background-image: url({{ block.settings.image2 | img_url: '2048x' }});"></div>
      </div>
    </noscript>
  </div>
  <div class="loopslider_child">
    <div class="grid__item {{ column_size }} js">
        <div class="image-bar__item image-bar__item--{{ block.id }} box ratio-container lazyload"
             data-bgset="{% include 'bgset', image: block.settings.image3 %}"
             data-sizes="auto"
             data-parent-fit="cover"
             style="background-position: center center; background-image: url('{{ block.settings.image3 | img_url: '300x300' }});">

        </div>
    </div>
    <noscript>
      <div class="grid__item {{ column_size }}">
        <div class="image-bar__item image-bar__item--{{ block.id }}" style="background-image: url({{ block.settings.image3 | img_url: '2048x' }});"></div>
      </div>
    </noscript>
  </div>
  <div class="loopslider_child">
    <div class="grid__item {{ column_size }} js">
        <div class="image-bar__item image-bar__item--{{ block.id }} box ratio-container lazyload"
             data-bgset="{% include 'bgset', image: block.settings.image4 %}"
             data-sizes="auto"
             data-parent-fit="cover"
             style="background-position: center center; background-image: url('{{ block.settings.image4 | img_url: '300x300' }});">

        </div>
    </div>
    <noscript>
      <div class="grid__item {{ column_size }}">
        <div class="image-bar__item image-bar__item--{{ block.id }}" style="background-image: url({{ block.settings.image4 | img_url: '2048x' }});"></div>
      </div>
    </noscript>
  </div>
</div>

{% if section.blocks.size == 0 %}
  {% include 'no-blocks' %}
{% endif %}
{%- endcase -%}
{%- endfor -%}

これで、テーマカスタマイズ画面のフッターブロックに「ImageBar」というコンテンツが追加され、「ImageBar」で登録した画像4つがフッター部に表示されるようになります。