意外と情報が少なくて驚いた
参考
EC-CUBE：テンプレートにブロックを直接インクルード | brown crown blog
やりたいこと
MovableType+ECCUBE2っていう一時期流行った構成のWEBサイトがある。商品検索を付けたい。Header・FooterをMTとECCUBEで兼用してるせいでそこにブロック要素（商品検索）を突っ込めない。
共通コンテンツには載せられないから特定ページに載せるしかないよな。
レイアウト機能が死んでるのでテンプレートに直接乗せるしかない。
商品検索は動的要素だから.tplを直接読ませてもまともに機能しない。
やっていく。
環境
ECCUBE 2.11.4
独自カスタマイズが成されていて何が何だか分からない状態。
初期のデザインデータが残ってないのでほんと謎な仕上がりになってる。
ブロック要素の調整
今回は商品検索をやるので
/frontparts/bloc/search_products.php を編集する。
開いて、
$objPage->init();
$objPage->process();を
$objPage->init();
$objPage->setTplMainpage('search_products.tpl');
$objPage->process();にする。
ブロックの挿入
デザイン管理のページ詳細設定からページを開くか、site_main.tplを開くか、まあ挿入したいやつを選んで入れたい箇所に下記を挿入する。
<!--{include_php file=`$smarty.const.HTML_REALDIR`frontparts/bloc/search_products.php}-->上書きして再読込して確認して終わり。
スマホ表示でも同様にしたければ、スマートフォンの「ページ詳細設定」と「ブロック設定」でPCと同じものを作る。ファイル名が合ってれば自動的に切り替わって表示される。
活用：CMSをまたいでブロック要素を使用する
要するに、MTで表示している状態でもECCUBEの商品検索を使えるようにする。
準備
上記過程を踏襲して、「共通のヘッダーを使用する」「共通のフッターを使用する」にチェックを入れていない、商品検索だけが入ったページを作成し、URLを控える。
挿入
iframeで商品検索だけが入ったページを読み込む。
調整
「ブロック設定」から、submitするinputなりbuttonなりに以下の内容を追記する。
formtarget="_parent"formtarget属性といって、aのtargetみたいに表示先を指定できる。
これによってiframe内のformによる画面遷移が親要素を対象として行われる。
HTML5が怖いなら、form自体にtargetを突っ込むのもあり。
デザイン
iframeをポップアップにするなりコンテンツとして馴染ませるなり、cssであれこれやる。
おしまい。
コメント