【EC-CUBE 4】Twig Extensionを使って新しいフィルターを作成する

本記事では、Twigテンプレートエンジンの機能を拡張できるTwig Extensionを使って、新しいフィルターを作成する方法について紹介します。

【動作環境】
EC CUBEのバージョン：4.2.1
サーバー：Xserver

新規フィルターの実装例①：赤字＆太字にする

まずは、指定した文字列を赤字＆太字にするフィルターを実装してみます。（これならCSSをカスタマイズした方が良いですが。）
以下のRedBoldExtensionクラスを定義したファイルを作成し、「app/Customize/Twig/Extension」に保存します。（TwigおよびExtensionフォルダはデフォルトでは用意されていないので、フォルダも新しく作成します。）

<?php

namespace Customize\Twig\Extension;

use Twig\Extension\AbstractExtension;
use Twig\TwigFilter;

class RedBoldExtension extends AbstractExtension
{
    public function getFilters()
    {
        return [
            new TwigFilter('red_bold', [$this, 'redBold'], ['is_safe' => ['html']]),
        ];
    }

    public function redBold($string)
    {
        return '<span style="color: red; font-weight: bold;">' . $string . '</span>';
    }
}

Extensionファイルには2つのメソッド：getFiltersとredBoldを定義します。

getFilters

new TwigFilter(フィルター名, [$this, 実行するメソッド])を返す。
第3引数の[‘is_safe’ => [‘html’]は、フィルターの出力がHTMLとして安全であり、エスケープしないようにする指示。これにより、生成されたHTMLがそのまま出力される。

redBold

getFiltersで定義したフィルターの処理内容。
このメソッドは、渡された文字列を赤色で太字にするために<span>タグで囲み、スタイルを適用します。

次に、Twigテンプレートでこのフィルターを使用します。以下のように記述することで、作成したフィルターを利用できます。

{{ 'Hello,world' | red_bold }}

ちなみに、管理画面のページ管理で定義されていないフィルターを使用しようとするとエラーが表示されます。

出力は以下のようになります。

新規フィルターの実装例②：数字を通貨形式にする

前述のフィルターなら、CSSをカスタマイズした方が簡単で管理し易いです。
そこで次に、少し複雑なフィルターも実装してみます。

以下のCurrencyFormatExtensionクラスを定義したファイルを作成し、「app/Customize/Twig/Extension」に保存します。

<?php

namespace Customize\Twig\Extension;

use Twig\Extension\AbstractExtension;
use Twig\TwigFilter;

class CurrencyFormatExtension extends AbstractExtension
{
    public function getFilters()
    {
        return [
            new TwigFilter('currency_format', [$this, 'currencyFormat']),
        ];
    }

    public function currencyFormat($number, $decimals = 2, $dec_point = '.', $thousands_sep = ',', $currency_symbol = '$')
    {
        return $currency_symbol . number_format($number, $decimals, $dec_point, $thousands_sep);
    }
}

Extensionファイルには2つのメソッド：getFiltersとcurrencyFormatを定義します。

getFilters

new TwigFilter(フィルター名, [$this, 実行するメソッド])を返す。

currencyFormat

getFiltersで定義したフィルターの処理内容。
PHPのnumber_format関数で数値を通貨形式に変換し、その結果に通貨記号を追加。

次に、Twigテンプレートでこのフィルターを使用します。以下のように記述することで、作成したフィルターを利用できます。

{{ '1,000' | red_bold }}

以下のように出力されます。