📁

【Shopify.dev和訳】Themes/Architecture/Templates/JSON templates

2021/09/17に公開

Shopify

themes

tech

この記事について

この記事は、Themes/Architecture/Templates/JSON templatesの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

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

Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

JSON テンプレート

JSON テンプレートを使うと、セクションを使ってオンラインストアのさまざまなページのルック＆フィールをコントロールすることができます。

JSON テンプレートは、レンダリングされるセクションのリストと、それに関連する設定を格納したデータファイルです。マーチャントは、テーマエディターを使って、これらのセクションを追加、削除、および並べ替えることができます。JSON テンプレートを使ってページがレンダリングされると、セクションは order 属性で指定された順序でレンダリングされます。セクションの間にはマークアップはありません。

JSON テンプレートは Liquid テンプレートとは内容が異なりますが、以下の Shopify テーマの機能をサポートするテンプレートファイルです。

gift_card と robots.txt を除く、すべてのテンプレートタイプ。
代替テンプレート。

ファイル名は有効なテーマのテンプレートタイプでなければならず、オプションで代替テンプレートのためのサフィックスが必要です。例えば、製品テンプレートの名前は、product.json または product.alternate.json とすることができます。

テンプレートは、JSON または Liquid テンプレートとしてのみ存在することができ、両方ではありません。たとえば、product.liquid がすでに存在している場合、product.json は作成できません。

テンプレートの構造

JSON テンプレートは、有効な JSON ファイルでなければなりません。ルートは、以下の属性を持つオブジェクトでなければなりません。

Attribute	Type	Required	Description
`name`	Strig	Yes	テンプレートの名前。
`layout`	String or `false`	No	テンプレートのレンダリング時に使用するレイアウトのファイル名。たとえば、`"full-width"`と指定すると、`layout/full-width.liquid`がレンダリングされます。デフォルトのレイアウトは`theme.liquid`です。 `false`を使用して、レイアウトなしでテンプレートをレンダリングします。レイアウトのないテンプレートは、テーマエディターでカスタマイズできません。
`wrapper`	String	No	テンプレートのセクションの HTML ラッパー要素。詳細については、wrapper プロパティを参照してください。
`sections`	Object	Yes	セクション ID をキーとし、セクションデータを値とするオブジェクトです。この属性には、少なくとも 1 つのセクションが含まれている必要があります。テンプレート内での ID の重複は許されません。セクションデータのフォーマットは、settings_data.jsonのセクションデータと同じです。詳しくは、「セクションデータ」を参照してください。
`order`	Array	Yes	レンダリングされる順序でリストされたセクション ID の配列。 ID は`sections`オブジェクトに存在する必要があります。複製は許可されていません。

wrapper プロパティ

wrapperプロパティを使用すると、JSON テンプレートのすべてのセクションの周りに HTML タグを挿入できます。次の HTML タグを使用できます。

<div>
<main>
<section>

たとえば、次のwrapperプロパティを持つ JSON ファイルは、次の出力を生成します。

product.json

{
  "name": "Default product template",
  "wrapper": "div#div_id.div_class[attribute-one=value]",
  "sections": {
    "main": {
      "type": "product"
    }
  },
  "order": [
    "main"
  ]
}

Output

<div id="div_id" class="div_class" attribute-one="value">
    <!-- product.json sections -->
</div>

Section data

JSON テンプレートの sections 属性には、テンプレートによってレンダリングされるセクションのデータが格納されています。セクションには、テーマのセクションとアプリのセクションがあります。JSON テーマテンプレート間でセクションデータを共有することはできないため、各セクションはテンプレート内で一意の ID を持つ必要があります。

JSON テンプレートは、最大 20 のセクションをレンダリングでき、各セクションは最大 16 のブロックを持つことができます。

セクションデータのフォーマットの概要を以下の表に示します。

Value	Type	Required	Description
`<SectionID>`	String	-	セクションの一意の ID。英数字のみを受け入れます。
`<SectionType>`	String	Yes	レンダリングするセクションファイルのファイル名（拡張子なし）。
`<SectionDisabled>`	Boolean	No	`true`の場合、セクションはレンダリングされませんが、テーマエディターでカスタマイズできます。デフォルトでは`false`です。
`<BlockID>`	String	-	ブロックの一意の ID。英数字のみを受け入れます。
`<BlockType>`	String	Yes	セクションファイルのスキーマで定義されている、レンダリングするブロックのタイプ。
`<BlockOrder>`	Array	No	レンダリングする必要がある順序で並べられたブロック ID の配列。 ID は`blocks`オブジェクトに存在する必要があり、重複は許可されていません。
`<SettingID>`	String	-	セクションまたはブロックのスキーマで定義されている設定の ID。
`<SettingValue>`	(multiple)	-	設定の有効な値。

例:

"sections": {
  <SectionID>: {
    "type": <SectionType>,
    "disabled": <SectionDisabled>,
    "settings": {
      <SettingID>: <SettingValue>
    },
    "blocks": {
      <BlockID>: {
        "type": <BlockType>,
        "settings": {
          <SettingID>: <SettingValue>
        }
      }
    },
    "block_order": <BlockOrder>
  }
}

たとえば、次のテンプレートは、product.liquid セクションファイルと product-recommendations.liquid セクションファイルを製品ページにレンダリングします。

templates/product.json

{
  "name": "Default product template",
  "sections": {
    "main": {
      "type": "product",
      "settings": {
        "show_vendor": true
      }
    },
    "recommendations": {
      "type": "product-recommendations"
    }
  },
  "order": [
    "main",
    "recommendations"
  ]
}

Shopify アプリのご紹介

Discussion

ログインするとコメントできます