form_widgetで出力されるフォーム要素のHTML構造を変える方法

inputやselectなどform周りのHTMLを書き換えることはできるかというご相談を良くお受けします。Symfonyではform_themeを使ってフォーム要素の構造を変えることが一般的です。
よくあるチェックボックス複数選択のHTML構造を書き換える例をご紹介いたします。

EC-CUBE4の標準の複数選択チェックボックス(CheckboxTypeのmultiple,expanded)は、
{{ form_widget(form.multiple) }}とtwigに記述するとinput→label→input→labelというように要素が連続して出力されます。

<input type="checkbox" id="contact_multiple_0" name="contact[multiple][]" value="A">
<label>項目１</label>
<input type="checkbox" id="contact_multiple_1" name="contact[multiple][]" value="B">
<label>項目2</label>

これだと若干CSS適用しにくい場合があるため、form_themeを使ってdivで囲いcheckboxというクラスが付くように書き換えて見たいと思います。

テーマファイルを作成

app/template/default/Form/custom_checkbox_theme.twigというファイルを作成します。中身は下記の通りです。

{%- block choice_widget_expanded -%}
    <div {{ block('widget_container_attributes') }}>
        {%- for child in form %}
            <div class="checkbox">
            {{- form_widget(child) -}}
            {{- form_label(child, null, {translation_domain: choice_translation_domain}) -}}
            </div>
        {% endfor -%}
    </div>
{%- endblock choice_widget_expanded -%}

form_theme関数で適用

{% form_theme form.multiple 'Form/custom_checkbox_theme.twig' %}
{{ form_widget(form.multiple) }}

form_widgetよりも先に、form_themeを実行します。
プラグイン開発で指定する場合はFormTypeでeccube_form_optionsを指定することが多いですが、今回はtwigに直接書きます。

出力結果

下記のように出力されればform_themeの適用成功です。

<div class="checkbox">
  <input type="checkbox" id="contact_multiple_0" name="contact[multiple][]" value="A">
  <label>項目１</label>
</div>
<div class="checkbox">
  <input type="checkbox" id="contact_multiple_1" name="contact[multiple][]" value="B">
  <label>項目2</label>
</div>

EC-CUBE4系ではform_themeを使って自由にフォーム要素のHTMLを書き換えられますのでぜひご活用ください。

EC-CUBEゴールドパートナー EC-CUBEは株式会社イーシーキューブの商標です

ECCUBE制作トップへ

EC-CUBEカスタマイズに関するお問い合わせはこちら

[重要]現在公式にセキュリティサポートが切れていないPHPは8.1以上、MySQLは8.0以上で、対応しているEC-CUBEバージョンは4.2以上です。古いEC-CUBEを使っている方は適切なタイミングでバージョンアップをご検討ください。