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  

とする必要があります。