EC-CUBE3 用のプレーンな Bootstrap テンプレート
EC-CUBE3 からデフォルトのテンプレートに Bootstrap3 が採用されていますが、カスタマイズが諸々ほどこされているので、Twig の練習も兼ねプレーンな Bootstrap で実装をしてみました。(現在実装中)
素のままの Bootstrap で実装する
- Bootstrap で定義されているクラス名以外は使用しない(EC-CUBE の処理上どうしても必要な箇所は除く)
- スタイル(外部CSS、style要素、style属性)は一切加えない
- JavaScript も足さない(EC-CUBE で用意されているものは利用する)
- レイアウト用の素材として画像は一切使用しない(ダミー用の商品写真、バナー等は除く)
template
ディレクトリ直下にあるファイル一式を、EC-CUBE の app/template/default
に上書き。
$ rsync -av template/ {EC-CUBEのディレクトリ}/app/template/default
※ 反映されない場合は app/cache/twig/default
以下にあるキャッシュファイルを消去。
新規のテンプレートとして登録したい場合はまず、DBにテンプレートデータを追加します。
INSERT INTO `dtb_template` (`device_type_id`, `template_code`, `template_name`, `create_date`, `update_date`)
VALUES (10, 'bootstrap-plain-template', 'EC-CUBE3 Bootstrap Plain Template', NOW(), NOW());
つぎに、テンプレート用のディレクトリを用意。(html/template は default のをコピーして利用)
$ cp -R template {EC-CUBEのディレクトリ}/app/template/bootstrap-plain-template
$ cp -R {EC-CUBEのディレクトリ}/html/template/default {EC-CUBEのディレクトリ}/app/template/bootstrap-plain-template
最後に、管理画面の 設定 > オーナーズストア > テンプレート
画面にアクセスして、テンプレート一覧
にある EC-CUBE3 Bootstrap Plain Template
を選択して 登録
して下さい。
素の html を書くのが億劫なので jade をつかって Twig のテンプレートファイルを書き出しています。
src/jade
以下にある jade ファイルを編集後 gulp jade
コマンドを打つと template
ディレクトリに Twig ファイルが書き出されます。
- ✔
default_frame - ✔
block - ✔
index - ✔
pagination - ✔
Block/cart - ✔
Block/category - ✔
Block/footer - ✔
Block/free - ✔
Block/garally - ✔
Block/login - ✔
Block/logo - ✔
Block/new_product - ✔
Block/news - ✔
Block/search_product - ✔
Product/list - ✔
Product/detail - ✔
Cart/index - Shopping/login
- Shopping/index
- Shopping/nonmember
- Shopping/shipping
- Shopping/shipping_edit
- Shopping/shipping_multiple
- Shopping/complete
- Shopping/shopping_error
- Contact/index
- Contact/confirm
- Contact/complete
- Entry/index
- Entry/confirm
- Entry/complete
- Entry/activate
- Forgot/index
- Forgot/reset
- Forgot/complete
- Mypage/login
- Mypage/index
- Mypage/navi
- Mypage/change
- Mypage/change_complete
- Mypage/delivery
- Mypage/delivery_edit
- Mypage/favorite
- Mypage/history
- Mypage/mail_view
- Mypage/withdraw
- Myapge/withdraw_confirm
- Mypage/withdraw_complete
- Mypage/error
- Help/about
- Help/agreement
- Help/guide
- Help/privacy
- Help/tradelaw
- Form/form_layout
- error
Copyright(c) 2015 ynakajima [email protected]
Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved.