WebデザイナーがBootstrap4対応のEC-CUBE4テンプレを作ってみたのでやり方と注意点などをまとめたいと思います。
なぜBootstrap4対応テンプレートを作ったのか？
EC-CUBE4のデフォルトテンプレートは一応Bootstrap3が読み込まれていますが、グリッドなどはEC-CUBE4のデフォルトスタイルを使ってます。
デフォルトのままだとスタイルについて新しく覚える必要があるのと、グリッドの使い勝手も違うのでBootstrap4と同じ感覚でコーディングできないため、Bootstrap4を入れました。
ダウンロードはこちらから。無料でダウンロードできます。
意外と簡単に作れるEC-CUBE4テンプレート
最初はボイラープレート的な感じで完全にBootstrap4に置き換えたものを作ろうと思ってたのですが、ログインページや決済ページ、マイページなどページ数が多くフルカスタマイズは断念。
そこで、EC-CUBE4の特徴である、**「テンプレートファイルがなければデフォルトが読み込まれる」**ことを利用して、必要なページだけテンプレートファイルを作成することにしました。要はWordpressの子テーマみたいな感じです。
このやり方なら、CSSでデフォルトスタイルを変更（主に配色）し、変更したいページだけテンプレートファイルを作ってカスタマイズ。あとはブロックを使ってコンテンツを追加するだけでかなり見栄えのいいECサイトを作れます。
EC-CUBE4は公式でデザインデータも公開されており、これを使ってあらかじめデザインしておけばコーディングもかなり楽になります。
テンプレートインストールでブロックが読み込まれない問題
ところがここで問題発生。コンテンツをブロックで追加して全体のコーディングが終わり、サーバーで動作テストしたところ、ブロックが読み込まれないという事態に。ブロックはデータベースに登録されないと読み込まれないので画面に何も表示されません。
管理画面から同じファイル名のブロックを作れば認識されるかとも思ったのですが、ブロック作成時にコードが上書きされるのでコードの中身を１つ１つコピペしないといけません。
そこでブロックインストーラを作りました。
このプラグインに必要なブロックファイルを入れておけば管理画面からコピペ作業なしでブロックをインストールできます。
データの読み込みはどうする？
ここまででフロントエンド部分は完成したのですが、重要なことが１つ残っています。それは新着商品や売り上げランキングのブロックにデータを紐付けるということです。
というのもHTMLコーディングで見た目はそれっぽくなっているものの、データベースとのつなぎ合わせができてないので、商品を追加しても画面が更新されないのです。
その部分は以前作成した、「UICube」を使います。UICubeではデータの読み込むプログラムがすでに用意されてるので、ブロックのコードをBootstrap4テンプレのものに置き換えれば問題なく使用できます。
- ダウンロードはこちら
完成！
これでフロント部分からデータの紐付けまで完成しました。あとは運用に必要な決済プラグインなどを入れればネットショップの運営をスタートできます。
EC-CUBE4のテンプレート構造やTwigなど見慣れないところはあるかもしれませんが、テーマの制作だけならデザイナーの方でも問題なくできると思います。
今すぐ使える！最新版EC-CUBE4.3対応 格安レスポンシブテンプレート公開中
最新版EC-CUBE4.3に対応したレスポンシブテンプレートを公開しています。あらかじめデザインされたUIブロックを多数同梱しているので、面倒なコーディングなしに今すぐショップを構築したい方におすすめ。
5つのレイアウトパターンの中から選んで今すぐネットショップを公開できます。
-> 詳細はこちら
具体的なカスタマイズ方法とリソースまとめ
ここまでテンプレートの大まかな制作過程をまとめてみましたが、具体的なカスタマイズ方法については別記事で紹介しています。カスタマイズする際は公式ドキュメントや運用ガイドも合わせてチェックしておきましょう！
- EC-CUBE4開発者向けドキュメント
- EC-CUBE4のデフォルトスタイルガイド
- EC-CUBE4管理運用マニュアル
- E-CUBE4初心者のテンプレートカスタマイズ入門
- EC-CUBE4テンプレートのTwigの使い方
- EC-CUBE4でブロックやテンプレートから必要なデータを取得する方法
まとめ
EC-CUBE4は使い勝手もよくなっていて、クラウド版も出ているのでこれからますます利用者が増える可能性があります。
ただWordpressほどテーマが公開されてる訳でもなく、まだまだ情報も少ない状態。このサイトではこれからもEC-CUBE情報を書いていくので少しでも助けになればと思います。
無料テンプレートに関するお問い合わせや、カスタマイズのご依頼があればこちらのページからお問い合わせください。EC-CUBE4はデザイン〜フロントエンドまで対応可能です。