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

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

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

利用方法

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

また、レスポンシブデザインを利用する場合は別途、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を使えることで格段にカスタマイズのしやすさがアップしますね。ありがたいテンプレートです。