【Shopify】LiquidのIntegration with the theme editorページの和訳

はじめに

今回は、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 機能を実現することができます。