[EC-CUBE]ページナビゲーションをカスタマイズする

EC-CUBE 2.12.0

ちょっと面倒な作業だったのでメモしておきます。

デフォルトのページナビゲーション

/products/list.phpでページナビゲーションを出力するためのSmarty変数は「$tpl_strnavi」です。
そして吐き出されるソースは

<a onclick="fnNaviPage('1'); return false;" href="?category_id=0&pageno=1"><<前へ</a>
<a onclick="fnNaviPage('1'); return false;" href="?category_id=0&pageno=1">1</a>
<strong>2</strong>
<a onclick="fnNaviPage('3'); return false;" href="?category_id=0&pageno=3">3</a>
<a onclick="fnNaviPage('4'); return false;" href="?category_id=0&pageno=4">4</a>
<a onclick="fnNaviPage('5'); return false;" href="?category_id=0&pageno=5">5</a>
<a onclick="fnNaviPage('3'); return false;" href="?category_id=0&pageno=3">次へ>></a>

こんな感じ。

デザインはスタイルシートで多少いじれるものの、吐き出されるソースはビューファイルではカスタマイズできません。

ページナビゲーションを生成している箇所を探す

さてページナビゲーションを生成している箇所を探しましょう。

こうした表示に関わる部分は大抵ページナビを生成するためのパラメータを内部で作成して、ビュー(のエレメントやCakeでいうヘルパーなど)でパラメーターをHTMLのソースに変換するのが一般的ですが、前述のとおりビュー側にはページナビゲーションを生成している箇所が見つかりませんでした。

ビューにないということはクラスファイルか?ということで、/data/classディレクトリを「fnNaviPage」のキーワードでgrepしたところ、発見しました。

ページナビを生成するクラスファイルは「SC_PageNavi.php」でしたので、編集するのは「SC_PageNavi_Ex.php」ですね。ソースを読むとコンストラクタしかありませんので、SC_PageNavi_Ex.phpにコピーしてそのままオーバーライドします。

編集対象の探し方のコツ

EC-CUBEは機能がファイルに小分けにされているためファイル数が多く、ディレクトリも深いため、なにか修正しようと思っても対象のファイルを探すのが大変ですが、ちょっとしたコツを抑えるとそう難しくはありません。

今回の場合は、「fnNaviPage」で検索して、たまたまクラスのコメントの記述がヒットしましたが、コメントが書いていなかったら見つからなかったかもしれません。そういう場合には、特徴的なソースをキーにしてgrep(複数のファイルの本文検索)するとよいでしょう。

例えば、「前へ」とか「次へ」というキーワード。

この記述はビューにはあるかもしれませんが、出力を伴わないclassファイルにはなかなか出てこなそうな単語ですよね。なので、こういう特徴的なキーワードで検索すると絞りこみやすかったりします。

ただ、気をつけるのは「<<前へ」「次へ>>」のように記号を含むキーワードを指定した場合です。記号は「<」→「&gt;」のようにエンコードされていることがあるので注意が必要です。 こういうのはあまり考えずに、思いついたキーワードで次々検索するほうが早いと思います。そのうち「この文字列はこのディレクトリのファイルには少なそうだからこのキーワードにしよう」みたいにコツがわかってくると思います。

カスタマイズ例

あるEC-CUBEの案件で、スタイリッシュなページナビにしたいので「前へ」「次へ」のリンクを画像にして、間のページ番号のリンクを無くしたいという要望がありました。

実物はこんな感じです。

<ul class="pagination">
	<li class="prev">
		<a href="?category_id=0&amp;pageno=1" onclick="fnNaviPage(1);return false;">
			<img src="/shop/user_data/packages/riodepiedra/img/page_prev.gif" width="41" height="25" alt="PREV" />
		</a>
	</li>
	<li class="next">
		<a href="?category_id=0&amp;pageno=3" onclick="fnNaviPage(3);return false;">
			<img src="/shop/user_data/packages/riodepiedra/img/page_next.gif" width="41" height="25" alt="NEXT" />
		</a>
	</li>
</ul>

SC_PageNavi_Ex.phpを編集

それでは上記のソースを生成するためのカスタマイズ方法です。
SC_PageNavi.phpからコンストラクタをコピーしてきたら、コメントで「//「前へ」「次へ」の設定」があると思うので、こちらを編集します。
全部記載すると長くなってしまうので、before,nextの出力部分だけ抽出して説明しますね。

