[Shopify] liquidを記述して、ページテンプレートでセクションを表示させる方法

はじめに

今回は、liquidを記述して、ページテンプレートでセクションを表示させる方法を解説していきます。

頑張っていきましょう。

クイックスタート

今回の記事では以下のようにページテンプレートでセクションを選択できるようになる方法を実装します。

ページテンプレートでpage.exampleを選択します。

Titleは適当で大丈夫です。

今回はぽこまるでいきましょう。

テーマのカスタマイズの左上から、ぽこまるを選択しましょう。

次のように、Feature-rowセクションが表示されます。

通常、テンプレートページではセクションを表示することはできません。しかし、liquidを編集することでテンプレートページにセクションを表示させることが可能です。

それでは、具体的な方法を解説していきます。

templatesの中にpage.example.liquidを作成

pege.example.liquidをtempletesの中に作成しましょう。

pageというファイル名がShopifyの予約後です。この名前で命名することで、管理画面のページからページを生成することができます。

page.example.liquidにコードを記述

以下のコードを記述することで、sectionを呼び出すことができます。

page.example.liquid

{% section 'feature-row' %}

page.example.liquidはtemplatesフォルダの配下のファイルです。

基本的に、sectionはtenmpatesから呼び出します。

sectionとはShopifyにおいてユーザーがカスタマイズできる部品のことで、sectionフォルダの配下のファイルになります。

つまり、今回のコードではsectionの中のfeature-row.liquidファイルを呼び出したことになります。

ついでに、feature-row.liquidファイルの中身を見てみましょう。

本当はviewの下にschemaが記述されていますが、長すぎるため割愛しました。

<div class="page-width feature-row">
  {% capture image_layout %}
    <div class="feature-row__item">
      {% if section.settings.image != blank %}
        {% capture img_id %}FeatureRowImage-{{ section.id }}{% endcapture %}
        {% capture wrapper_id %}FeatureRowImageWrapper-{{ section.id }}{% endcapture %}
        {%- assign img_url = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
        {% include 'image-style', image: section.settings.image, height: 545, wrapper_id: wrapper_id, img_id: img_id %}
        <div id="{{ wrapper_id }}" class="feature-row__image-wrapper js">
          <div style="padding-top:{{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100}}%;" data-image-loading-animation>
            <img id="{{ img_id }}"
                 class="feature-row__image lazyload"
                 data-src="{{ img_url }}"
                 data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                 data-aspectratio="{{ section.settings.image.aspect_ratio }}"
                 data-sizes="auto"
                 alt="{{ section.settings.image.alt | escape }}">
          </div>
        </div>

        <noscript>
          {{ section.settings.image | img_url: '600x600', scale: 2 | img_tag: section.settings.image.alt, 'feature-row__image' }}
        </noscript>
      {% else %}
        {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
      {% endif %}
    </div>
  {% endcapture %}

  <div class="feature-row">
    {% if section.settings.layout == 'left' %}
      {{ image_layout }}
    {% endif %}

    <div class="feature-row__item feature-row__text feature-row__text--{{ section.settings.layout }}">
      {% if section.settings.title != blank %}
        <h2 class="h3">{{ section.settings.title | escape }}</h2>
      {% endif %}
      {% if section.settings.text != blank %}
        <div class="rte rte-setting featured-row__subtext">{{ section.settings.text }}</div>
      {% endif %}
      {% if section.settings.button_label != blank and section.settings.button_link != blank %}
        {%- capture ariaLabel -%}
          {{- section.settings.button_label -}}
          {%- if section.settings.button_link.type == 'frontpage_link' -%}
            : {{ 'homepage.general.title' | t -}}
          {%- elsif section.settings.button_link.type == 'catalog_link' -%}
            : {{ 'collections.catalog.title' | t -}}
          {%- elsif section.settings.button_link.object.title -%}
            : {{ section.settings.button_link.object.title -}}
          {%- endif -%}
        {%- endcapture -%}

        <a href="{{ section.settings.button_link }}"
          class="btn"
          aria-label="{{ ariaLabel }}">
          {{- section.settings.button_label | escape -}}
        </a>
      {% endif %}
    </div>

    {% if section.settings.layout == 'right' %}
      {{ image_layout }}
    {% endif %}
  </div>
</div>

つまり、{% section 'feature-row' %}のコードを記述することでsectionフォルダ配下のfeature-row.liquidを呼び出したことになります。

この記述をして保存すると、Shopifyの管理画面のページからpege.exampleが呼び出せるようになります。

管理画面からpage.exampleを呼び出し

それでは実際に管理画面からpage.exampleを呼び出してみましょう。

ちなみに、この管理画面で設定するTitleとコンテンツは。page.example.liquidのファイル上でそれぞれpage.titleやpage.contentで呼び出すことができます。

ページを作成すると、以下のようにfeature-rowセクションが呼ばれていることが分かります。

補足・同一テンプレートで複数のページを作成した場合のセクションの挙動

補足ですが、同一テンプレートで複数のページを作成した場合の挙動をまとめていきます。

結論から書くと、たとえ複数のテンプレートを作成したとしても、セクションは共通になります。

具体的には、例えばぽこまるページとたいちページを作成したとします。

ぽろまるページに画像を設定しましょう。

この状態で、page.example.liquidからたいちページを作ってみます。

この状態で、たいちページをページカスタマイズから参照してみましょう。

既に、画像が差し込まれています。

つまり、page.example.liquidから作成した全てのページで、同一のセクションを保有していることが分かります。

終わりに

今回の記事はここまでになります。

お付き合い頂きありがとうございました。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。