Liquid Snippets by ALSEL
日本初の Shopify Liquid
日本語リファレンス。
Shopify 公式ドキュメントを完全カバーする、検索可能な日本語リファレンス。 フィルター・タグ・オブジェクトの仕様から、コミュニティの実装例まで網羅。
注目のスニペット
すべて見る →doc タグ（テンプレートの注釈・ドキュメント）
Liquid テンプレート内にドキュメンテーションコメントを埋め込むタグ。`{% doc %}` ～ `{% enddoc %}` に囲まれたコンテンツは画面に出力されず、内部の Liquid コードは解析されるが実行されない。コード補完、リンティング、インラインドキュメント機能の実装を支援する。
include タグ（スニペットを埋め込む）
スニペットファイルを Liquid テンプレート内に埋め込んでレンダリングする。埋め込み先の変数にアクセス・変更できるため、親テンプレートと子スニペット間でデータを直接共有する。
javascript タグ（セクション・ブロック内のコード）
セクション、ブロック、スニペット内に JavaScript コードを記述するタグ。このタグ内に書いた JavaScript は Shopify のテーマビルドシステムにより自動的に読み込まれて実行される。
sections タグ（セクショングループを描画）
セクショングループをテーマのレイアウト内で描画するタグ。レイアウトファイル内に配置して、複数のセクションをグループ化した内容を出力する。
stylesheet タグ（CSS定義）
セクション、ブロック、スニペット内で CSS スタイルを定義するタグ。各ファイルにつき1つだけ記述でき、定義した CSS はそのコンポーネント固有の外側スコープで読み込まれて実行される。
ページテンプレート
Shopify の汎用ページテンプレート。ページのタイトルと本文コンテンツを Shopify 管理画面から取得して表示する基本的な構造。
Alpine.js統合のメニュー開閉
Alpine.js の @click ディレクティブと :class バインディングを使ったメニュー開閉コンポーネント。ボタンクリックで open 状態を切り替え、ul 要素に expanded クラスを条件付きで付与する。
カートドロワー
Shopify の Bundled Section Rendering に対応したカートドロワーセクション。カート更新時に動的にフェッチされ、AJAX で自動的に再レンダリングされる。
カート件数バッジ
カート内の商品件数を表示するバッジを、Shopify の Bundled section rendering 機能で動的に更新する。カート更新時に AJAX で再レンダリングされ、常に最新の件数を表示。