情報が古い可能性があります。
もっと実用的なカスタマイズ方法を学べたらなとTwitterで呟いたとところ、フロッグマンオフィス代表の吉浦さんに声をかけて頂き、勉強会を開催して頂けることになりました。
吉浦さん、ありがとうございました^^
INDEX
- 1. CS-Cartについてのおさらい
- 2. CS-Cart勉強会 vol.2 in 東京
- 3. 今回の勉強会の概要
- 4. WYSWYGエディタの無効化
- 5. フリー版のスキン「Basic skin」をカスタマイズしていこう！
- 6. カスタマイズ用のCSSの設置
- 7. テンプレート化をする前のファイルの設置
- 8. テンプレートフックで読み込むCSSを追加する
- 9. ブロック機能を使ってレイアウトを変更する
- 10. 完成に近づける
- 11. スマートフォン対応「モバイルアドオン」ベータ版第1弾公開！
1. CS-Cartについてのおさらい
前回の勉強会の内容を以前記事にまとめていますので、CS-Cartのインストールや簡単な使い方については以下の記事を参考にしてみてください。
2. CS-Cart勉強会 vol.2 in 東京
福岡での前回の勉強会の後、2月18日(土)に「CS-Cart勉強会 vol.2 in 東京」が開催されました。
先ずはその勉強会の内容をシェアさせてください（何故なら参加できなくて悔しかったので＞＜；）。
当日の内容をフロッグマンオフィスデザイナーのYUKIさん、無料写真素材サイトPAKUTASOで有名なsusi-paku（スシパク）さん、株式会社あんどぷらすの望月さんがブログにてまとめて下さってるのでご紹介。
今後CS-Cartを触るならこの御三方のブログは要チェックです^^
VIVID COLORS + BLOG -福岡で働くWebデザイナーのブログ-
susi-paku web -楽しければいいのです-
からくちWeb屋帳 2nd
スライド
以下勉強会のスライドです。
3. 今回の勉強会の概要
前回の勉強会では「コアのテンプレートファイルは触らずにCSSでのカスタマイズ」が鉄則でした。
しかし実案件で吉浦さんがテンプレートのカスタマイズをされてきた結果、テンプレートカスタマイズしても大丈夫とのことで、今回テンプレートカスタマイズの方法を教わって来ました。
具体的になにをしたかというと、フリーのCSSテンプレート（既にコーディングされたHTML+CSS）をテンプレートに落とし込んでいく、という作業を行いました。
4. WYSWYGエディタの無効化
開発の時はWYSWYG（ウィズウィグ）エディタを無効化しておいたほうが良いみたいです。
管理画面メニューの「基本設定」 → 「表示設定」を選択して「WYSWYGエディタ」の欄のプルダウンメニューで「Do not use」を選択して設定を保存してください。
5. フリー版のスキン「Basic skin」をカスタマイズしていこう！
今回の勉強会ではCS-Cartフリー版を使いましたので、フリー版で使用できるスキンは「Basic skin」となっております。
この「Basic skin」のテンプレートファイル郡は「skins/basic」の中にあります。
そして、ショップページのテンプレートファイルは「skins/basic/customer」、管理画面のテンプレートファイルは「skins/basic/admin」に入っています。
今回ショップページをカスタマイズしていくので編集していくファイルは「skins/basic/customer」の中にあります。
6. カスタマイズ用のCSSの設置
skins/basic/customer
「skins/basic/customer」の「styles.css」を同じディレクトリにコピーし、「styles-cs.css」にリネームします。
skins/basic/customer/addons/localization_jp
作成した「styles-cs.css」を「skins/basic/customer/addons/localization_jp」にコピーまたは移動します。
バックアップという意味で元のディレクトリにも残しておいても良いかも知れませんが、紛らわしくなるようでしたら別の場所にバックアップしておくと良いと思います。
skins/basic/customer/styles.css
「skins/basic/customer/addons/localization_jp」においた「styles-cs.css」を読みこませるように、「skins/basic/customer」の「styles.css」を編集します。
@import url('styles.base.css');
@import url('addons/localization_jp/styles-cs.css');
※「skins/basic/customer/styles.css」の中身はこの2行だけにします。
skins/basic/customer/addons/localization_jp/styles-cs.css
「skins/basic/customer/addons/localization_jp」の「styles-cs.css」を編集します。
@import url('styles.base.css');
の部分を削除します。
「images」フォルダまでのパスの指定を変更します。
「images ～」の部分を「../../images ～」に変更してください。
ショップページにアクセスすると見た目は変わってない筈です。
これから編集していくCSSは「skins/basic/customer」の「styles.css」や「styles-cs.css」ではなく、「skins/basic/customer/addons/localization_jp」の「styles-cs.css」になります。
7. テンプレート化をする前のファイルの設置
skins/basic/customer/addons/localization_jp
テンプレート化をする前のHTMLやCSSなどのファイル一式を「skins/basic/customer/addons/localization_jp」におきます。
8. テンプレートフックで読み込むCSSを追加する
テンプレートフックが分からない方はこちらの「テンプレートフック」を参考にしてみてください。
テンプレートフックは以前ご紹介した方法で「My changes」アドオンの中に入れていっても良いのですが、今回は「skins/basic/customer/addons/localization_jp」の中でフックを使用していきます。
skins/basic/customer/addons/localization_jp/hooks/index/styles.post.tpl
「skins/basic/customer/addons/localization_jp/hooks/index」の「styles.post.tpl」というファイルに一行CSSを読みこませる記述を追加します。
下記の5行目のところですね。
{* $Id: styles.post.tpl by tommy from cs-cart.jp 2010 $ *}
{if $smarty.const.CART_LANGUAGE == 'JP' && $addons.localization_jp.jp_specific_css == 'Y' }
<link href="{$config.skin_path}/addons/localization_jp/styles.css" rel="stylesheet" type="text/css" />
<link href="{$config.skin_path}/addons/localization_jp/css/style.css" rel="stylesheet" type="text/css" >
{/if}
レイアウトが少しがずれていますが、CSSが適用され見た目が変わったことがわかります。
※変わらない場合は「http://localhost/cscart/admin.php?cc」とかでキャッシュをクリアしてください。
ちなみにJavaScript（jQueryなど）のファイルは「skins/basic/customer/addons/localization_jp/hooks/index」の「script.post.tpl」というファイルで追加で読み込む記述を行うことが出来ます。
どんなファイルを読み込んでいるかは、元々のHTMLファイルを確認してください。
9. ブロック機能を使ってレイアウトを変更する
CS-Cartにはブロック機能があって、これまた便利なのですが簡単にレイアウトを変えられるようになっています。
HTMLファイルの方は2カラムなのですが、CS-Cartは標準の状態では3カラムなのでこれを変更します。
管理画面メニューの「デザイン」から「ブロック」を選択します。
右カラムの設定を「無効」に変更します（変更すると設定は自動で保存されます）。
ショップページにアクセスすると2カラムになっていることがわかります。
カラムの幅など違いはありますが、先程よりもイメージに近づいてきました。
10. 完成に近づける
後は追加したCSSを修正していきながら、要らないところは省き、テンプレートのコアファイル（skins/basic/customer配下）にも修正を加えながら完成に近づける、といった感じでした。
フックも使用できるので結構自由にカスタマイズ出来ますが、自分で修正したファイルや追加したファイルはわかるようにしておきましょう。
ちなみに吉浦さん曰く、がっつりコアのテンプレートを書き換えても良いけれど、HTMLのidやclass（特にid）は変えるとJSが動かない場合があるかもとのことでした。
どこを残しつつどこを書き換えるのか、その辺りの判断がついてくると作業も早くなってくるかも知れませんね。
カラムの幅など違いはありますが、先程よりもイメージに近づいてきました。
11. スマートフォン対応「モバイルアドオン」ベータ版第1弾公開！
（via photo CS-Cart.jp開発者ブログ）
スマートフォン対応「モバイルアドオン」ベータ版第1弾がついに公開されました。
プロ版をご購入いただいた方、またはサーバープランご契約者様のみベータ版を無料で使用できるみたいです。
テックプレビュー版のデモであれば下記のURLからまだ見ることができるようです。
http://mobile.cs-cart.jp/
このスマートフォン対応「モバイルアドオン」ベータ版第1弾に関しては、susipakuさんがいち早くブログにて書かれてますので、そちらも見てみてください^^
