Tweet

前回：「独自CSSファイルの埋め込みカスタマイズ」

について記事を書きましたが、
今回は独自jsファイルの読み込み方法について書いていきたいと思います。

前回も登場しました、「My changes」アドオンを使用して独自jsファイルを読み込ませてみます。

jsフォルダ内とdesignフォルダ内に
my_changesフォルダを作成しjsファイルを読み込ませる準備をします。

まずjs/addonsフォルダ内に、
「my_changes」フォルダを作成します。

その後、js/addons/my_changesフォルダ内に読み込ませたいjsファイル、
今回は例として「changes.js」ファイルを追加します。

ただしこれだけでは、ショップフロントにjsを読み込ませることはできません。

次に、design/themes/テーマフォルダ/templates/addonsフォルダ内に
「my_changes」フォルダを作成します。

「my_changes」フォルダ内に「hooks」フォルダを作成し、
「hooks」フォルダ内に「index」フォルダを作成。
「index」フォルダ内に「scripts.post.tpl」ファイルを作成します。

design/themes/テーマフォルダ/templates/addons/my_changes/hooks/index/scripts.post.tpl
という形になります。

scripts.post.tplファイルには

{script src="js/addons/my_changes/changes.js"}

と記述を追加し保存することで、
js/addons/my_changes/changes.jsをショップフロントに読み込ませることができます。

※この状態で「my_changes」アドオンをアンインストールしてしまうと、designフォルダ内の「my_changes」のファイルが消えてしまいます。

必ず、designフォルダ内の「my_changes」フォルダとその中のファイルは
var/themes_repository/テーマフォルダ/templates
内にコピーしておくようにしてください。