/data/class_extends/SC_PageNavi_Ex.php

class SC_PageNavi_Ex extends SC_PageNavi {
	function __construct($now_page, $all_row, $page_row, $func_name, $navi_max = NAVI_PMAX, $urlParam = '', $display_number = true) {
		// 省略
			//「前へ」「次へ」の設定
			$before = '';
			$next = '';
			if ($this->now_page > 1) {
				$this->arrPagenavi['before'] = $this->now_page - 1;
				$urlParamThis = str_replace('#page#', $this->arrPagenavi['before'], $urlParam);
				$urlParamThis = htmlentities($urlParamThis, ENT_QUOTES);
				$before = '<li class="prev"><a href="?'.$urlParamThis.'" onclick="'.$func_name.'('.$this->arrPagenavi["before"].')'.';return false;"><img src="'.ROOT_URLPATH.'user_data/'.USER_PACKAGE_DIR.TEMPLATE_NAME.'/img/page_prev.gif" width="41" height="25" alt="PREV" /></a></li>';
				// ↓これが元のソースです。
				// $before = "<a href=\"?$urlParamThis\" onclick=\"$func_name('{$this->arrPagenavi['before']}'); return false;\">&lt;&lt;前へ</a> ";
			} else {
				$this->arrPagenavi['before'] = $this->now_page;
			}

			if ($this->now_page < $this->max_page) {
				$this->arrPagenavi['next'] = $this->now_page + 1;
				$urlParamThis = str_replace('#page#', $this->arrPagenavi['next'], $urlParam);
				$urlParamThis = htmlentities($urlParamThis, ENT_QUOTES);

				$next = '<li class="next"><a href="?'.$urlParamThis.'" onclick="'.$func_name.'('.$this->arrPagenavi["next"].')'.';return false;"><img src="'.ROOT_URLPATH.'user_data/'.USER_PACKAGE_DIR.TEMPLATE_NAME.'/img/page_next.gif" width="41" height="25" alt="NEXT" /></a></li>';
				// ↓これが元のソースです。
				// $next = " <a href=\"?$urlParamThis\" onclick=\"$func_name('{$this->arrPagenavi['next']}'); return false;\">次へ&gt;&gt;</a>";
			} else {
				$this->arrPagenavi['next'] = $this->now_page;
			}
		// 省略
	}
}

EC-CUBEを触ったことが無い方でもPHPがわかれば編集できると思いますが、問題なのは画像の出力ですね。

EC-CUBEではテンプレートという概念でデザインを管理しており、テンプレートの/imgフォルダに入れた画像を出力したい場合にはEC-CUBEの定数を使う必要があります。

定数はインストール時に設定される「config.php」で定義されるものと、データベースの「mtb_constantsテーブル」*1 で定義されるものがあります。

このカスタマイズの画像srcの指定では、

ROOT_URLPATH
EC-CUBEをインストールしたパス
USER_PACKAGE_DIR
テンプレートファイルの保存先
TEMPLATE_NAME
現在使用しているテンプレート名

以上、3つの定数を使用しています。

今回はbefore,nextの表示を変更する他、あいだのページ番号のリンクも削除したいので、80行目付近の「// 表示する最大ナビ数を決める。」から、116行目付近のforの閉じカッコまでの処理も不要です。
コメントアウトするなり削除するなりしていただいてOKです。

Happyqualityでは数年前にもEC-CUBEのネタを結構取り上げていましたが、あの頃はこんなに簡単に理解することはできなかったような気がします。もしかするとEC-CUBEのソースが当時よりも洗練されてきたのかもしれませんね*2

ただソースを追う速度や理解度、それに当たりの付け方が以前よりも断然ウマくなっているので、私自信も少しは成長できているのかなぁと思います(=´▽`)ゞ

日々の積み重ねが大事ですね。

  1. /data/cache/の中に、mtb_constantsテーブルの内容を定数に置き換えるmtb_constants.phpというファイルがあるので、実際にはこちらで定義された定数を使用します。 []
  2. 今回はほとんどカスタマイズしていないので僅かなソースしか見ていませんけどσ(^_^;) []
スポンサーリンク
336x280_1
336x280_1

シェアする

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

フォローする

スポンサーリンク
336x280_1