🏗️ テーマ基盤上級
ネストされたブロック構造のグループ化
子ブロックを親スニペットに渡すラッパーコンポーネント。content_for で子ブロックを抽出し、親に委譲する構造化レイアウト部品。
用途
Online Store 2.0 セクション内で複数ブロックを親コンポーネントの統制下に置き、レイアウトやスタイルを一括管理したいとき。
設置場所
blocks/group.liquid に配置し、セクション schema の blocks 配列内で { "type": "group" } として登録する。親スニペット側で content_for "blocks" の出力を受け取り、children 変数で処理する。
注意点
content_for で抽出した子ブロックが親スニペット(snippets/parent.liquid)に確実に存在することが前提。親スニペット側で children 変数をループ処理するとき、ブロック型チェック(type @theme の場合の処理分岐)を明示しておくと動作確認がしやすい。セクション schema の presets に text ブロック型を指定しているが、実装時は使用するセクション内の実在するブロック型に置き換える。
コード
28 行 / liquid{% doc %}
Fixture block component that passes its blocks to the parent snippet
{% enddoc %}
{% capture children %}
{%- content_for "blocks" -%}
{% endcapture %}
{% render 'parent', children: children %}
{% schema %}
{
"name": "Group block",
"blocks": [{ "type": "@theme" }],
"presets": [
{
"name": "Group block",
"category": "Group",
"blocks": [
{
"type": "text"
}
]
}
]
}
{% endschema %}
出典・ライセンス
- Repository:
- https://github.com/Shopify/theme-tools
- License:
- MIT
このコードは Shopify 著作の MIT ライセンスソースです。 原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。
関連項目
🏗️ テーマ基盤中級
セクションスキーマのカスタムブロック定義
セクションの schema ブロック内でカスタムブロックタイプを定義する方法を示すサンプル。@theme と _private というプレフィックスで異なるブロック種別を宣言する。
📁 theme-tools·MIT·7 行
🏗️ テーマ基盤初級
セクション呼び出しのフォーマット
Liquid の section タグを複数行に記述する際の正しいフォーマット例。タグ名を改行で分割しても正しく認識される書き方を示す。
📁 theme-tools·MIT·7 行
🏗️ テーマ基盤初級
レイアウトテンプレートの指定
Liquid の `layout` タグを使い、テーマのレイアウトファイルを指定する構文。複数のレイアウト候補と whitespace 制御(ダッシュ記号)の使い方を示す。
📁 theme-tools·MIT·8 行
🏗️ テーマ基盤上級
Liquid フォーマッター互換のセクション表記
Prettier Liquid プラグインのテストケースで、セクションタグの様々な書式を検証する。異なる間隔・改行・ホワイトスペーストリミングの組み合わせでもセクション名が崩れないことを確認する。
📁 theme-tools·MIT·9 行
🏗️ テーマ基盤初級
基本的なHTMLレイアウト
Prettier Liquid プラグインのテスト用に作られた最小限の HTML テンプレート。DOCTYPE から body タグまでの基本的なドキュメント構造を示す。
📁 theme-tools·MIT·10 行
🏗️ テーマ基盤上級
layout タグのフォーマット
Liquid の layout タグの書式をコード品質ツール(Prettier)でフォーマットするテストケース。スペースや改行位置の違いを正規化し、レイアウト名が壊れないことを検証する。
📁 theme-tools·MIT·10 行