Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@ryo-endo

EC-CUBE3.0プラグインのデザインをカスタマイズしてみよう

EC-CUBE Advent Calendar 2016 の12日目です。

EC-CUBE 3.0 プラグインのデザインをカスタマイズしてみよう

背景

プラグインの表示内容をカスタマイズしたいというケースはよくあると思います。
そのとき、プラグイン内のtwigファイルを直接編集してしまうと、バージョンアップの時に上書きされてしまうので避けたいところ...今回はapp/templateにカスタマイズしたtwigファイルを配置する方法をご紹介します。

この記事の想定環境

この記事のゴール

関連商品プラグインの見出し文字列を「関連商品」→「よく一緒に購入されている商品」に変更してみます。

image

NGなカスタマイズ

app/Plugin/RelatedProductに含まれるtwigファイルを直接編集することは避けるべきです。
将来、関連商品プラグインをバージョンアップした時に上書きされてしまいます。

カスタマイズ方法

app/templateにカスタマイズしたtwigファイルを配置することでカスタマイズができます。
プラグインのバージョンアップ時にも上書きされません。

1.twigファイルをapp/templateにコピー

twigファイルを同じフォルダ名/階層構造app/template/defaultにコピー。

app/Plugin/RelatedProduct/Resource/template/front/related_product.twig
 ↓
app/template/default/RelatedProduct/Resource/template/front/related_product.twig

2.コピーしたtwigファイルを変更

コピーしたtwigファイルのコードを「関連商品」→「よく一緒に購入されている商品」に書き換える。
app/template/default/RelatedProduct/Resource/template/front/related_product.twig

<div id="related_product_area" class="row">
    <div class="col-sm-12">
        <h2 class="heading03">よく一緒に購入されている商品</h2>

3.キャッシュの削除

twigのキャッシュが残って表示が上手く反映できないことがあります。
管理画面>コンテンツ管理>キャッシュ管理からtwigのキャッシュを削除。

4.表示の確認

表示をカスタマイズすることができました。
image

補足

関連商品プラグイン以外の場合

同じ手順でapp/template側のtwigファイルを読み込ませることができます。
twigファイルを同じフォルダ名/階層構造でコピーすることが重要です!
(これが1文字でも間違っていると読み込んでくれません...)

※プラグインによってはapp/templateからの読み込みに対応していない場合があります。

表示が反映されない場合

  • 手順3のキャッシュの削除を再度試してみる。
  • 手順1のコピー先のパスが間違っていないか確認する。(大文字小文字にも注意)

app/template/defaultに配置すると優先して読み込まれる理由

Application.phpでtwigファイルの探索パスを複数登録しています。
app/Pluginよりもapp/template/defaultの方が探索の優先順位が高いため優先して読み込まれます。
https://github.com/EC-CUBE/ec-cube/blob/3.0.12-p1/src/Eccube/Application.php#L280

管理画面のtwigファイルをカスタマイズする場合

コピー先のapp/template/default/...の「default」→「admin」に置き換えて下さい。

※管理画面側のカスタマイズは、トラブルの原因になりやすいためお勧めはしません。

デザインテンプレートを使用している場合

手順1のapp/template/default/....defaultの部分がデザインテンプレートのコードになります。

プラグインの実装について (プラグイン開発者向け)

EC-CUBEの仕組みを利用してtwigファイルにアクセスするようにしてください。
こうすることで、app/templateからの読み込みに対応したプラグインになります。

return $app->render('PluginCode/Resource/template/default/index.twig', array());
$twig = $this->app['twig'];
$twig->getLoader()->getSource('PluginCode/Resource/template/default/index.twig');

最後に

twigファイルを変更しようとする前に、一歩立ち止まってこの記事を思い出していただけると嬉しいです。
わかりにくいところや間違っているところあれば、コメントおまちしています。

EC-CUBE Advent Calendar 2016 、明日は @mikakane さん、よろしくお願いします!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
5
Help us understand the problem. What are the problem?