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.