eccube-on-bootstrap3 の紹介

「eccube-bootstrap」EC-CUBE無料テンプレートで簡単にレスポンシブのHTML5に変更!初心者でも◎


「eccube-bootstrap」というEC-CUBEの無料テンプレートについて書いたばかりだったのですが、更に良さそうなテンプレートを見つけたので追記。
今回のテンプレートのほうがアップデートもされているようなので安定してそう。

eccube-on-bootstrap3のインストール

eccube-on-bootstrap3のダウンロード

eccube-on-bootstrap3-downroad

こちらのサイトにて画像のリンクからダウンロードします。
https://github.com/clicktx/eccube-on-bootstrap3

eccube-on-bootstrap3のインストール

eccube-on-bootstrap3-setting-1

EC-CUBE管理画面のグローバルナビから、テンプレートの追加画面へ行きます。

eccube-on-bootstrap3-setting-2

テンプレートコード・・・bootstrap3(好きな文字列でOK)
テンプレート名・・・eccube-on-bootstrap3(好きな文字列でOK)
テンプレートファイル・・・eccube-on-bootstrap3-master.tar.gzを参照

上記のように入力して登録します。

EC-CUBEの設定

「eccube-bootstrap」EC-CUBE無料テンプレートで簡単にレスポンシブのHTML5に変更!初心者でも◎


こちらの記事でも書いたのですが、デバイスの判定を弄る必要があります。

レスポンシブデザインを利用する場合は、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;
}
}

EC-CUBEはデフォルトだと自動でデバイスの判定をして、スマートフォンのテンプレートを読み込みます。
この設定を無効にしてねということですね。

/xxxxxx/data/class/SC_Display.php

こちらのファイルですが、僕がインストールしているEC-CUBEだと若干ソースが変わっていました。
下記のような形でコメントアウトしました。

eccube-on-bootstrap3テンプレの反映

eccube-on-bootstrap3-setting-3

ナビゲーションからテンプレート設定へ移動します。

eccube-on-bootstrap3-setting-4

先ほどアップロードしたテンプレが反映されていますので選択して登録。

以上で設定は完了です。

eccube-on-bootstrap3とデフォルトの比較

EC-CUBEデフォルト

eccube-on-bootstrap3-before

eccube-on-bootstrap3

eccube-on-bootstrap3-after

ちゃんと動いてくれました!
まだ弄りきれてないのでなんともですが、

どちらにするかこれから考えてみます!
同じようにモバイルフレンドリーの件でお急ぎの方がいたらおすすめですよ!