CS-Cart3のWebデザイナー向けテンプレート作成講座「市販のテンプレート構造を見てみよう!」に参加しました

CS-Cart勉強会

有限会社フロッグマンオフィスで行われたCS-Cartの勉強会「市販のテンプレート構造を見てみよう!」に参加しました。

とても参考になりましたので、今回もブログにまとめさせて頂きます。

  
この記事は2年以上前に書かれたものです。
情報が古い可能性があります。

INDEX

1. CS-Cartについて

CS-Cartについては、以前当ブログに記事を書いておりますので良ければこちらもご覧ください。

2. 今回の勉強会について

CS-Cartマーケットで販売されております、CS-Cart3向けのデザインテンプレートの構造を見ながら、テンプレート制作の方法を学ぶといった趣旨でした。

当日お話頂いた内容は以下の通り。

  • 市販テンプレートの中身
  • CS-Cartのテンプレート構造
  • 実際に作ってみよう!
  • 市販テンプレートのインストール方法
  • パッケージング

代表吉浦さん
今回もCS-Cartを優しく教えて下さったのは、フロッグマンオフィス代表の吉浦さん。

電子書籍サービスHonYeah!

フロッグマンオフィスさんと言えば、最近CS-Cartを使った電子書籍サービスを公開されましたね!
HonYeah!
HonYeah! : 印税率80%以上の電子書籍販売プラットフォーム

3. 市販のテンプレート

先ずはCS-Cartマーケットに、どんなデザインテンプレートがあるか見てみましょう。

アパレル

cs-cart-20130330-02
アパレル

トイストア

トイストア
トイストア

ファッション

ファッション
ファッション

ファニチャーストア

ファニチャーストア
ファニチャーストア

ペットショップ

ペットショップ
ペットショップ

ヘルス

ヘルス
ヘルス

スキューバ

スキューバ
スキューバ

ウォッチ

ウォッチ
ウォッチ

バッグショップ

バッグショップ
バッグショップ

テクノロジーストア

テクノロジーストア
テクノロジーストア

4. 標準のテンプレート「ベーシック」

ベーシックテンプレート
ベーシック

5. オリジナルテンプレートを作るのって面倒くさい?

ベーシックと市販のテンプレートで見た目が随分違います。

ではオリジナルテンプレートを作るからと言ってテンプレートファイルを沢山用意する必要があるのかというとそうではなく、実は市販のテンプレートも部品となるテンプレートファイル(.tplファイル)はなんとたったの数個だったりします。

ではどのように作成するかというと、やはりCSSが重要になってきます。

6. オリジナルテンプレートのアップロード場所

[CS-Cartのインストールディレクトリ]/var/skins_repository
作成したオリジナルテンプレートは [CS-Cartのインストールディレクトリ]/var/skins_repository にアップロードします。

フリー版のディレクトリ構造を覗いてみると標準テンプレートの「basic」があります。

7. スキンセレクタで作成したオリジナルテンプレートに切り替えると

var/skins_repository/[作成したオリジナルテンプレートのフォルダ名] から skins/[作成したオリジナルテンプレートのフォルダ名] にファイルがコピーされます。

この時になんと足りないファイルは標準テンプレートの「basic」var/skins_repository/basic からコピーして skins/[作成したオリジナルテンプレートのフォルダ名]配下に配置してくれます。

まとめると

  • 改造したいもの/新たに追加したいものだけを自作すれば良い。
  • 必要なテンプレートは決まっているのでbasicをよく観察する。
  • 後はCSSで割りとなんとかなる。

8. 実際に作ってみよう!

ディレクトリ名を決める

var/skins_repository/mentai
var/skins_repository の下に mentai というオリジナルのフォルダを作成しました。

manifest.iniの作成

var/skins_repository/mentai/manifest.ini
var/skins_repository/mentai の下に manifest.ini というファイルを作成します。
※このファイルはUTF-8(BOMなしで作成しておきましょう)

manifest.iniの中身

description = "Mentai skin"
admin = "N"
customer = "Y"

