EC-CUBE３のカスタマイズ４（テンプレートを変更する）

SYSTEM_KDです。

 

EC-CUBE３のカスタマイズ、４回目です。

前回の予定どおり、今回はEC-CUBE３のテンプレート（Twig）ファイルを変更してみようと思います。

 

変更方法としては、プラグインでフックして書き換えという方法ではなく、別テンプレートを用意して、書き換える方針で行いたいと思います。

（フックして書き換えは、今後予定してますが、今回は直で）

 

商品詳細ページのテンプレートを変更してみる

変更する（変更を試してみる）テンプレートは、商品詳細を利用しようと思います。

 

では、早速変更していきたいと思いますが、そのための準備として、テンプレートのコピーを行います。

 

商品詳細のテンプレート（コピー元）は、

/src/Eccube/Resource/template/default/Product/detail.twig

になります。

 

コピー先は、

/app/template/default/Product/

になります。

 

defaultの配下に、Productディレクトリはないと思いますので、ディレクトリを作成して、その中へTwigファイルをはりつけます。

 

コピーが完了したら、商品詳細ページを表示してみます。

 

 

先程と同じ商品詳細ページが表示されたと思いますが、表示されているテンプレートは、「/src/Eccube/Resource/template/default/Product/detail.twig」ではなく、「/app/template/default/Product/detail.twig」の方を表示しています。

 

本当に変わっているかを確認するために、試しに以下の変更を加えてみます。

118行目あたりです。

<h3 id="detail_description_box__name" class="item_name">商品名：{{ Product.name }}</h3>

 

変更できたら、詳細ページを表示します。

追加した文字が表示され、次のような画面になると思います。

 

※商品名の頭に、「商品名：」が表示されます。

 

変更しなかった方は、キャッシュの影響だと思いますので、「/app/cache/twig」のディレクトリを削除するか、管理画面の「コンテンツ管理＞キャッシュ管理」よりキャッシュをクリアを実施してみてください。

 

Twigテンプレートの動的な部分を変更してみる

静的な情報は、追加することができましたので、次は「動的」な情報を追加してみたいと思います。

 

やることとしては、商品名の次の行に、「最終更新日」を追加してみたいと思います。

最終更新日は、dtb_products の update_date より取得して表示します。

 

update_dateの内容を表示するにあたり、まずは、twig へどの様な情報が渡されているか確認してみたいと思います。

 

商品詳細画面を表示するための処理は、「/src/Eccube/Controller/ProductController.php」に記述されています。

具体的な場所としては、「202」行目あたりの、「function detail」の部分になります。

この部分の twig へ情報をセットしている部分を探してみます。

場所は、「309」行目になります。

    return $app->render('Product/detail.twig', array(
        'title' => $this->title,
        'subtitle' => $Product->getName(),
        'form' => $form->createView(),
        'Product' => $Product,
        'is_favorite' => $is_favorite,
    ));

 

Twig 側へ渡されている値としては、

• title
• subtitle
• form
• Product
• is_favorite

になります。

 

この中で、商品情報は、「Product」の部分になります。

商品情報（dtb_product のエンティティー）が渡されているようですので、この中のupdate_dateを表示すれば、最終更新日を表示することができそうです。

 

では、Twig 側へ、情報を表示したいと思います。

    <section id="item_detail_area" class="col-sm-6">

        <!--★商品名★-->
        <h3 id="detail_description_box__name" class="item_name">{{ Product.name }}</h3>
        <div id="detail_description_box__body" class="item_detail">
            <p>最終更新日：{{ Product.update_date|date('Y/m/d H:i') }}</p>
            <!--★通常価格★-->

 

商品名の下へ、最終更新日を追加しました。

画面を表示すると、次の様に商品名の下へ「最終更新日」が表示されるかと思います。

 

 

見せ方の良し悪しはあれですが、、最終更新日が表示されたかと思います。

 

まとめ

基本的に、コピーして書き換えるだけですので、特に難しいところはなかったかと思います。

他のテンプレートも同じ要領でコピーして変更することにより、EC-CUBEの本体側はそのままで、独自のテンプレートを表示した状態とすることができます。

表示していくなかで、表示がおかしくなったり、エラーが発生した場合は、app配下のテンプレートを削除することにより、デフォルト状態へ戻すことができます。
（安心ですね）

 

これで、簡単な表示変更はできるようになりましたが、処理を変更してテンプレートへ表示する項目を追加するには、プラグインで拡張することが必要となってきます。

（本体を直接変更しない場合）

 

ということで、次回はいよいよプラグインを作り始めたいと思います。

 

以上、EC-CUBE３のカスタマイズ４（テンプレートを変更する）でした。