CUSTOMIZE FORM WITH TWIG FOR EC CUBE 4

[EC-CUBE 4] フォームの表示をTwigでカスタマイズする

フォームの種類を変えたい場合は、src/Eccube/Form/Type/* のソースコードを直接編集するか、FormExtensionでカスタマイズする方法があります。これらの方法だとFormを使用する全ての画面の修正を一括で行えますが、特定の画面だけ変更したい場合は対応が難しくなります。Twigでフォームの表示方法を変更する方法があるので、ご紹介します。
今回は会員登録画面の性別のラジオボタンをセレクトボックスに変更する方法を例に説明します。

1. フォームテーマを指定する。

[EC-CUBEインストールディレクトリ]/src/Eccube/Resource/template/default/Entry/index.twig
または
[EC-CUBEインストールディレクトリ]/app/template/default/Entry/index.twig
に、あるファイルを編集します。

{% form_theme form 'Form/form_div_layout.twig' %}
↓
{% form_theme form 'Form/form_div_layout.twig' 'Entry/index.twig' %}

15行名あたりに記述されている form_theme に、自身のファイル名 Entry/index.twig を追加します。
{% form_theme form ‘XXX’ %} このタグはフォームテーマを指定する記述です。フォームテーマファイルはSymfonyにいつくか用意されており、Bootstrap4用のテーマファイルもあります。
参考:How to Customize Form Rendering
このドキュメントでは、自身のファイルを示す特別な値 _self を指定していますが、EC-CUBE側の設定の影響により、_self は使用できません。

2. フォームの表示を上書きします。

{% block _entry_sex_widget %}
    {% spaceless %}
        <select name="entry[sex]">
            <option value="">選択してください</option>
            {% for choice in choices %}
                <option value="{{ choice.value }}" id="entry_sex_{{ loop.index }}"{% if choice is selectedchoice(value) %} selected="selected"{% endif %}>
                    {{ choice.label }}
                </option≶
            {% endfor %}
        </select>
    {% endspaceless %}
{% endblock _entry_sex_widget %}

フォームを上書きするblockを記述します。block名にはルールがあり
_ + フォーム名 + 項目名 + _widget
とする必要があります。

関連記事

  • [EC-CUBE 4] トップページにカテゴリ一覧を表示するカスタマイズ[EC-CUBE 4] トップページにカテゴリ一覧を表示するカスタマイズ 前回トップページに新着商品を表示するカスタマイズを紹介しました。 今回は、そのコードを利用して特定のカテゴリの商品を表示していきます。 カテゴリには「新入荷」を利用します。「新入荷」以外のカテゴリにすることもできますので、最後までお付き合いください。 ※本記事は、前回の続きと […]
  • [EC-CUBE 4] トップページに新着商品を表示するカスタマイズ[EC-CUBE 4] トップページに新着商品を表示するカスタマイズ EC-CUBE4になってTOPページのデザインも、より魅力的なものになりました。 しかし、トップページにある新着商品は、自動で更新されるものになっていません。 そこで今回は、商品を追加したときに自動で更新するようにカスタマイズしていきます。 また、カスタマイズ方法ですが、EC-CUB […]
  • [EC-CUBE 4] 出力するHTMLをminify(圧縮)する[EC-CUBE 4] 出力するHTMLをminify(圧縮)する EC-CUBE4になってから、Symfonyで用意している機構へ簡単にアクセスできるようになりました。今回は Symfony の EventListener […]