[Customer_logo]
filename = "logo.png"
width = 176
height = 42

[Mail_logo]
filename = "invoice_logo.png"
width = 176
height = 42

[Admin_logo]
filename = "logo.png"
width = 115
height = 20

[Gift_certificate_logo]
filename = "gift_cert_logo.png"
width = 176
height = 42

manifest.iniの書き方

manifest.ini

customer_screenshot.pngの配置

customer_screenshot.png
var/skins_repository/mentai の下に customer_screenshot.png というファイルを作成します。
スキンセレクタで表示される画像で、横幅300px以上 で作っておくと良いです。

WordPressのテーマでいう、screenshot.pngです。

スキンセレクタでオリジナルテンプレートを選択

スキンセレクタ

作成したテンプレートの集合体をCS-Cartでは スキン と呼びます。
スキンセレクタで、作成したオリジナルテンプレートのスキン mentai を選択出来るようになるので、選択して 保存 を押下します。

[CS-Cartのインストールディレクトリ]/skins
[CS-Cartのインストールディレクトリ]/skins の下に mentai がコピーされ、足りないファイルは basic からコピーされています。

9. CS-Cartのスタイルシート

[CS-Cartのインストールディレクトリ]/skins/mentai/customer/

  • skins/mentai/customer/base.css・・・CS-Cartの基本的な構造が書いてある
  • skins/mentai/customer/styles.css・・・basicのデザインが書いてる

この2つのCSSはバージョンアップで変更される可能性があり、マージなど面倒になる可能性もあるので基本は触らないこととします。

10. 独自のCSSの読み込み方

var/skins_repository/mentai/customer/addons/my_changes/hooks/index/styles.post.tpl

少し階層が深くなるのですが var/skins_repository/mentai/customer/addons の下に my_changes フォルダを作成して、その中にhooks フォルダ、hooksの下 に index フォルダを作成して styles.post.tpl というファイルを作成します。

var/skins_repository/mentai/customer/addons/my_changes/hooks/index/styles.post.tpl

<link href="{$config.skin_path}/addons/my_changes/styles.base.css" rel="stylesheet" type="text/css" />

var/skins_repository/mentai/customer/addons/my_changes/styles.case.css

これでショップページでmy_changes フォルダ内の styles.base.css というCSSファイルを読み込んでくれるようになります。

ただし skins_repository に置いたファイルはスキンを選択しなおさないと新たにコピーされないのでご注意ください。

11. パッケージング

  • 変更したファイルのみ
/var/skins_repository/mentai/に入れる。
  • 配置したブロックをエクスポート
(XMLファイルです)
  • 取説などを書いてZIPに固める
  • CS-Cartマーケットに登録申請

オリジナルテンプレートの作成が完了したらパッケージとしてまとめて配布出来るようにしましょう。

12. ブロックをエクスポート

ブロック管理
管理画面よりメニューの デザイン → ブロック を選択します。

ロケーションのエクスポート
ブロックの管理で変更したブロック構造を ロケーションのエクスポート よりXMLファイルとして吐き出します。
オリジナルのテンプレートに含めて置くと、デフォルトのブロック構造を指定出来て便利です。

13. 勉強会の様子

勉強会の様子1
CS-Cartについて熱く語る吉浦さん。

勉強会の様子2
参加者(僕)に優しく教えて下さっている吉浦さん。

遅れて登場するYUKIさん
遅れて登場のデザイナーYUKIさん。

こんな無茶ぶりも
時にはこんな無茶ぶりをする吉浦さん(※実話です)。

14. まとめ

本当はスタティックテンプレートの作成や多言化の話もあったのですが、書き疲れた長くなったので今回はこのへんで。

テンプレートファイルをほとんど作成しなくてもCSSとブロックの管理でかなりいろいろなことが出来るので、デザイナーの方もカスタマイズしやすいかもしれません。

今後、アドオン作成講座やテンプレートカスタマイズ、テーマコンテストも予定しているCS-Cartに注目ですね。

  

共有やブックマークなど