『EC-CUBE 3』が5月末にリリース予定の中で2系の話とか今更感丸出しなんですが・・・
ずっと放置プレイしていたECサイトを、4月21日の「モバイルフレンドリー」に向けサクッとレスポンシブに切り替えられるサービスを探していました。
『EC-CUBE 3』のプレスリリースを見る限りかなりの大幅アップデートっぽいので、本来はそちらを入れたいところですが、4月21日には間に合わない・・・ということで今回の「eccube-bootstrap」で一旦やり過ごすことに。
eccube-bootstrapについて
http://blog.nagaki.me/practice/released-eccube-bootstrap.html
こちらの方がフリーで配布しているEC-CUBEの無料テンプレート。
EC-CUBEのテンプレートってみんな結構いい値段がするから無料というのは非常にありがたいです。
作者さんありがとうございます(^o^)
軽く触ってみましたが、自分のような初心者レベルの人間でも簡単にインストール出来ました！
eccube-bootstrapのインストール
eccube-bootstrapのダウンロード
まずはこちらのサイトからダウンロード。
https://github.com/nagaki/eccube-bootstrap
ダウンロードしたファイルを解凍するとこんな感じになります。
ftpソフトでeccube-bootstrapをアップロード
デスクトップに解凍すると、
\Desktop\eccube-bootstrap-master\data\Smarty\templates\bootstrap
\Desktop\eccube-bootstrap-master\html\user_data\packages\bootstrap
こんな感じの階層になっていると思います。
僕はそれぞれの bootstrap フォルダを、EC-CUBEの該当フォルダにアップロードしました。(間違ってたらごめんなさい)
/xxxxxxx/data/Smarty/templates/
/xxxxxxx/user_data/packages/
上記はサーバー上のアップロードフォルダです。
データベースの設定
このままだと動かないとのことなので、データベースにSQLを流します。
SQL文はこちら。
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だと若干ソースが変わっていました。
下記のような形でコメントアウトしました。
public static function detectDevice($reset = FALSE)
{
if (is_null(SC_Display_Ex::$device) || $reset) {
$nu = new Net_UserAgent_Mobile();
// $su = new SC_SmartphoneUserAgent_Ex();
if ($nu->isMobile()) {
SC_Display_Ex::$device = DEVICE_TYPE_MOBILE;
// } elseif ($su->isSmartphone()) {
// SC_Display_Ex::$device = DEVICE_TYPE_SMARTPHONE;
} else {
SC_Display_Ex::$device = DEVICE_TYPE_PC;
}
}
return SC_Display_Ex::$device;
}
以上で設定完了！
制作者さんに感謝感謝です！
eccube-bootstrapを使ってみての感想
PCはこんな感じ！
スマホはこんな！
ソースコート自体もシンプルな感じだったので、色々カスタマイズもできそうな気がしています。(素人なりに)
今気づいていることとしては、description が2回表示されている場所があるくらい。
そこに関しては触ってみて撤去しようと考えています。
さいごに
今回の導入にあたり、
http://blog.nagaki.me/practice/released-eccube-bootstrap.html
http://sterfield.co.jp/officer/ec-cube%E3%81%AE%E7%84%A1%E6%96%99bootstrap%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88.html
こちらの記事を参考にさせていただきました。
ありがとうございました！