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

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

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

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

２．変更するテンプレートを特定

３．テンプレート内の変更（追加）箇所を特定

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

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

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();
}

まず、

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

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

次に、

２．変更するテンプレートを特定

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

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

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

３．テンプレート内の変更（追加）箇所を特定

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

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

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

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

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

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

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

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

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

• insertBefore
• insertAfter
• appendChild
• replaceElement
• removeElement

上から、順に

insertBefore = 選択要素の前に追加

insertAfter = 選択要素の後に追加

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

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

replaceElement = 選択要素を置換

removeElement = 選択要素を削除

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

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

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