Shopify構築の超基礎知識まとめ②

勉強し始めて約2週間ほど経ちました。今はShopifyのheaderを作成をしている最中です。SchemaとFilterをよく使うな〜という印象があるので、この2つについてまとめています。具体的にどう作っていくかは、もう少し勉強が進んでからまとめたいと思っています。なので、今回は概念的な感じです。前提知識として、ObjectsとTagsについても簡単に記載しました。

1.　Objects

オブジェクトは、データの名前です。実際に記述して使う時は、データの参照先という感じです。例えば、

{{ blog.title }}

と書いたならば、"blog"の"title"を選んで表示(出力)します。この時、titleの部分はプロパティと呼ばれます。プロパティの意味は、財産、所有物、土地(建物)、特性などが挙げられます。なので、オブジェクトが親要素、プロパティが子要素みたいな感じかと思います。​

2.　Tags

タグは、プログラムの実行指示or処理で、{%  %}で括ってあるやつのことです。タグの中でも主に、繰り返し・テンプレートの読み込み・条件分岐・変数を使います。例えば、繰り返しをしたいときは以下の用に、{% for %}〜{% endfor %}というタグを使います。

{% for link in linklists.main-menu.links %}

   {% assign child_list_handle = link.title | handlize %}
   {% if linklists[child_list_handle].links ! = blank %}
     <a href="{{ link.url }}">{{ link.title }}</a>
     [{% for childlink in linklists[child_list_handle].links %}
       <a href="{{ childlink.url }}">{{ childlink.title | escape }}</a>
     {% endfor %}]
   {% else %}
     <a href="{{ link.url }}">{{ link.title }}</a>
   {% endif %}
   
{% endfor %}

3.　Filters

フィルターは、文字や画像の変数とオブジェクトに加工することができる機能のことです。例えば、日付などを毎回入力するのではなく、自動で出力したい場合、以下の用に記述します。

{{ article.published_at | date: "%Y年 %月 %日" }}

article.published_atがオブジェクトで、これを" | " で区切ることでフィルター機能を加えることができます。date: "%Y年 %月 %日"は、どんな形で表示させるかを指定しています。{{　}}で括られていれば、だいたいフィルターがかかっているんだと思います。フィルターは、10種類ほどあります。

・General Filters　「date」など、書式の設定に関するフィルター

・Array Filters　配列に関するフィルター

・Color Filters　色に関するフィルター

・Font Filters　ShopifyにもともとあるフォントにアクセスするURL等を作成するフィルター

・HTML Filters　Assetsに含まれているファイルを出力するフィルター(imgタグなど)

・Media Filters　商品メディアのURLを生成するフィルター

・Math Filters　数字の出力に関するフィルター

・Money Filters　商品の価格や、通貨の出力に関するフィルター

・String Filters　文字列を変換して出力するフィルター

・URL Filters　shopify上にアップロードされたファイルのリンクに関するフィルター

まずは、使ってみないとぴんとこないんですが・・・。φ(..)メモメモ

4.　Schema

スキーマは、カスタマイズ画面の項目を設定することができます。以下の写真の様に、画像等をクライアントが編集できるように設定する機能(？)をスキーマといいます。

スキーマは、こんな感じに記述していきます。

{% schema %}
{
 "name": {   
   "ja": "ニュースレター",
 },
 "class": "index-section index-section--flush",
 "settings": [
   {
     "type": "text",
     "id": "section_title",
     "label": {
       "ja": "見出し",
     },
     "default": {
       "ja": "ストアからのお知らせを受け取る",
     }
   },
   {
     "type": "richtext",
     "id": "subheading",
     "label": {
       "ja": "小見出し",
     },
     "default": {
       "ja": "<p>新商品やセール情報などのお得な情報をお届けします。</p>",
     }
   },
   {
     "type": "paragraph",
     "content": {
       "ja": "サインアップしたお客様は、Shopifyでアカウントが作成されます。[お客様を表示する](/admin/customers?query=&accepts_marketing=1)",
     }
   }
 ],
 "presets": [
   {
     "name": {
       "ja": "ニュースレター",
     },
     "category": {
       "ja": "プロモーション用",
     }
   }
 ]
}
{% endschema %}

具体的なフィルターとスキーマ記述の仕方は、別で書き留めようと思います。

きっとフィルターとスキーマが要になってくるので、たくさん使ってみて慣れていきたいなと思います。とりあえずは、「こういう感じの機能・役割があるんだなー」と把握しておくことが大切なのかな。