📘 公式リファレンス🏷️ リファレンス/タグ初級
case タグ(変数の値に応じた条件分岐)
指定した変数の値を複数の候補と比較し、最初に一致した分岐を実行するタグ。switch-case 文と同等の機能を持つ。
用途
商品タイプ、注文ステータス、顧客グループなど、限定された値の中から特定の表示内容を出し分けるとき。if タグでネストが深くなる場面を簡潔に書き直せる。
設置場所
Liquid テンプレート内で `{% case 変数名 %} {% when 値 %} 処理 {% else %} デフォルト処理 {% endcase %}` の形で使う。変数は product.type、order.status など任意のプロパティが指定可能。
注意点
比較は厳密一致(完全に同じ値のみマッチ)のため、大文字と小文字は区別される。複数の値を when に指定するときはカンマか or 演算子で区切り、いずれかにマッチすれば実行される。else 句はオプションだが、想定外の値が来た場合の安全弁として用意しておくことを推奨する。
仕様
58 行 / json{
"category": "conditional",
"deprecated": false,
"deprecation_reason": "",
"description": "",
"parameters": [],
"summary": "Renders a specific expression depending on the value of a specific variable.",
"name": "case",
"syntax": "{% case variable %}\n {% when first_value %}\n first_expression\n {% when second_value %}\n second_expression\n {% else %}\n third_expression\n{% endcase %}",
"syntax_keywords": [
{
"keyword": "variable",
"description": "The name of the variable you want to base your case statement on."
},
{
"keyword": "first_value",
"description": "A specific value to check for."
},
{
"keyword": "second_value",
"description": "A specific value to check for."
},
{
"keyword": "first_expression",
"description": "An expression to be rendered when the variable's value matches `first_value`."
},
{
"keyword": "second_expression",
"description": "An expression to be rendered when the variable's value matches `second_value`."
},
{
"keyword": "third_expression",
"description": "An expression to be rendered when the variable's value has no match."
}
],
"examples": [
{
"name": "",
"description": "",
"syntax": "",
"path": "/products/health-potion",
"raw_liquid": "{% case product.type %}\n {% when 'Health' %}\n This is a health potion.\n {% when 'Love' %}\n This is a love potion.\n {% else %}\n This is a potion.\n{% endcase %}",
"parameter": false,
"display_type": "text",
"show_data_tab": true
},
{
"name": "Multiple values",
"description": "A `when` tag can accept multiple values. When multiple values are provided, the expression is returned when the variable matches any of the values inside of the tag.\nProvide the values as a comma-separated list, or separate them using an `or` operator.\n",
"syntax": "{% case variable %}\n {% when first_value or second_value or third_value %}\n first_expression\n {% when fourth_value, fifth_value, sixth_value %}\n second_expression\n {% else %}\n third_expression\n{% endcase %}\n",
"path": "/products/health-potion",
"raw_liquid": "{% case product.type %}\n {% when 'Love' or 'Luck' %}\n This is a love or luck potion.\n {% when 'Strength','Health' %}\n This is a strength or health potion.\n {% else %}\n This is a potion.\n{% endcase %}",
"parameter": false,
"display_type": "text",
"show_data_tab": true
}
]
}出典・ライセンス
- Repository:
- https://github.com/Shopify/theme-liquid-docs
- License:
- MIT
このコードは Shopify 著作の MIT ライセンスソースです。 原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。
関連項目
📘 公式リファレンス🏷️ リファレンス/タグ中級
doc タグ(テンプレートの注釈・ドキュメント)
Liquid テンプレート内にドキュメンテーションコメントを埋め込むタグ。`{% doc %}` ~ `{% enddoc %}` に囲まれたコンテンツは画面に出力されず、内部の Liquid コードは解析されるが実行されない。コード補完、リンティング、インラインドキュメント機能の実装を支援する。
📁 theme-liquid-docs·MIT·12 行
📘 公式リファレンス🏷️ リファレンス/タグ初級
include タグ(スニペットを埋め込む)
スニペットファイルを Liquid テンプレート内に埋め込んでレンダリングする。埋め込み先の変数にアクセス・変更できるため、親テンプレートと子スニペット間でデータを直接共有する。
📁 theme-liquid-docs·MIT·17 行
📘 公式リファレンス🏷️ リファレンス/タグ中級
javascript タグ(セクション・ブロック内のコード)
セクション、ブロック、スニペット内に JavaScript コードを記述するタグ。このタグ内に書いた JavaScript は Shopify のテーマビルドシステムにより自動的に読み込まれて実行される。
📁 theme-liquid-docs·MIT·17 行
📘 公式リファレンス🏷️ リファレンス/タグ初級
sections タグ(セクショングループを描画)
セクショングループをテーマのレイアウト内で描画するタグ。レイアウトファイル内に配置して、複数のセクションをグループ化した内容を出力する。
📁 theme-liquid-docs·MIT·17 行
📘 公式リファレンス🏷️ リファレンス/タグ初級
stylesheet タグ(CSS定義)
セクション、ブロック、スニペット内で CSS スタイルを定義するタグ。各ファイルにつき1つだけ記述でき、定義した CSS はそのコンポーネント固有の外側スコープで読み込まれて実行される。
📁 theme-liquid-docs·MIT·17 行
📘 公式リファレンス🏷️ リファレンス/タグ初級
break タグ(ループの中断)
for ループの反復処理を途中で停止するタグ。指定した条件に達したら以降の反復をスキップして、ループを抜ける。
📁 theme-liquid-docs·MIT·23 行