Blog

EC-CUBEの無料Bootstrapテンプレート

2014.09.03Cat:EC 役員

久しぶりにEC-CUBEネタです。

いまさらですが、Bootstrapを勉強したいな〜と幅を広げる意味で漠然と考えていたのですが、なかなかそのきっかけを掴めず取り組んでいなかったのですが、よいものを見つけてしまいました。

http://blog.nagaki.me/practice/released-eccube-bootstrap.html

EC CUBEのデフォルトテーマがイケてないし、イケる予定もなさそうだったので、 >GitとかGitHubとかTwitterBootstrapとかHTML5の勉強も兼ねてテーマを作りました。

作者の方の引用ですが、私はまだ、作って頂いたBootstrapのテンプレートを用いての勉強です。
こういったアウトプットが出来るのってすごいなぁと思います。

ちなみに、作者様のサイトでは、

使用出来るバージョンは2.12系です

とありましたが、2.13系でも問題ありませんでした。

設定方法

まずは、こちらのテンプレートの適用の方法が通常とは違います。
レスポンシブウェブデザインとなっておりますので、これもスマートフォン用のテンプレートを出力するデフォルトの仕様とは異なります。
そして、SQLを操作する必要があります。ノンプラグラマの私はphpMyAdminでSQLを実行しましたが、そこら辺は割愛させていただきます。

テンプレートのダウンロードとアップロード

https://github.com/nagaki/eccube-bootstrap

解凍をすると
data
html
というフォルダが存在します。

通常通りインストールしていれば、そのまま、ルートのディレクトリにアップをすれば問題ないのですが、私のデモ環境は階層を変えていたので、調整してアップします。

基本は、それぞれのデータを以下のディレクトリに格納して下さい。
data\Smarty\templates\
html\user_data\packages\bootstrap

SQL文

このままですと、アップロードしただけですので、EC-CUBEのデータベースにBootstrapのテンプレートを認識させるために、以下のSQLを流します。

テンプレートの適用

screenshot

SQLをちゃんと適用すると上図のように、管理画面から選択が出来るようになります。

screenshot

適用するとこのデフォルト画面から

ECサイトのあれこれテストサイト 2014-09-03 15-18-54

スタイリッシュな画面になりました!

スマートフォンテンプレートへも適用

このままですとスマートフォンはまだデフォルトのテンプレートを表示してしまいますので、スマートフォンへもこのレスポンシブ対応したBootstrapのテンプレートを表示させるように致します。

こちらも引用となりますが、以下を削除もしくはコメントアウトをすると、スマートフォンの判定をせずにそのままPCのテンプレートを表示します。

レスポンシブテーマなので、data/class/SC_Display.phpにあるスマートフォン判定のコードを削除することで使用できます。

// data/class/SC_Display.php:141
function detectDevice() {
$nu = new Net_UserAgent_Mobile();
$su = new SC_SmartphoneUserAgent_Ex(); //削除
if ($nu->isMobile()) {
return DEVICE_TYPE_MOBILE;
} elseif ($su->isSmartphone()) { //削除
return DEVICE_TYPE_SMARTPHONE; //削除
} else {
return DEVICE_TYPE_PC;
}
}

screenshot

まとめ

素晴らしいテンプレートを作ってくれた作者に感謝。

これを機にいろいろ触ってみたいと思います。

Author Profile

mezaki

スターフィールド株式会社/代表取締役/副社長/EC/レスポンシブWebデザイン/Web制作/システム開発/lamp/.net/1985年生/2008年早大卒/西東京市/ひばりが丘/新宿区/高田馬場/江戸川区/瑞江/B級グルメ/料理/自作PC/熱帯魚/MBA11/ipad3rd/iphone4

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