Tweet

ショップを制作すると、どうしてもデザイン面でカスタマイズがしたくなる箇所が出てくると思います。

CS-Cartには、「My changes」というアドオンが標準搭載されています。
ショップにオリジナルの機能や変更を加える際に使用するアドオンです。

このアドオンを利用して、独自cssファイルをショップフロントに適用させてみます。

デフォルトの状態では、「My changes」アドオンのファイルは
app/addons/my_changes にしかありません。

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

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

その後、「my_changes」フォルダ内に「styles.css」ファイルを追加します。

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

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

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

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

styles.post.tplファイルには

{style src="addons/my_changes/styles.css"}

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

あとは、design/themes/お使いのテーマフォルダ/css/my_changes内に作成した
「styles.css」に追加したいcssの記述を書いて、ショップ側に反映されるかどうか動作を確認してみてください。

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

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

今回は、独自cssファイルの読み込み方法についての記事でしたが、
おなじような方法で独自jsファイルをショップに読み込ませることができます。

独自jsファイルをショップに読み込ませる方法はこちらから！