【Shopify.dev和訳】Themes/Architecture/Sections/Integrate editor
この記事について
この記事は、Themes/Architecture/Sections/Integrate with the theme editorの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
セクションをテーマエディタと統合する｜ Integrate sections with the theme editor
マーチャントがテーマエディタでセクションをカスタマイズすると、そのセクションの HTML は、ページ全体を再読み込みすることなく、既存の DOM に直接、動的に追加/削除/再レンダリングされます。しかし、ページの読み込み時に実行される JavaScript は、再度実行されることはありません。
さらに、セクションやブロックが選択されたとき、そのセクションやブロックが選択されている間、表示され続けるようにしなければなりません。例えば、スライドショーのセクションは、セクションが選択されるとスクロールして表示され、そのブロックが選択されている間は、選択されたブロック（スライド）にスライドして一時停止するようにします。
上記を実現するために、2 つのことがあります。
-
テーマエディターはセクションを発行し、JavaScript イベントをブロックします
-
テーマエディターを検出するための Liquid 変数と JavaScript 変数
JavaScript イベントをセクション化してブロックする
テーマエディターは、セクションやブロックの JavaScript イベントを発生させますが、これはバブルであり、キャンセルはできません。各イベントはターゲット(event.target)を持ち、それは関連するセクションまたはブロック要素のいずれかです。セクション要素は Shopify が生成したセクションのラッパーであり、ブロック要素は {{ block.shopify_attributes }} が追加された要素です。
次の表は、イベントの概要です。
| type | target | detail | Trigger | Expected action |
|---|---|---|---|---|
shopify:section:load |
section | {sectionId} |
セクションが追加されたり、再レンダリングされている | ページが読み込まれたばかりであるかのように、セクションが正しく機能して表示されるために必要な JavaScript を再実行します。 |
shopify:section:unload |
section | {sectionId} |
セクションが削除されたか、再レンダリングされている | イベントリスナー、変数などをクリーンアップして、ページが操作されたときに何も壊れず、メモリリークが発生しないようにします。 |
shopify:section:select |
section |
{ sectionId, load}
|
ユーザーがサイドバーでセクションを選択した | テーマエディタは自動的にセクションにスクロールするので、セクションが表示されていることを確認し、選択されている間は表示されたままになります。 |
shopify:section:deselect |
section | {sectionId} |
ユーザーがサイドバーのセクションの選択を解除した | |
shopify:section:reorder |
section | {sectionId} |
セクションが並べ替えられた | |
shopify:block:select |
block |
{ blockId, sectionId, load}
|
ユーザーがサイドバーでブロックを選択した。 | テーマエディタは自動的にセクションにスクロールするので、ブロックが表示されていることを確認し、選択されている間は表示されたままになります。 |
shopify:block:deselect |
block |
{ blockId, sectionId}
|
ユーザーがサイドバーのブロックの選択を解除した。 |
上記の表で、blockId はブロック ID を表し、sectionId はセクション ID を表し、load は、イベントがセクションの再レンダリングによってトリガーされているのか、ユーザーの選択によってトリガーされているのかを示します。 load の値は true または false です。
テーマエディタを検出する
Liquid と JavaScript のテーマエディタを使用しているかどうかを検出できます。
Liquid
グローバルな Liquid リクエストオブジェクトには design_mode 属性があり、テーマエディターにいる場合は true を、そうでない場合は false を返します。例えば、以下のようになります。
{% if request.design_mode %}
<!-- これはテーマエディタでのみレンダリングされます -->
{% endif %}
JavaScript
JavaScript では、グローバル変数 Shopify.designMode は、テーマエディタにいる場合は true を、そうでない場合は undefined を返します。例えば、以下のようになります。
if (Shopify.designMode) {
// これはテーマエディタでのみレンダリングされます
}
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion