Liquid Snippets by ALSEL
📘 公式リファレンス🏷️ リファレンス/タグ中級

tablerow タグ(配列をHTML表に展開)

配列の各要素を HTML テーブル行として展開する。cols パラメータで列数を指定でき、limit・offset・range で反復範囲を制御できる。

用途
商品一覧やコレクションを表形式で表示するとき。複数列のテーブルレイアウトで商品名や画像を並べる。
設置場所
Liquid 内で `{% tablerow variable in array %}...{% endtablerow %}` の形で使う。HTML `<table>` タグで囲んで記述する必要がある。
注意点
tablerow は必ず HTML `<table>` と `</table>` タグ内に配置することが前提。cols 指定時に要素数が列数に満たない場合は空セルが生成される。tablerowloop オブジェクト(tablerowloop.col、tablerowloop.index など)で行・列番号を取得できるため、スタイル分岐時に活用する。range パラメータで変数値の範囲指定も可能(例: `(lower_limit..upper_limit)`)だが、負の数や逆順には非対応。
タグ:tablerowiterationlooptablecols

仕様

113 行 / json
{
  "category": "iteration",
  "deprecated": false,
  "deprecation_reason": "",
  "description": "The `tablerow` tag must be wrapped in HTML `&lt;table&gt;` and `&lt;/table&gt;` tags.\n\n&gt; Tip:\n&gt; Every `tablerow` loop has an associated [`tablerowloop` object](/docs/api/liquid/objects/tablerowloop) with information about the loop.",
  "parameters": [
    {
      "description": "The number of columns that the table should have.",
      "name": "cols",
      "positional": false,
      "required": false,
      "types": [
        "number"
      ]
    },
    {
      "description": "The number of iterations to perform.",
      "name": "limit",
      "positional": false,
      "required": false,
      "types": [
        "number"
      ]
    },
    {
      "description": "The 1-based index to start iterating at.",
      "name": "offset",
      "positional": false,
      "required": false,
      "types": [
        "number"
      ]
    },
    {
      "description": "A custom numeric range to iterate over.",
      "name": "range",
      "positional": true,
      "required": false,
      "types": [
        "untyped"
      ]
    }
  ],
  "summary": "Generates HTML table rows for every item in an array.",
  "name": "tablerow",
  "syntax": "{% tablerow variable in array %}\n  expression\n{% endtablerow %}",
  "syntax_keywords": [
    {
      "keyword": "variable",
      "description": "The current item in the array."
    },
    {
      "keyword": "array",
      "description": "The array to iterate over."
    },
    {
      "keyword": "expression",
      "description": "The expression to render."
    }
  ],
  "examples": [
    {
      "name": "",
      "description": "",
      "syntax": "",
      "path": "/collections/sale-potions",
      "raw_liquid": "&lt;table&gt;\n  {% tablerow product in collection.products %}\n    {{ product.title }}\n  {% endtablerow %}\n&lt;/table&gt;",
      "parameter": false,
      "display_type": "text",
      "show_data_tab": true
    },
    {
      "name": "cols",
      "description": "You can define how many columns the table should have using the `cols` parameter.",
      "syntax": "{% tablerow variable in array cols: number %}\n  expression\n{% endtablerow %}\n",
      "path": "/collections/sale-potions",
      "raw_liquid": "&lt;table&gt;\n  {% tablerow product in collection.products cols: 2 %}\n    {{ product.title }}\n  {% endtablerow %}\n&lt;/table&gt;",
      "parameter": true,
      "display_type": "text",
      "show_data_tab": true
    },
    {
      "name": "limit",
      "description": "You can limit the number of iterations using the `limit` parameter.",
      "syntax": "{% tablerow variable in array limit: number %}\n  expression\n{% endtablerow %}\n",
      "path": "/collections/sale-potions",
      "raw_liquid": "&lt;table&gt;\n  {% tablerow product in collection.products limit: 2 %}\n    {{ product.title }}\n  {% endtablerow %}\n&lt;/table&gt;",
      "parameter": true,
      "display_type": "text",
      "show_data_tab": true
    },
    {
      "name": "offset",
      "description": "You can specify a 1-based index to start iterating at using the `offset` parameter.",
      "syntax": "{% tablerow variable in array offset: number %}\n  expression\n{% endtablerow %}\n",
      "path": "/collections/sale-potions",
      "raw_liquid": "&lt;table&gt;\n  {% tablerow product in collection.products offset: 2 %}\n    {{ product.title }}\n  {% endtablerow %}\n&lt;/table&gt;",
      "parameter": true,
      "display_type": "text",
      "show_data_tab": true
    },
    {
      "name": "range",
      "description": "Instead of iterating over specific items in an array, you can specify a numeric range to iterate over.\n\n&gt; Note:\n&gt; You can define the range using both literal and variable values.\n",
      "syntax": "{% tablerow variable in (number..number) %}\n  expression\n{% endtablerow %}\n",
      "path": "/",
      "raw_liquid": "&lt;table&gt;\n  {% tablerow i in (1..3) %}\n    {{ i }}\n  {% endtablerow %}\n&lt;/table&gt;\n\n{%- assign lower_limit = 2 -%}\n{%- assign upper_limit = 4 -%}\n\n&lt;table&gt;\n  {% tablerow i in (lower_limit..upper_limit) %}\n    {{ i }}\n  {% endtablerow %}\n&lt;/table&gt;",
      "parameter": true,
      "display_type": "text",
      "show_data_tab": true
    }
  ]
}

出典・ライセンス

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