[eccube2]動的ブロック要素をページに直接埋め込む

意外と情報が少なくて驚いた

参考

EC-CUBE:テンプレートにブロックを直接インクルード | brown crown blog

やりたいこと

MovableType+ECCUBE2っていう一時期流行った構成のWEBサイトがある。商品検索を付けたい。Header・FooterをMTとECCUBEで兼用してるせいでそこにブロック要素(商品検索)を突っ込めない。

共通コンテンツには載せられないから特定ページに載せるしかないよな。
レイアウト機能が死んでるのでテンプレートに直接乗せるしかない。

商品検索は動的要素だから.tplを直接読ませてもまともに機能しない。
やっていく。

環境

ECCUBE 2.11.4
独自カスタマイズが成されていて何が何だか分からない状態。
初期のデザインデータが残ってないのでほんと謎な仕上がりになってる。

ブロック要素の調整

今回は商品検索をやるので
/frontparts/bloc/search_products.php を編集する。

開いて、

にする。

ブロックの挿入

デザイン管理のページ詳細設定からページを開くか、site_main.tplを開くか、まあ挿入したいやつを選んで入れたい箇所に下記を挿入する。

上書きして再読込して確認して終わり。

スマホ表示でも同様にしたければ、スマートフォンの「ページ詳細設定」と「ブロック設定」でPCと同じものを作る。ファイル名が合ってれば自動的に切り替わって表示される。

活用:CMSをまたいでブロック要素を使用する

要するに、MTで表示している状態でもECCUBEの商品検索を使えるようにする。

準備

上記過程を踏襲して、「共通のヘッダーを使用する」「共通のフッターを使用する」にチェックを入れていない、商品検索だけが入ったページを作成し、URLを控える。

挿入

iframeで商品検索だけが入ったページを読み込む。

調整

「ブロック設定」から、submitするinputなりbuttonなりに以下の内容を追記する。

formtarget属性といって、aのtargetみたいに表示先を指定できる。
これによってiframe内のformによる画面遷移が親要素を対象として行われる。

HTML5が怖いなら、form自体にtargetを突っ込むのもあり。

デザイン

iframeをポップアップにするなりコンテンツとして馴染ませるなり、cssであれこれやる。

おしまい。

シェアする

  • このエントリーをはてなブックマークに追加