過去2回にわたってShopifyのテーマ制作に関するTipsをまとめていましたが、まだ紹介できていないものがあったので、本記事でまとめていきたいと思います。これまでは主にテンプレートのカスタマイズや、商品データを取り扱う内容でしたが、Shopifyではそれ以外のデータを扱ったり管理画面からのカスタマイズに対応できます。今回はその内容をメインに見ていきましょう。   （あわせてどうぞ） Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips ＃1 Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips ＃2    

1. ブログ記事のリスト表示

Shopifyにはデフォルトでブログ機能が搭載されています。商品データだけでなく投稿されたブログ記事データもサイト内で表示させることが可能です。ブログ記事データは「blogs」オブジェクトに格納されており、ブログハンドル名をキーとすることで投稿記事のデータが配列で取得できます。あとはデータ内に記事タイトルや投稿日、著者名などの情報が含まれているので、それを参照することでページ上に出力していきます。詳細ページの場合ですと「article」オブジェクトを参照することで、現在表示されている詳細ページの記事情報を取得する形になります。

{% if blogs.[ブログハンドル名].articles %}
  {% for article in blogs.[ブログハンドル名].articles limit: 9 %}
    <div class="__grid-item">
      <a href="{{ article.url }}">
        <img src="{{ article.image.src | img_url: 'original' }}" alt="">
        <h3>{{ article.title }}</h3>
        <time>{{ article.published_at | date: '%Y年%m月%d日' }}</time>
        <p>{{ article.author }}</p>
      </a>
    </div>
  {% endfor %}
{% endif %}

   

2. デフォルトテンプレートの読み込み

「content_for_layout」のオブジェクトを展開することでテーマが自動的にページに対応したテンプレートを出力してくれるようになります。完全にハードコーディングでページを作成するときには必要ありませんが、テーマのカスタマイズを管理画面から行う場合には必要となります。その他、テンプレート内にアプリ機能の組み込みなど、直接テーマのカスタマイズでセクションを追加するケースも同様です。静的なセクションとカスタマイズ用の動的セクションを使い分けるのも良いですね。 【theme.liquid】※一部抜粋

.....
  <main>
    <article>
      {% section 'main-static' %}
    </article>
    <article>
      {{ content_for_layout }}
    </article>
  </main>
.....

   

3. schemaを利用した独自フィールドの追加

Shopifyの大きな魅力のひとつとして、管理画面から自由度の高いテーマのカスタマイズが挙げられます。Dawnテーマの場合ですとデフォルトで様々な入力フィールドも用意されていますが、「schema」タグを使うことで独自のフィールドを作成することができます。WordPressでいうカスタムフィールドみたいなものですね。この定義は基本的にセクションのファイルに出力部分とあわせて記述し、使いたいところで呼び出すという実装になります。フィールドの定義はschemaタグ内でJSONのフォーマットで記述します。下記はタイトルとキャプションテキストを出力する入力フィールドを追加する例になります。

<h2>{{ section.settings.title }}</h2>
<p>{{ section.settings.caption }}</p>

{% schema %}
  {
    "name": "タイトル・キャプションテキスト",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "タイトルを入力"
      },
      {
        "type": "textarea",
        "id": "caption",
        "label": "キャプションテキストを入力"
      },
    ]
  }
{% endschema %}

  まずschemaタグ内にフィールドの内容を定義していきます。nameキーにはフィールドのIDとなる値を、settingsにはフィールドの種類などを設定していきます。入力項目が複数の場合には、このsettingsの値にどんどん追加していきます。各フィールドの設定ですが、typeキーでインプット要素の種類を指定します。上記は一行や複数行のテキスト入力ですが、画像ファイルやHTMLを扱えるWYGWIGエディタなども用意されています。そしてidキーはこのフィールドを参照するときの値として一意のものを設定します。   フィールドの定義ができたら、HTML側でフィールドの値を出力されるよう変数展開していきます。「section.settings」のオブジェクトから先ほど設定したフィールドのidキーの値を指定することで取得します。    

4. schemaを利用した繰り返し可能な独自フィールドの追加

schemaで作成した独自の入力フィールドは繰り返しの可変長にすることも可能です。先ほどの設定では入力箇所を固定で用意する方法ですが、「blocks」として定義することで、管理画面上でブロックとして追加・削除できるようにしていきます。入力フィールド自体の定義は先ほどと変わりませんが、blocksキーの中で設定をしていく形になります。blocksの値にtypeキーがありますがこれはブロックセクションを示す一意の値を任意で設定するものですので、フィールドの種類で使うtypeキーとは異なりますので注意します。なお、「presets」に登録しておくと別のテンプレートからも参照できるようになるのでいろんなページで使い回す場合には設定しておくと便利ですね。

{% for block in section.blocks %}
  <figure>
    <img src="{{ block.settings.repeat_item_image | img_url: 'original' }}" alt="">
    <figcaption>{{ block.settings.repeat_item_caption }}</figcaption>
  </figure>
{% endfor %}

{% schema %}
  {
    "name": "繰り返し画像セット",
    "settings": [],
    "blocks": [
      {
        "type": "repeat_item",
        "name": "繰り返し要素",
        "settings": [
          {
            "type": "image_picker",
            "id": "repeat_item_image",
            "label": "画像ファイル"
          }, {
            "type": "richtext",
            "id": "repeat_item_caption",
            "label": "画像キャプション"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "繰り返し画像セット"
      }
    ]
  }
{% endschema %}

  あとはHTML上にフィールドの入力値を展開していきます。可変長なのでfor文でブロックの数だけ繰り返す点が先ほどとの違いがありますが、それ以外は同じようにサイト要件に合わせて実装していきます。  

---

  今回も引き続きShopifyのテーマ制作やカスタマイズに役立つ内容についてまとめてみました。ShopifyはECのプラットフォームとしてネットショップサイトだけでなく、CMSとしても充実した機能があり、クライアントさんの要望へ柔軟に対応できるのも大きな魅力ですね。また機会があれば他にも色々とまとめていきたいと思います。   （こちらの記事もどうぞ） Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips ＃1 Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips ＃2