LANCARD.LAB｜ランカードコムのスタッフブログ

CS-Cart勉強会＠福岡 〜デザインされたHTMLをテンプレートにする方法〜 に来てます。

デザインしてもらったファイルに合わせてCS-Cartをカスタマイズする方法の勉強会。
落ちこぼれ気味でしたが、理解できた範囲でメモを残しておきます。

編集するファイルの場所を局所化するためにデザイナーさんから受け取ったCSS等を

cs-cart/skins/basic/customer/addons/localization_jp/

にコピーしてその下で作業するのがお勧めとのこと(cs-cartは設置したディレクトリ)。

買い物画面のCSSは

cs-cart/skins/basic/customer/styles.css

別名でバックアップした後に、これも編集ファイルを局所化するために

@import url(‘styles.base.css’);

よりしたのインポート文以外のコードを

cs-cart/skins/basic/customer/addons/localization_jp/styles-css.css

などの別ファイルに分離して、cs-cart/skins/basic/customer/styles.css にて

@import url(‘addons/localization_jp/styles-css.css’);

とインポートするようにする。

以降、CS-CartのCSSの編集はstyles-css.cssに対して行う。

デザイナーが作ってくれたCSSファイルを追加するにはフックの

cs-cart/skins/basic/customer/addons/localization_jp/hooks/index/styles.post.tpl

にて

のように追加して読み込むようにする。

フックを修正したらキャッシュをクリアする。
方法は下記のように&ccを付けて管理画面にアクセス。

http://localhost:8888/cs-cart/admin.php?cc

編集したのに反映されないなぁって時はまずはキャッシュをクリアしてみる。

以降はテンプレート(拡張子tpl)やCSSを地道に編集して合わせていく。

以前は「テンプレートはなるべく編集しないほうがいいですよ」って方針だった
そうですがガシガシ編集していっても結構大丈夫とのことでした。

あと、Smartyの知識はあったほうがいいとのこと。

CS-Cart、素性はよさそうです。