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

Last updated at 2022-01-26Posted at 2020-11-16

はじめに

今回は、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が記述されていますが、長すぎるため割愛しました。

.liquid

<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>