Tag: EC-CUBE





2014年 6月 3

作り始めたキッカケはこちらのエントリー。

eccube-bootstrapというEC CUBE用のテーマを作りました。

初めはこちらのテンプレートをカスタマイズして使おうかと思ったのですが、BootStrapのバージョン3を使ったものが欲しくなった&勉強のため(勉強会のため?)に作り始めました。

使用バージョン

また、BootStrapのアイコンは少なめなのでFont Awesomeというwebフォントアイコンも使っています。

デモサイト

ちなみに開発時の表示確認(実機)は

  • mac
  • iPhone5
  • iPad mini Retina

となります。レスポンシブの表示確認をサクッとしたい方は以下のサービスがオススメです。

リポジトリ

githubで公開しています。

テンプレートの特徴

  • モバイルファースト
  • レスポンシブweb
  • フラットデザイン
  • vimキーバインド(おまけ)

一応力を入れたのはスマホ&タブレットとなります。BootStrap バージョン3の使用感ですが、モバイルファーストを謳っているだけあってスマホとかタブレット用のビューが以前のバージョンよりも作りやすくなっています。

ただテキストサイズやmargin、paddingなんかを微調整したい時があるので、ヘルパー的なCSSを書いて使っています。BootStrapの命名規則に倣って margin-xspadding-bottom-lg みたいなclassにしています。

製作期間

2月7日から始めて5月24日までと、約4ヶ月掛かってしまいました。実は4月の初旬に間に合うように作業をしていたのですが、予想以上に時間が掛かってしまいました。

今回は作業時間をメモをしていたのですが、合計は100h程度(メモしてある時間の総計は94.5h)になります。業務時間以外にはなかなか時間が取れないものですね。

ローカル環境で開発する場合はシンボリックリンクを使うと便利

テンプレートをローカル環境で開発していていると、CSSの変更を頻繁に行う場合の表示確認が非常に面倒です。

何故かと言うと、テンプレート用に使われる静的ファイル群(CSSやJavaScript、image等)は公開用ディレクトリにアップロードされるので、テンプレートディレクトリにあるファイルに変更を加えても反映されないからです。

EC-CUBE/data/Smarty/templates/TEMPLATE_NAME にテンプレート本体がインストールされますが、

TEMPLATE_NAME/_package/ 以下にまとめられているファイルは、管理画面からテンプレートを追加する時に

EC-CUBE/html/user_data/packages/TEMPLATE_NAME/ 以下にアップロードされる仕組みになっています。

htmlディレクトリ、つまり、公開用ディレクトリにあるCSSが参照されるので、
EC-CUBE/data/Smarty/templates/TEMPLATE_NAME/css の中身を更新しても反映されない…という事になります。

完成したテンプレートをインストールする時なら何も問題ないのですが、製作中のテンプレートの場合はガシガシ書いたり消したりしたいので非常に面倒です。

解決策

そこで EC-CUBE/html/user_data/packages/TEMPLATE_NAMEEC-CUBE/data/Smarty/templates/TEMPLATE_NAME/_package/ を参照するようにシンボリックリンクを貼ってしまいます。

これで、EC-CUBE/data/Smarty/templates/TEMPLATE_NAME/ 内のファイルを管理すれば良いだけの環境になります。自分はここを git init してローカルリポジトリを置いています。

テンプレートの実装について

EC-CUBEのオーナーズストアで販売されているレスポンシブテンプレートはテンプレートという名前ですが、どうやらプラグインとして作られているようです。

テンプレートだとphpに変更や追加が一切行えないので、現在はプラグインとして作られているようです。というのも、レスポンシブデザインの場合はスマートフォン用のテンプレートを無効にしなくてはならないのですが、これがphpを変更しなくては実現できないためだと思われます。

EC-CUBE on BootStrap3は「テンプレート」となりますので、スマートフォン用のテンプレートを無効にするようにphpの変更が必要になります(githubのREADMEに記載されています)← 便利なプラグインが有りました(スマートフォン・携帯アクセス制御プラグイン

また、EC-CUBE on BootStrap3の場合はphpを一切イジらないというコンセプトのもとで製作していますので、下記2点は無理やり実装している感じになります。

カートのバッジ表示

カートのバッジ
PHPをイジらない限りカートブロックのテンプレート変数(カートに入っている商品数)を他のテンプレートでは値を取得出来ません。そのためJavaScriptで無理やり表示しています。カートブロックは常時表示する必要があります。カートブロックを使用していないページではカートのバッジが表示されません。

ページネーション

EC-CUBEのページネーションは表示部分のHTMLをテンプレートでは変更する事が出来ないためBootStrapのCSSを無理やり適用しています。

今後行いたいこと

コードのリファクタリング

完成と言いながら書きなぐりのコードが放置されています。CSSの使っていない部分とかコメントアウトしまくり状態だったり、JavaScriptが散らかっていたり。時間が取れた時にボチボチキレイにしていく予定です。

他の方のテンプレート

BootStrap3で作られている方もいたようです。


Filed under: EC-CUBE

Trackback Uri






2014年 4月 13

Gunma.web#16で話してきました。

発表したスライドはこちら

開発中となりますが、githubにあげました。リポジトリはこちら。
https://github.com/clicktx/eccube-on-bootstrap3

デモサイト

ちゃんと出来上がったらエントリー書きます。

反省点

時間のことを意識しすぎてしまったかも。デモをちょっとやればよかったかな。


Filed under: EC-CUBE,勉強会

Trackback Uri






2014年 3月 12

2014年4月12日(土)開催予定の Gunma.web #16 にて「EC-CUBE on Bootstrap3」という内容で発表予定なのですが、開催前に少しだけ告知します。

今回は重い腰を上げて、Bootstrap3に触れてみたのでその事についてのお話をしようかと思っています。開催前に告知とかネタバレなのですが、笑いとオチをふんだんに盛りこまなくてはいけないプレッシャーからは開放される気がします。

当日はTwitter Bootstrap3で作ったEC-CUBE 2.13用のレスポンシブデザインテンプレート(16.8万円相当???*1 をご希望の方に配布したいと思っています!

そのためには、当日までに仕上げる必要がありますね!自分でハードルを上げている感満載なのですが、残り1ヶ月あるのでとりあえず頑張ります!

Gunma.web #16の募集人数は30名となっています。今のところ残数20名程。下記リンク先から参加登録できますのでご覧下さい!

*1 あくまでも販売されているテンプレートの価格です。16万8千円というと足代引いてもお釣りがくるので遠方からも参加する価値がありますね!:)


Filed under: EC-CUBE,勉強会

Trackback Uri






2014年 2月 13

_package/sql/update_bloc.sqlで初期レイアウトを決めているようだけれど、古い情報しかない。

target_id がどのブロックを指しているのか全く情報がないので一覧表作った。対応しているのはEC-CUBE 2.13。2.12系も同じかも。

dtb_blocpositionテーブル target_id早見表

dtb_blocpositionテーブル target_id早見表

もしかしてどこかにあるのかも知れない。


Filed under: EC-CUBE

Trackback Uri