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で作られている方もいたようです。

More from my site


Filed under: EC-CUBE

Trackback Uri


6 Comments.

  • 千両みかん says:

    お忙しいところ、突然失礼いたします。
    EC-CUBE2.13.3で使えるレスポンシブテンプレートを探しておりまして、こちらのeccube-on-bootstrap3を一昨日にダウンロード&インストールさせていただきました。
    とてもよく実装されていて感心ておりますが、一部でエラーが起きてしまい、原因の究明に困っている状況です。
    具体的には、「MYページ」画面の購入履歴一覧からひとつの購入履歴をクリックして「購入履歴詳細」画面に遷移したところで、以下のエラーが表示されます。
    「テンプレートの操作に失敗しました。
    table tr が存在しません」
    また、当該エラー画面のソースを見ると、部が2回出力されていて、画面表示上ではヘッダー部あたりが2回表示されて画面が崩れております。「購入履歴詳細」以外の画面は正常に動作しているようです。
    EC-CUBEも始めたばかりで、カスタマイズの仕組みもまだよく理解できておりません。このため、多分に基本的なところで間違いを起こしている可能性がございますが、原因または原因究明の方法がございましたら、ご教示いただけると幸いでございます。
    ちなみに、EC-CUBE管理画面のエラーログに何も表示されませんので、パーミッションの問題とか、本当に基本的なことなのかもしれません。
    お忙しいところ、ぶしつけなお願いで大変恐縮ですが、もしお時間ございましたら、よろしくお願いいたします。

  • 千両みかん says:

    たびたび申し訳ございません。
    先ほどの「購入履歴詳細」画面でのエラーですが、クーポン割引のプラグインを無効にしましたところ、正常に動作いたしました。
    デフォルトのテンプレートですと、クーポン割引のプラグインを有効にしても「購入履歴詳細」画面は正常に表示されますので、eccube-on-bootstrap3とクーポン割引とではどこかでバッティングしてしまっているようです。
    ということで、おそらく、クーポン割引のプラグイン側でeccube-on-bootstrap3のテンプレートに合わせるようにする必要がありそうです。
    お騒がせいたしましたが、どちらも使えるように頑張ってみたいと思います。大変失礼いたしました!

  • clicktx says:

    解決済みと思いますが、デフォルトテンプレート以外でプラグインを使用する場合はテンプレートに最適化しないと正常動作しないことが多いと思います。

    このテンプレートの場合、プラグインにもよりますが、フロント側を操作するプラグインの場合は調整なしではほぼ動作しないと思います。

  • hiro says:

    はじめまして。ECキューブを レスポンシブ化に対応したく、ここのホームページにたどり着きました。
    さっそく使わせていただき、希望通りのページができそうで満足しております。ありがとうございます。

    ひとつ、ご教授いただきたいのですが、
    ディスプレイ画面を縮小すると、3カラムが2カラムに変わり、
    左カラムの下に右カラムが配置されるようになっていると思います。

    (テンプレートをいじっているので、おかしくなってしまったかもしれませんが)
    その2カラムの状態の時、左カラムの下にあるべき右カラムが消えてしまう現象が起きました。
    原因を追究したところ、左カラムのコンテンツの高さがメインカラムの高さを超えた場合に起きる様です。

    メインカラムに無理やり高さを出してあげれば解決できるとは思うのですが、もう少しスマートな方法がありましたらご教授いただけるとありがたいです。

    もしお時間がありましたら、よろしくお願いします。

  • eccubeorg says:

    ありがとうございました!

Trackbacks/Pingbacks

  1. […] eccube-bootstrap を使わせていただきました。デフォルトのテンプレートをレスポンシブル化されたものです。 […]



コメントする