EC-CUBEのブロックを作成・追加する方法

Pocket

ec-cube
EC-CUBEはWordpressと同様無料でダウンロードすることができ、テンプレートの変更やカスタマイズも可能です。
ただWordpressと違うのは新しいページやブロック(コンポーネント)を作るためにクラスファイルを用意しなければならないという点。ただ単にテンプレートファイルを作成しても動かない可能性があるということです。

ここではブロックを作って使えるように登録する方法を紹介します。

EC-CUBEに静的なブロックを追加する方法

静的(データのやり取りが発生しない)なブロックの場合はデータベースとのやり取りがないため、クラスファイルとの紐付けなどは必要ありません。

なのでテンプレートファイルを管理画面から登録すれば完了です。手順は以下の通り。

デザイン管理->PC->ブロック設定の画面からブロック名などを入力して、必要なコードを入れます。
eccubeブロックの追加方法1
次にデザイン管理->PC->レイアウト設定画面を開きます。右側に先ほど追加したブロックが表示されるので、これをドラッグ&ドロップして配置したい場所へ移動させます。
eccubeブロックの追加方法2
プレビューで表示を確認し、良ければ登録ボタンを押して登録完了。

EC-CUBEに動的なブロックを作成する方法

次は動的なブロックを追加する方法です。先ほどはデータのやり取りがない静的なブロックでしたが、こちらはデータベースのデータを引っ張ってくる必要があるので、何らかのクラスファイルと紐づけなければ使えません。

ここではオリジナルのカレンダーブロックを作成してみます。

先ほどと同じようにブロック作成画面を開きます。とりあえずカレンダーを表示させたいので、既存のカレンダーブロックのコードをコピーしましょう。

コードはカレンダーブロックの編集画面から取得したものを使いました。
eccubeブロックの追加方法3
この状態でブロックを配置しても以下の画像のように中身が何も表示されません。これはテンプレートファイルとクラスファイルが紐づけられていないためです。
eccubeブロックの追加方法4
この問題を解消するには新しく追加したブロックにクラスファイルを設定してやればOK。設定するにはデータベースを書き換える必要があります。

レンタルサーバーやローカルサーバーのphpMyAdminに接続してデータベースを開き、dtb_blocテーブルへ移動します。
eccubeブロックの追加方法5
ブロック一覧が表示されるので、先ほど追加したブロックを探し、編集リンクをクリック(ここではカレンダー2)。
ブロックの編集ページの下にあるphp_pathの欄にクラスファイルへのパスを指定します。ここではカレンダー機能を使うのでデフォルトのカレンダークラスをそのまま使用します。デフォルトにはない機能(ランキングなど)を使う場合は新しくクラスファイルを作成してパスを指定して下さい。

frontparts/bloc/calendar.php

eccubeブロックの追加方法6
ここまでできたらEC-CUBEの管理画面に戻ってもう一度カレンダーを表示してみましょう。今度はうまく表示されます(崩れてますが・・・)。
eccubeブロックの追加方法7

EC-CUBEに新しい機能を追加する

ここまでで動的なブロックの作成方法が分かったと思います。ただ、カレンダーの場合はデフォルトの機能をそのまま使用したので、新しくクラスファイルを作る必要はありませんでした。

デフォルトにはない機能を持ったブロックを追加するにはクラスファイルを用意する必要があります。カレンダーの場合は以下のようになっています。

  • classファイル : LC_Page_FrontParts_Bloc_Calendar.php
  • class_exファイル : LC_Page_FrontParts_Bloc_Calendar_Ex.php
  • phpファイル : calendar.php

新しく機能を追加するには最低でもこれらのファイルが必要です。また、データベースとのやり取りが発生するので、SQL言語の理解とDB_Helperクラスなどを読んで理解する必要があります。

そこまでやるのは難しい!という方のために、ECサイトに必要な機能を実装したテンプレートを作成しました。詳細はこちら

売上ランキングや新着商品などのブロックが使用可能です。また、Bootstrap3を採用し、レスポンシブレイアウトになっているため1つのテンプレートで複数の画面サイズにも対応しています。

今後もアップデートでブロックをどんどん追加する予定なのでEC-CUBEでECサイトを作ろうと思っている方は是非チェックしてください。