Liquid Snippets by ALSEL
🔌 API連携/JSON出力/JS統合上級

JavaScriptタグ内のコード整形テスト

Liquid の {% javascript %} タグ内に埋め込まれた JavaScript コードを Prettier で整形するテストケース。純粋な JS、Liquid 混在、タブ設定、シングルクォート対応など複数のシナリオをカバーしている。

用途
Liquid テーマに JavaScript を埋め込む際、コード整形ツール(prettier-plugin-liquid)の動作検証や、Liquid と JavaScript が混在した場合の出力品質を確認するときに参照する。
設置場所
このファイル自体はテストケース集であり、theme.liquid や section 内には貼り付けない。代わりに、{% javascript %} タグを使う際の整形ルール確認用のリファレンスとして、構築時のコードレビュー基準に組み込む。
注意点
このテストケースは Prettier プラグイン開発用であり、実際の Shopify テーマでは {% javascript %} タグが Online Store 2.0 セクション内で使える環境に限定される。printWidth や useTabs などのフォーマット設定は .prettierrc に定義してから実行する。Liquid 変数({{ drop }} など)が JavaScript 内に混在する場合、JavaScript パーサが構文エラーを起こす可能性があるため、その際は自動整形が無効化され手動インデント調整が必要になる。
タグ:javascriptprettierformattingliquid-jstesting

コード

38 行 / liquid
It should pretty pring pure JS inside a script tag
printWidth: 20
embeddedSingleQuote: false
{% javascript %}
  function main() {
    console.log(
      "hello"
    );
  }
  const x =
    100 > 42
      ? x
      : y;
{% endjavascript %}

It should fallback to reindenting when it can't parse the source
(e.g. because of Liquid in JS)
printWidth: 20
{% javascript %}
  function main(){console.log({{ drop }});}const x = 100 > 42 ? x : y;
{% endjavascript %}

It should reindent when it can't parse and change spaces to tabs with useTabs
printWidth: 20
useTabs: true
{% javascript %}
	function main(){
	  console.log({{ drop }});
	}
	const x = 100 > 42 ? x : y;
{% endjavascript %}

It should respect embeddedSingleQuote
embeddedSingleQuote: true
{% javascript %}
  console.log('hi');
{% endjavascript %}

出典・ライセンス

License:
MIT

このコードは Shopify 著作の MIT ライセンスソースです。 原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。

関連項目

🔌 API連携/JSON出力/JS統合中級

定期販売プランのデータ属性生成

商品バリアントと定期販売プランの ID を HTML data 属性として動的に生成するスニペット。ループで複数プランの ID を data-sellingId-1、data-sellingId-2 のように番号付けして出力する。

📁 theme-tools·MIT·9
🔌 API連携/JSON出力/JS統合中級

カスタム要素の親コンポーネント

Web Components の親要素(`<parent-element>`)でラップし、子スニペットを描画するコンポーネント。カスタム要素に依存した構造を実装する際のテンプレート。

📁 theme-tools·MIT·10
🔌 API連携/JSON出力/JS統合上級

javascript タグ内の JS コード整形

Liquid の `{% javascript %}` タグ内に記述した JavaScript コードを Prettier で自動整形する。純粋な JS であれば完全整形、Liquid 変数を含む場合はインデント調整のみで対応する。

📁 theme-tools·MIT·30
🔌 API連携/JSON出力/JS統合上級

クイズ結果用の商品データとフィルタ条件を JSON 出力

選択したコレクションの全商品を JSON 形式で抽出し、クイズの回答ごとに設定されたフィルタ条件(価格・タグ・タイプ・ベンダー・オプション)と紐づけることで、JavaScript 側でリアルタイムに商品をマッチングできるようにする。

📁 Sections·MIT·93
🔌 API連携/JSON出力/JS統合上級

Vue コンポーネントのデモ

Vue コンポーネント、スロット、プロップ、Vuex ストア、グローバルミックス、カスタムディレクティブを一堂に展示するセクション。Shopify Theme Lab フレームワークの主要機能をインタラクティブに試せる。

📁 shopify-theme-lab·MIT·162
🔌 API連携/JSON出力/JS統合上級

サードパーティ製アプリの遅延読み込み最適化

Shopify に統合されたサードパーティ製アプリスクリプトの読み込み方式を管理画面から制御し、ページ表示速度を改善するセクション。スクロール、ユーザーインタラクション、または即座読み込みのいずれかに切り替えられる。

📁 Sections·MIT·769