はじめに
今回は、Integration with the theme editorページの和訳をしていきます。
こちらのページになります。
それでは、頑張っていきましょう。
概要
まずは概要を押さえましょう。
マーチャントがセクションをカスタマイズすると、それらのセクションの HTML は、ページ全体をリロードすることなく、既存の DOM に直接動的に追加、削除、または再レンダリングされます。
ページがロードされたときに実行される JavaScript は、セクションが再レンダリングされたりページに追加されたりしても、再び実行されることはありません。これは、再実行が必要なカスタムスクリプトに問題をもたらします。
テーマの作者は、セクションやブロックが選択されたときに、そのセクションやブロックが表示され、選択されている間は表示されたままであることを確認する必要があります。例えば、スライドショーは、選択されているブロック（スライド）にスライドし、そのブロックが選択されている間は一時停止する必要があります。
これらは、マーチャントがセクションをカスタマイズ画面でカスタマイズしているときの話です。
カスタマイズ画面でセクションをカスタマイズする際は、ページ全体をリロードすることなく、既存のDOMを直接動的に書き換えます。
また、ページがロードされたときに実行されるJavaScriptは、セクションの再レンダリング・ページ追加、などを行ったときに再び実行されることはありません。
Section and block JavaScript events
セクションとブロックのJavaScriptイベントについて見ていきましょう。
これを支援するために、エディターは、テーマのJavaScriptがリッスンして応答する必要があるテーマページ（つまり、テーマのプレビュー）のコンテキスト内でDOMイベントを発生させます。
|type |target |details |bubbles|caneclable |Action |Expected|
|---|---|---|---|---|---|---|---|---|
|shopify:section:load |section |{sectionID} |yes |no |セクションが追加または再レンダリングされたとき |セクションが正しく機能して表示されるために必要なJavaScriptを再実行します（ページがロードされたばかりのように）。 |
|shopify:section:unload |section |{sectionId} |yes |no |セクションが削除されたか、再レンダリングされたとき |イベントリスナー、変数などをクリーンアップして、ページが操作されたときに何も壊れず、メモリリークが発生しないようにします。 |
|shopify:section:select |section |{sectionId, load} |yes |no |ユーザーがサイドバーのセクションを選択したとき |セクションが表示され、選択されている間は表示されたままであることを確認してください（スクロールは自動的に行われます）。 |
|shopify:section:deselect |section |{sectionId} |yes |no |ユーザーがサイドバーのセクションの選択を解除したとき | |
|shopify:section:reorder |section |{sectionId} |yes |no |セクションが並べ替えられたとき| |
|shopify:block:select |block |{blockId,sectionId,load} |yes |no |ユーザーがサイドバーでブロックを選択したとき |ブロックが表示され、選択されている間は表示されたままであることを確認してください（スクロールは自動的に行われます）。 |
|shopify:block:deselect |block |{blockId,sectionId} |yes |no |ユーザーがサイドバーのブロックの選択を解除しました。 | | |
イベントは、セクションまたはブロック要素に直接トリガーされます。つまり、event.targetはセクションまたはブロック要素です。
セクションイベントは、Shopifyによって生成された<div>でトリガーされます。ブロックイベントは{{block.shopify_attributes }}を持つ要素でトリガーされます。
イベントは、クリックやキーダウンなどの他の DOM イベントと同様にバブルアップします。
これにより、スクリプトはaddEventListenerを使用するか、jQueryのようなJavaScriptライブラリを使用してイベントをリッスンすることができます。
セクション ID のような詳細情報は event.detail に添付されています。古いバージョンのjQueryを使用している場合は、代わりにevent.originalEvent.detailを使用する必要があるかもしれません。
shopify:section:select と shopify:block:select イベントの event.detail.load プロパティは、イベントがセクションの再レンダリングの一部として（つまり shopify:section:load イベントの後に）トリガーされているのか、ユーザーによる選択の後にトリガーされているのかを示しています。
Detecting the theme editor
これは、テーマエディタで表示されるストアフロントのプレビューを変更するために使用すべきではありません。ほとんどの場合、テーマエディタでマーチャントが見るプレビューは、顧客がライブストアで見るプレビューと一致するはずです。
この変数の使いどころは、テーマエディタのセッションデータがページトラッキングスクリプトに含まれないようにすることです。
もう一つの使いみちは、サードパーティのAPIを使用して、テーマエディタにはエラーを出力しますが、ライブストアには出力しません。
From Liquid
request.design_modeグローバル変数は、テーマのLiquidファイル上において、テーマエディタでストアフロントが表示されているかどうかを検出するために使用することができます。この変数の値は、テーマエディタで表示されている場合はtrueに設定され、そうでない場合はfalseに設定されます。
{% if request.design_mode %}
<!-- This will only render in the theme editor -->
{% endif %}
From JavasScript
Shopify.designModeグローバル変数は、テーマのJavaScriptファイルで、テーマエディタでストアフロントが表示されているかどうかを検出するために使用することができます。この変数の値は、テーマエディタで表示されている場合はtrueに設定され、そうでない場合は未定義に設定されます。
if (Shopify.designMode) {
// This will only happen in the theme editor
}
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。