[EC-CUBE カスタマイズ日誌] 第 6 回 ログイン状態に応じてヘッダーの表示を変えたい!

No Photo

こんにちは、inoueです。先日Windows7搭載のノートPCを購入しました。何も考えずFirefoxをインストールしようとして、警告ダイアログが出てビックリ!まだ未対応だったんですね。 これを機にIEと仲良くならないと、ね。

さて、『EC-CUBE カスタマイズ日誌』第6回です。
今回はログイン状態に応じてヘッダーの表示を変える方法のご紹介です。

次の図のように、ログイン前の状態では「ログイン」ボタンが表示され、ログインするとそこが「ログアウト」ボタンに切り替わるようにするための カスタマイズ手順について説明していきます。

ログイン状態で切り替わるヘッダーの例

インクルード元の修正

デフォルトのヘッダーレイアウトは、data/Smarty/default/ ディレクトリ内の header.tpl に 静的な構成で記述されております。
このテンプレートが、 site_main.tpl というメインのテンプレート 内で

<!--{include file= $header_tpl}-->

と読み込まれています。
このヘッダー部分を動的にするため、新たに html/frontparts/header.php を作成し、site_main.tpl を

<!--{include_php file="`$smarty.const.HTML_PATH`frontparts/header.php"}-->

と変更します。

ロジックの作成

第2回で触れたように、html/ ディレクトリ内のファイルに対して、 その処理を記述するクラスファイル、カスタマイズ用拡張ファイル、表示用テンプレートファイルを用意する必要があります。
今回の場合、

  • html/frontparts/header.php
  • data/class_extends/page_extends/frontparts/LC_Page_FrontParts_Bloc_Header_Ex.php
  • data/class/pages/frontparts/LC_Page_FrontParts_Bloc_Header.php

の3ファイルを新規作成します。
表示用テンプレートファイルはデフォルトの

  • data/Smarty/templates/default/header.tpl

をそのまま使用し、処理を追加します。

html/frontparts/header.php の作成

LC_Page_FrontParts_Bloc_Header_Exクラスを読み込み、処理を実行します。

<?php
require_once(CLASS_EX_PATH . "page_extends/frontparts/LC_Page_FrontParts_Bloc_Header_Ex.php");


$objPage = new LC_Page_FrontParts_Bloc_Header_Ex();
register_shutdown_function(array($objPage, "destroy"));
$objPage->init();
$objPage->process();
?>

data/class_extends/page_extends/frontparts/
LC_Page_FrontParts_Bloc_Header_Ex.php の作成

<?php
require_once(CLASS_PATH . "pages/frontparts/LC_Page_FrontParts_Bloc_Header.php");

class LC_Page_FrontParts_Bloc_Header_Ex extends LC_Page_FrontParts_Bloc_Header {

    /**
     * Page を初期化する.
     *
     * @return void
     */
    function init() {
        parent::init();
    }

    /**
     * Page のプロセス.
     *
     * @return void
     */
    function process() {
        parent::process();
    }

    /**
     * デストラクタ.
     *
     * @return void
     */
    function destroy() {
        parent::destroy();
    }
}
?>

data/class/pages/frontparts/
LC_Page_FrontParts_Bloc_Header.php の作成

LC_Page_FrontParts_Bloc.php を継承して作成します。
init() メソッド内で使用するテンプレートを指定する事とログイン判定処理を新規作成するのがポイントです。

2009-12-07追記: コメントいただいた process()メソッド部分も追記しました。
プログラム作成時は、data\class\pages\frontparts\bloc内のソースコードを参考にするとよいと思います。

<?php
require_once(CLASS_PATH . "pages/frontparts/bloc/LC_Page_FrontParts_Bloc.php");


class LC_Page_FrontParts_Bloc_Header extends LC_Page_FrontParts_Bloc {

    /**
     * Page を初期化する.
     *
     * @return void
     */
    function init() {
        parent::init();
        $bloc_file = "header.tpl";
        $this->setTplMainpage($bloc_file);
    }

    /**
     * Page のプロセス.
     *
     * @return void
     */
    function process() {
        $objSubView = new SC_SiteView();

        $this->setDataForHeader();

        $objSubView->assignobj($this);
        $objSubView->display($this->tpl_mainpage);
    }

    //(ログイン判定処理等は省略)

}
?>

data/Smarty/templates/default/header.tpl の修正

if 文等でロジックを記述していきます。
ログイン状態による『ログイン』『ログアウト』ボタンの切り替え例は次のとおりです。

<!--{if $tpl_login}-->
<!--{if !$tpl_disable_logout}-->
<li><a href="<!--{$smarty.server.PHP_SELF|escape}-->" onclick="fnFormModeSubmit('login_form', 'logout', , ); return false;"><img src="<!--{$smarty.const.URL_DIR}-->img/common/btn_logout.gif" alt="ログアウト" width="62" height="20" class="btn" /></a></li>
<li><a href="<!--{$smarty.const.URL_MYPAGE_TOP}-->"><img src="<!--{$smarty.const.URL_DIR}-->img/common/btn_mypage.gif" alt="マイページ" width="70" height="18" class="btn" /></a></li>
<!--{/if}-->
<!--{else}-->
<li><a href="<!--{$smarty.const.URL_MYPAGE_TOP}-->"><img src="<!--{$smarty.const.URL_DIR}-->img/common/btn_login.gif" alt="ログイン" width="55" height="20" class="btn" /></a></li>
<!--{/if}-->

以上で完了です。

ユーザのステータスで表示を切り替えたい場合は、ログイン状態以外にもいろいろあるかと思います。
そんなとき、この記事が参考にしてみてください。

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

この記事を読んだ人にオススメ