CS-Cartでページを横断するようなAddonを作っていると、JavaScriptを全ページで読み込みたいことがある。ここでは、AddonのJavaScriptをCS-Cartのbackendの全ページで読み込む方法を紹介する。
まず、全ページで読み込むJSを作成する。ファイル名は好きなようにつけて構わない。JSファイルはjs/addons/{アドオンID}/ディレクトリに作成する。
touch js/addons/{$addon_id}/all-page.js
CS-Cartでは、全ページでJSをロードできるようにテンプレートフックindex:scriptが用意されているのでこれを活用する。
まずテンプレートフックにかむテンプレートindex/scripts.post.tplを追加する。
mkdir -p design/backend/templates/addons/{$addon_id}/hooks/index
touch design/backend/templates/addons/{$addon_id}/hooks/index/scripts.post.tpl
読み込まれているかを確認したいので、テンプレートの中身はデバッグ用にアラートを出すコードを差し込んでおく。
scripts.post.tpl
<script>alert("OK");</script>
ここまでできたら画面をリロードして、アラートが出れば読み込みOK。最後に、目当てのJSがロードされるように、テンプレートを書き換える。変更を適用するには、「一般設定」→「ストレージ」→「キャッシュのクリア」をしないとならない。これが面倒な場合は、AddonのJavaScriptをリロードで反映するようにする設定をしておく。
scripts.post.tpl
{script src="js/addons/{$addon_id}/all-page.js"}
ちなみに、この{script}タグやAddonのJS同梱等についてはCS-Cart: AddonにJSやCSSファイルを同梱する - Qiitaを参照。