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

increment タグ(カウンター変数を加算)

0 から開始して、呼び出すたびに 1 ずつ増加するカウンター変数を作成する。ループ内でループインデックスを別途管理したいときに使う。

用途
商品一覧で偶数行目に別スタイルを適用したい、または snippet 内でのみ有効なカウンターを使いたいときに使う。
設置場所
Liquid テンプレート内で `{% increment variable_name %}` の形で直接記述する。変数はレイアウト、テンプレート、セクション内で宣言され、同じファイルに含まれるスニペット全体で共有される。
注意点
increment で作成した変数は assign や capture で作成した変数と独立しており、同じ名前でも上書きされない。ただし decrement タグと変数を共有するため、同じ名前で increment と decrement を混在させるとカウンター値が予期しない結果になることがある。また、Liquid オブジェクト(product、collection など)と同じ名前を付けると、そのオブジェクトにアクセスできなくなるため変数名は慎重に選ぶ。
タグ:variablecounterincrementscope

仕様

28 行 / json
{
  "category": "variable",
  "deprecated": false,
  "deprecation_reason": "",
  "description": "Variables that are declared with `increment` are unique to the [layout](/themes/architecture/layouts), [template](/themes/architecture/templates),\nor [section](/themes/architecture/sections) file that they're created in. However, the variable is shared across\n[snippets](/themes/architecture/snippets) included in the file.\n\nSimilarly, variables that are created with `increment` are independent from those created with [`assign`](/docs/api/liquid/tags/assign)\nand [`capture`](/docs/api/liquid/tags/capture). However, `increment` and [`decrement`](/docs/api/liquid/tags/decrement) share\nvariables.",
  "parameters": [],
  "summary": "Creates a new variable, with a default value of 0, that's increased by 1 with each subsequent call.\n\n> Caution:\n> Predefined Liquid objects can be overridden by variables with the same name.\n> To make sure that you can access all Liquid objects, make sure that your variable name doesn't match a predefined object's name.",
  "name": "increment",
  "syntax": "{% increment variable_name %}",
  "syntax_keywords": [
    {
      "keyword": "variable_name",
      "description": "The name of the variable being incremented."
    }
  ],
  "examples": [
    {
      "name": "",
      "description": "",
      "syntax": "",
      "path": "/",
      "raw_liquid": "{% increment variable %}\n{% increment variable %}\n{% increment variable %}",
      "parameter": false,
      "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