【EC-CUBE4.3】プラグインを開発してみる その２

本記事で分かること

• プラグインでのtwigテンプレートのカスタマイズの仕方

手順

1. プラグイン用の Twig テンプレートファイルを作成する

• template/default/Mypage/history.twig を作成

{% block script %}
<script>
    // 再注文ボタンの下に配置
    $(function () {
        $('#order_inquiry_btn').insertAfter($('.ec-blockBtn--action'));
    });
</script>
{% endblock %}
{% block main %}
    <a id="order_inquiry_btn" class="ec-blockBtn--primary w-100 mt-3"
       href="{{ path('contact', {order_no: Order.order_no}) }}">
        {{ 'order_inquiry.front.mypage.history.inquiry_btn'|trans }} 
    </a>
{% endblock %}

2. Event クラスにテンプレート読み込みの処理を追加する

namespace Plugin\OrderInquiry;

use Eccube\Event\TemplateEvent;
use Symfony\Component\EventDispatcher\EventSubscriberInterface;

class Event implements EventSubscriberInterface
{
    public static function getSubscribedEvents(): array
    {
        return [
            'Mypage/history.twig' => 'onHistoryDetail',
        ];
    }

    public function onHistoryDetail(TemplateEvent $event): void
    {
        // １．で作成したtwigファイル
        $twig = '@OrderInquiry/default/Mypage/history.twig';
        $event->addSnippet($twig);
    }
}

• $event->addSnippet() で追加したコードは, </body>タグ直前に出力される

3. ブラウザで表示を確認して反映をチェックする