詳細ページなどを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を付与した。
I really love your website.. Very nice colors & theme. Did you make this web site yourself? Please reply back as I’m hoping to create my very own site and want to find out where you got this from or what the theme is named. Cheers!
Thank you.
This is a template for WP. see this link.
http://wordpress.org/extend/themes/flashy