eccube-on-bootstrap3 の紹介
「eccube-bootstrap」というEC-CUBEの無料テンプレートについて書いたばかりだったのですが、更に良さそうなテンプレートを見つけたので追記。
今回のテンプレートのほうがアップデートもされているようなので安定してそう。
eccube-on-bootstrap3のインストール
eccube-on-bootstrap3のダウンロード
こちらのサイトにて画像のリンクからダウンロードします。
https://github.com/clicktx/eccube-on-bootstrap3
eccube-on-bootstrap3のインストール
EC-CUBE管理画面のグローバルナビから、テンプレートの追加画面へ行きます。
テンプレートコード・・・bootstrap3(好きな文字列でOK)
テンプレート名・・・eccube-on-bootstrap3(好きな文字列でOK)
テンプレートファイル・・・eccube-on-bootstrap3-master.tar.gzを参照
上記のように入力して登録します。
EC-CUBEの設定
こちらの記事でも書いたのですが、デバイスの判定を弄る必要があります。
レスポンシブデザインを利用する場合は、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とデフォルトの比較
EC-CUBEデフォルト
eccube-on-bootstrap3
ちゃんと動いてくれました！
まだ弄りきれてないのでなんともですが、
どちらにするかこれから考えてみます！
同じようにモバイルフレンドリーの件でお急ぎの方がいたらおすすめですよ！