EC-CUBEにBootstrapを使ったテンプレートを適用してレスポンシブ対応する

harada 3,932views 更新:2014年4月23日

EC-CUBEでもBootstrapを利用して、簡単にカスタマイズしたいという方向けです。

eccube-bootstrapというテンプレートを配布してくださっている方がおり、こちらを利用します。
ダウンロードはこちらから。

利用方法

  1. ダウンロードしたzipを解凍します。
  2. それぞれ同じディレクトリに配置します。
    data\Smarty\templates に bootstrap
    html\user_data\packages に bootstrap
  3. phpMyAdminで、EC-CUBEで利用しているデータベースの中から dtb_templatesを開きます。
    SQLタブを開いて、下記を実行します。
    INSERT INTO dtb_templates VALUES ("bootstrap", 10, "bootstrap", now(), now());
  4. EC-CUBEの管理画面のデザイン管理PC>テンプレート設定 から「bootstrap」を適用します。
  5. 以上で適用されます。

また、レスポンシブデザインを利用する場合は別途、data/class/SC_Display.php にあるスマートフォン判定のコードを削除することで使用できるそうです。
下記の例ではコメントアウトしています。

        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;
            }//none elseif ($su->isSmartphone()) {
             //コメントアウト   SC_Display_Ex::$device = DEVICE_TYPE_SMARTPHONE;
            //コメントアウト   }
             else {
                SC_Display_Ex::$device = DEVICE_TYPE_PC;
            }
        }

テンプレートはなぜかh1タグがたくさんありますので、そこは調整が必要かもしれません。ですが、Bootstrapを使えることで格段にカスタマイズのしやすさがアップしますね。ありがたいテンプレートです。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません