Bootstrap4対応 EC-CUBE4無料テンプレート作りました

WebデザイナーがBootstrap4対応のEC-CUBE4テンプレを作ってみたのでやり方と注意点などをまとめたいと思います。

なぜBootstrap4対応テンプレートを作ったのか?

なぜBootstrap4対応テンプレートを作ったのか?

EC-CUBE4のデフォルトテンプレートは一応Bootstrap3が読み込まれていますが、グリッドなどはEC-CUBE4のデフォルトスタイルを使ってます。

デフォルトのままだとスタイルについて新しく覚える必要があるのと、グリッドの使い勝手も違うのでBootstrap4と同じ感覚でコーディングできないため、Bootstrap4を入れました。

Bootstrap4

ダウンロードはこちらから。無料でダウンロードできます。

意外と簡単に作れるEC-CUBE4テンプレート

意外と簡単に作れるEC-CUBE4テンプレート

最初はボイラープレート的な感じで完全にBootstrap4に置き換えたものを作ろうと思ってたのですが、ログインページや決済ページ、マイページなどページ数が多くフルカスタマイズは断念。

そこで、EC-CUBE4の特徴である、**「テンプレートファイルがなければデフォルトが読み込まれる」**ことを利用して、必要なページだけテンプレートファイルを作成することにしました。要はWordpressの子テーマみたいな感じです。

このやり方なら、CSSでデフォルトスタイルを変更(主に配色)し、変更したいページだけテンプレートファイルを作ってカスタマイズ。あとはブロックを使ってコンテンツを追加するだけでかなり見栄えのいいECサイトを作れます。

EC-CUBE4 デザインテンプレート

EC-CUBE4は公式でデザインデータも公開されており、これを使ってあらかじめデザインしておけばコーディングもかなり楽になります。

  • 公式デザインのダウンロードはこちら
  • Bootstrap4テンプレートのデザイン版はこちら

テンプレートインストールでブロックが読み込まれない問題

テンプレートインストールでブロックが読み込まれない問題1

ところがここで問題発生。コンテンツをブロックで追加して全体のコーディングが終わり、サーバーで動作テストしたところ、ブロックが読み込まれないという事態に。ブロックはデータベースに登録されないと読み込まれないので画面に何も表示されません。

テンプレートインストールでブロックが読み込まれない問題2

管理画面から同じファイル名のブロックを作れば認識されるかとも思ったのですが、ブロック作成時にコードが上書きされるのでコードの中身を1つ1つコピペしないといけません。

そこでブロックインストーラを作りました。

テンプレートインストールでブロックが読み込まれない問題3

このプラグインに必要なブロックファイルを入れておけば管理画面からコピペ作業なしでブロックをインストールできます。

データの読み込みはどうする?

データの読み込みはどうする?

ここまででフロントエンド部分は完成したのですが、重要なことが1つ残っています。それは新着商品や売り上げランキングのブロックにデータを紐付けるということです。

というのもHTMLコーディングで見た目はそれっぽくなっているものの、データベースとのつなぎ合わせができてないので、商品を追加しても画面が更新されないのです。

その部分は以前作成した、「UICube」を使います。UICubeではデータの読み込むプログラムがすでに用意されてるので、ブロックのコードをBootstrap4テンプレのものに置き換えれば問題なく使用できます。

データの読み込みはどうする?2

完成!

これでフロント部分からデータの紐付けまで完成しました。あとは運用に必要な決済プラグインなどを入れればネットショップの運営をスタートできます。

EC-CUBE4のテンプレート構造やTwigなど見慣れないところはあるかもしれませんが、テーマの制作だけならデザイナーの方でも問題なくできると思います。

具体的なカスタマイズ方法とリソースまとめ

ここまでテンプレートの大まかな制作過程をまとめてみましたが、具体的なカスタマイズ方法については別記事で紹介しています。カスタマイズする際は公式ドキュメントや運用ガイドも合わせてチェックしておきましょう!

まとめ

EC-CUBE4は使い勝手もよくなっていて、クラウド版も出ているのでこれからますます利用者が増える可能性があります。

ただWordpressほどテーマが公開されてる訳でもなく、まだまだ情報も少ない状態。このサイトではこれからもEC-CUBE情報を書いていくので少しでも助けになればと思います。

無料テンプレートに関するお問い合わせや、カスタマイズのご依頼があればこちらのページからお問い合わせください。EC-CUBE4はデザイン〜フロントエンドまで対応可能です。

Copyright © 2020 homupedia.com