独自jsファイルをサイトに読み込ませる

※CS-Cartへのファイルの追加・改変は自己責任でおこなってください。不安な方は、あらかじめバックアップをとってから作業することをおすすめします。

前回「独自CSSファイルの埋め込みカスタマイズ」について記事を書きましたが、今回は独自jsファイルの読み込み方法について書いていきたいと思います。

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

※管理画面 → アドオン → アドオンの管理画面にある「My changes」のステータスを有効にしておきましょう。

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

その後、js/addons/my_changesフォルダ内に読み込ませたいjsファイル、今回は例として「changes.js」ファイルを追加します。この「changes.js」内に独自のスクリプトを書き込んでいく形になります。

ただし、上記のようにjsファイルを追加しただけではショップフロントにjsファイルを読み込ませることはできません。jsをショップ側に読み込ませるためのtplファイルを作成する必要があります。

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

「my_changes」フォルダ内に「hooks」フォルダを作成し、「hooks」フォルダ内に「index」フォルダを作成。

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

scripts.post.tplファイルには、

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

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

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

CS-Cartでは、サイトの表示を高速化するために「システムキャッシュ」「テーマキャッシュ」という2種類のキャッシュを使用しています。

ただこのキャッシュというのが結構曲者で、今回のようにCSSやtplファイルを追加・編集した際にその変更がキャッシュの影響でサイト側に反映しないことがあります。なのでカスタマイズを行なった後は必ずキャッシュのクリアをおこない、表示・動作を確認してみてください。

キャッシュのクリアは、サイト管理画面のURLの後に「?cc&ctpl」をつけてアクセスをしてみてください。

例：https://サイトURL/admin.php?cc&ctpl

次の記事 >>>

学ぶ