日別アーカイブ: 2011 . 10 / 26

EC-CUBE 2.11 詳細ページをlightbox風に表示する

詳細ページなどをAjaxを使ってiframeで表示したいとき、共通のheader,footerを表示したくなかった。
でも管理画面のページレイアウト詳細設定で「共通のヘッダーを使用する」と「共通のフッターを使用する」のチェックボックスをはずしてしまうと、iframeで表示しない場合も表示されなくなってしまうので、iframeでの表示と通常の表示とで、読み込むヘッダーとフッタを変更したい。

1:まず
data/class_extends/SC_View_Ex.php
のassignTemplatePath()をオーバーライド
header_tpl_for_iframeとfooter_tpl_for_iframeとしてheader_iframe.tplとfooter_iframe.tplを新規で定義
[PHP]
function assignTemplatePath($device_type_id) {
parent::assignTemplatePath($device_type_id);
$templatePath = SC_Helper_PageLayout_Ex::getTemplatePath($device_type_id);
$header_tpl_for_iframe = $templatePath . “header_iframe.tpl”;
$footer_tpl_for_iframe = $templatePath . “footer_iframe.tpl”;

$this->assign(“header_tpl_for_iframe”, $header_tpl_for_iframe);
$this->assign(“footer_tpl_for_iframe”, $footer_tpl_for_iframe);
}

[/PHP]

2:該当するクラス(今回の場合は詳細ページなので)
data/class_extends/page_extends/products/LC_Page_Products_Detail_Ex.php
のprocessをオーバーライドし、arrPageLayoutにisIframeプロパティを追加。
クエリにdisplayMode=iframeとなっていたときにtrueに設定。

[PHP]
function process() {
$this->arrPageLayout[“isIframe”] = $this->getDisplayMode() == “iframe” ;
parent::process();
}
[/PHP]

displayModeはほかでも遣う気がしたのでページクラスを拡張
data/class_extends/page_extends/LC_Page_Ex.php
[PHP]
function getDisplayMode() {
$pattern = ‘/^[a-zA-Z0-9_]+$/’;
$mode = null;
if (isset($_GET[‘displayMode’]) && preg_match($pattern, $_GET[‘displayMode’])) {
$mode =  $_GET[‘displayMode’];
} elseif (isset($_POST[‘displayMode’]) && preg_match($pattern, $_POST[‘displayMode’])) {
$mode = $_POST[‘displayMode’];
}
return $mode;
}
[/PHP]

3:メインテンプレート
data/Smarty/default/site_main.tpl
にヘッダーとフッターを読み込むところがあるので分岐する。
[PHP]
<!–{if $arrPageLayout.isIframe}–>
<!–{include file= $header_tpl_for_iframe}–>
<!–{else}–>
<!–{include file= $header_tpl}–>
<!–{/if}–>
[/PHP]
[PHP]
<!–{if $arrPageLayout.isIframe}–>
<!–{include file= $footer_tpl_for_iframe}–>
<!–{else}–>
<!–{include file= $footer_tpl}–>
<!–{/if}–>
[/PHP]

4:読み込む専用のヘッダーとフッターを追加する
data/Smarty/default/header_iframe.tpl
data/Smarty/default/footer_iframe.tpl

5:html/products/.htaccessの内容を変更する。※!詳細ページを静的にしていない場合は必要ないです。
こちらのページを参考に詳細ページを静的URLにしていたので下記のように記述していたんですが、
RewriteRule ^detail([0-9]+).html+ detail.php?product_id=$1 [L]
これだURLのクエリ情報が付与されなかったため下記のように変更。
RewriteRule ^detail([0-9]+).html+ detail.php?product_id=$1&%{QUERY_STRING} [L]

*追記 2011/11/31
この記事関係のない部分で別の問題もあったので最終的に.htaccessはこうなった

6:lightbox的に表示したいのでプロダクトリストを編集する。今回はcolorboxを使用。
data/Smarty/default/products/list.tpl
jqueryとcolorboxを読み込んでおく。
[JAVASCRIPT]
$(document).ready(function() {
var colorbox_ajax = $(“.colorbox_ajax”);
$(“.colorbox_ajax”).each(function(){
var href = $(this).attr(“href”);
href += “?displayMode=iframe”;
$(this).attr(“href”,href);
});
$(“.colorbox_ajax”).colorbox({ width: “960px”, height: “420px”,iframe: true});
});
[/JAVASCRIPT]
[HTML]
<a href=”<!–{$smarty.const.P_DETAIL_URLPATH}–><!–{$arrProduct.product_id|u}–>.html” class=”colorbox_ajax”>product name</a>
[/HTML]
aタグのhrefには記述せず(直接来た場合はiframeじゃない版を表示したいので)、わざわざjqueryでループし、displayModeを付与した。