Help us understand the problem. What is going on with this article?

Twig拡張関数を作ってデザインをカスタマイズしてみよう

More than 3 years have passed since last update.

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

Twig拡張関数を作ってデザインをカスタマイズしてみよう

EC-CUBE 3.0ではテンプレートエンジンにTwigを採用しています。
今回はTwig拡張関数を作成して、Twigコードの中で利用する方法をご紹介します。

この記事のゴール

Topページに商品名と在庫を表示させます。
image

Twig拡張関数を使わない場合

ページにはパラメータとしてappが渡ってきているので、下記のように書けば商品情報にアクセスすることが可能です。ただし、Viweが他の実装に依存してしまいますし、可読性も良くないですね。

twig
{% set Product = app['eccube.repository.product'].get(2) %}

{{ Product.Name }}:残りあと{{ Product.getStockMax }}個!

Twig拡張関数を使う場合

最終的な実装の例

TwigExtensionSample_getProductというProductEntityを返すTwig拡張関数を作ることで、下記のような実装ができるようになります。

  • この関数は、引数で商品IDを渡せばProductEntityが返ってきます。
  • ページに関係なく利用することができます。
twig
{% set Product = TwigExtensionSample_getProduct() %}

{{ Product.Name }}:残りあと{{ Product.getStockMax }}個!

(getProductみたいな関数名でもいいのですが、関数名が重複するトラブルを避けるために関数名にプラグインコードを付けています)

実装方法

まずはこちらから雛形となるプラグインをダウンロードし、EC-CUBEにインストール/有効化してください。(有効にするのを忘れないでください)
https://github.com/ryo-endo/eccube3-twig-extension-sample-plugin/releases/tag/1.0.0
[TwigExtensionSamplePlugin-blank.tar.gz]

/app/Plugin/TwigExtensionSample/ServiceProvider/TwigExtensionSampleServiceProvider.phpregister関数に次のコードを追加することで、Twigコード内でTwigExtensionSample_getProduct関数が利用できるようになります。

TwigExtensionSampleServiceProvider.php
public function register(BaseApplication $app)
{
    $app['twig'] = $app->share($app->extend('twig', function (\Twig_Environment $twig, \Silex\Application $app) {
        // 商品を取得するTwig拡張関数
        $twig->addFunction(new \Twig_SimpleFunction('TwigExtensionSample_getProduct', function ($id) use ($app) {
            return $app['eccube.repository.product']->get($id);
        }));

        return $twig;
    }));
}

あとは、EC-CUBEの管理画面>コンテンツ管理>ページ管理>TOPページ>ページ編集からTOPページのtwigファイルに以下のコードを追加すれば、この記事の最初にあるキャプチャのように表示されるはずです。

TOPページ
{% block main %}
    {#--ここから--#}
    <div class="row">
        <div class="col-sm-12">
            {% set Product = app['eccube.repository.product'].get(2) %}
            {{ Product.Name }}:残りあと{{ Product.getStockMax }}個!
        </div>
    </div>
    {#--ここまで--#}

完成したプラグインはこちらにアップしています。
https://github.com/ryo-endo/eccube3-twig-extension-sample-plugin/releases/tag/1.0.0
[TwigExtensionSamplePlugin-1.0.0.tar.gz]

簡単な解説

  • $twig->addFunctionTwig_SimpleFunctionのインスタンスを渡すことで、新しい拡張関数を登録しています。
  • 1つめの引数は、作成する拡張関数の名前です。
  • 2つめの引数は、拡張関数が呼び出されたときの処理(無名関数)です。

拡張関数を別のクラスに分ける場合

上記のように無名関数で登録していくのが簡単ですが、クラスに分けることも可能です。
以下にサンプルコードを用意しましたので参考にしてください。

拡張関数をTwig/Extension/ProductExtension.phpに分割。
ServiceProviderではクラスの登録だけをしています。
https://github.com/ryo-endo/eccube3-twig-extension-sample-plugin/tree/use_class_file

ご注意

プラグインを削除後、Twigファイル内に拡張関数が残っていると「不明な関数の呼び出し」としてTwigコードのコンパイルがエラーになりますのでご注意ください。

Twig_Error_Syntax in ExpressionParser.php line 574:
Unknown "TwigExtensionSample_getProduct" function in
"string_template29dc7e2fb366c012654f4e32f1588c5ddaa81f6708677d059e47634bf7f5342a" at line 43.

最後に

Twig拡張関数を作り、それを使ってデザインをカスタマイズする方法をご紹介しました。
ある程度、汎用的に使える拡張関数を作っておけば、フロントの担当者の方もデザインをカスタマイズしやすいんじゃなかろうかと思います。

今回のサンプルプラグインをベースにしてもらえれば、$twig->addFunctionに追加するだけで簡単に作れますので、ぜひ試してみてください。

さて明日は @chihiro-adachi による、人気シリーズ「PhpStormでSilexのコード補完(3)」Eです。

ryo-endo
スクラムマスター ソフトウェアエンジニア EC-CUBEの開発をやっています
https://github.com/ryo-endo
ec-cube
日本No.1ECオープンソースのEC-CUBEのコミッターやユーザーのコミュニティです。
http://www.ec-cube.net
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした