この記事は仕事でEC-CUBE4.0系をフルカスタムすることになったので、備忘録代わりに投稿します。
途中までしか書いていないので、気が向けば続きを書くかも？
EC-CUBE4.0系のSmartyについて
EC-CUBE4.0系とはSymfonyというフレームワークを元に、Smarty（PHPのテンプレートエンジン）で構築されたオープンソースのECサイト構築のパッケージである。
EC-CUBEではページ、レイアウト、ブロックの考え方になっており、以下の役割を担っている。
ページ
WPでいう固定ページに相当し、ホーム、概要、お問い合わせなど必要なページとなる受け皿を生成する。
また、ページ内で記述されたコードは、レイアウトのブロックを配置できないグレーの「main」エリアで実行される。
レイアウト
WPでいうpage.php、または{slag}-page.phpに相当する。
WPと異なる点として、下記のブロックを配置する配置可能分布エリアが決まっており、それぞれのエリアに「相当するブロック」を配置する。
しかし、これはあくまでも配置箇所の目安であり、ブロックとCSSの記述次第でデザインの再現はどうとでもなる。
噛み砕けば、WPのheader.phpの中に、ナビゲーションやパンくずなどのパーツをインクルードする感覚に近い。
インクルードもとのheader.phpが配置可能分布エリアの１エリアであり、そこにインクルードされるナビなどのパーツがブロックに相当する。
ブロック
レイアウトに配置する個別のパーツを指す。例えば や 、
など。
導入方法
- MAMPまたはレンタルサーバーを用意する。
- EC-CUBEパッケージをダウンロードする。
- ドメイン直下、または指定のフォルダ内にEC-CUBEの中身を全てコピーする。
- ブラウザでEC-CUBEのコピーされたディレクトリにアクセスし、サーバー情報などを入力する
- 入力情報に誤りがなければインストールは完了。
※簡単インストール機能があればそれを使うが、基本的に手動インストールを想定していた方が良いかもしれない
EC-CUBEを使わずに、まずは純粋にコーディング
デザインは既にあるという前提で、EC-CUBEではWPほど柔軟にコーディングするのが難しいため、前もって従来の手法（HTMLとCSS）で素のページを作っておく。
その後、必要に応じてブロック単位でパーツを分解していく。
※これについては独断と偏見なので、自分なりのやり方を見つけるか、チームのルールに従ってください。もしかしたら半年後にはWPと同じ様にコーディングしてるかもしれません。
管理画面からカスタムの準備を行う
1.パーツであるブロックを作成する
「コンテンツ管理＞ブロック管理」でパーツごとに分割したコードをコピーし、ブロックのラベル名とTwigのファイル名を決める。
このとき、/app/template/default/Blockに新しくtwigファイルが生成されるので、このtwigファイルをエディタで開いて直接ペーストするなり編集できる。
2.レイアウトを作成する
「コンテンツ管理＞レイアウト管理」でページごとの共通レイアウト（テンプレート）を作成する。
レイアウト管理内では作成したレイアウトに、共通となるヘッダーやパンくず、フッターなどのブロックを配置する。
ここで用意されたレイアウトは、次の3.ページを作成するで使うことができる。
3.ページを作成する
「コンテンツ管理＞ページ管理」で各ページを作成し、ページごとに必要なブロックの配置と、共通するレイアウトを設定する。
共通するレイアウトはレイアウト管理で作られたレイアウトから選べる。
4.URLから /user_data を消す
ページを作成した際にURLの入力欄にuser_dataがあったが、ページへアクセスするにはexample.com/user_data/ページURLと入力しないとアクセスできない。
user_dataが気にならないのであれば問題ないが、自分はexample.com/ページURLとしたかったので、方法は別記事で用意します。