[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ファイルにはなかなか出てこなそうな単語ですよね。なので、こういう特徴的なキーワードで検索すると絞りこみやすかったりします。

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

カスタマイズ例

ある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の指定では、