2014年10月5日日曜日

EC-CUBEプラグインの基本的な機能について その4

SYSTEM_KDです。
テンプレートをフックして中身を書き換える処理の続きです。

実際にどうやってテンプレートの内容を書き換えるかというと、下記の手順で行うことになります。

1.変更したテンプレートのデバイスを判別

2.変更するテンプレートを特定

3.テンプレート内の変更(追加)箇所を特定

4.テンプレートの書き換え内容を設定

上記をソースで書くと、下記になります。

function prefilterTransform(&$source, LC_Page_Ex $objPage, $filename) {
$objTransform = new SC_Helper_Transform($source);
$template_dir = PLUGIN_UPLOAD_REALDIR . 'PluginBase/templates/';
switch($objPage->arrPageLayout['device_type_id']){
case DEVICE_TYPE_MOBILE:
break;
case DEVICE_TYPE_SMARTPHONE:
break;
case DEVICE_TYPE_PC:
break;
case DEVICE_TYPE_ADMIN:
default:
if (strpos($filename, 'bloc/recommend.tpl') !== false) {
$html = "

";
$html .= "(最終更新日:" . $this->bp_last_update . ")

";
$objTransform->select('div#recommend_area h2')->appendChild($html);
}
break;
}
$source = $objTransform->getHTML();
}

まず、

1.変更したテンプレートのデバイスを判別

ですが、4行目のswitch文になります。
(ここは前回説明した部分になります。)

次に、


2.変更するテンプレートを特定

ですが、これは13行目のif文の部分になります。

この例ですと、「bloc/recommend.tpl」テンプレートを変更するということになります。

表示用のテンプレートが生成されるタイミングで、prefilterTransformが呼ばれますので、その際のファイル名(テンプレート名)が設定されている「$filename」を確認し、変更を行うテンプレートの場合に処理を行うといった形になります。


3.テンプレート内の変更(追加)箇所を特定

これは、16行目の前半部分になります。

「2.」で変更対象のテンプレートを見つけましたが、実際そのテンプレートのどの部分の変更を行うかは、この部分で指定を行います。

この例ですと、$objTransform->select('div#recommend_area h2')の部分にあたります。

対象の場所はJQueryでタグを特定する場合と同じ様に行います。


4.テンプレートの書き換え内容を設定

最後に、テンプレートの書き換え内容を設定する部分ですが、これは16行目の後半部分になります。

この例では、「->appendChild($html)」の部分になります。

上記の内容ですと、「3.」で指定したタグ内の最後へ、「$html」の内容を追加するといった具合になります。

この書き換えの指定方法はいくつかあります。

  • insertBefore
  • insertAfter
  • appendChild
  • replaceElement
  • removeElement

上から、順に

insertBefore = 選択要素の前に追加

insertAfter = 選択要素の後に追加

appendFirst = 選択要素の選択に追加

appendChild = 選択要素の末尾へ追加

replaceElement = 選択要素を置換

removeElement = 選択要素を削除

といったものになっております。


ここらへんは、覚えてしまうのが、手っ取り早いかと思います。

次回は実際にテンプレートを書きける処理を追加した、プラグインを作成してみたいと思います!!

0 件のコメント:

コメントを投稿