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

javascript タグ内の JS コード整形

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

用途
theme.liquid や各セクション内で `{% javascript %}` ブロックを使って JavaScript を埋め込むとき、コード可読性を保ちながら自動整形したい場合に使用する。
設置場所
このコードは Prettier プラグインのテストケース(packages/prettier-plugin-liquid/src/test/)に配置されるもので、実際のテーマには貼り付けない。theme-tools の開発環境で JS 埋め込み機能の動作確認に用いる。
注意点
Liquid 変数(例:`{{ drop }}`)が JavaScript 内に含まれると、JavaScript パーサーが構文エラーを起こすため、その場合は Prettier による完全整形ではなくインデント調整にフォールバックする。`embeddedSingleQuote` オプションを true に設定すると、文字列のクォート形式が変更される。実運用では theme.liquid の `<script>` タグで同様に Liquid と JS を混在させる際の参考になる。
タグ:javascriptprettierliquid-embeddedcode-formattingtheme-tools

コード

30 行 / liquid
It should pretty print 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タグ内のコード整形テスト

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

📁 theme-tools·MIT·38
🔌 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