Help us understand the problem. What is going on with this article?

EC-CUBE3(Symfony2)でラジオボタンとチェックボックスにattr属性が使えない

More than 1 year has passed since last update.

概要

EC-CUBE3をカスタマイズしていると必ずぶち当たるフォームのカスタマイズ
その中でも中々情報が落ちてないform_themeについて自分メモ。

環境

EC-CUBE 3.0.16
PHP 7.19

そもそもなぜラジオボタンとチェックボックスにattrが使えないのか

参考:http://d.hatena.ne.jp/shimooka/20120726/1343280157

デフォルトのフォームテーマ(form_div_layout.html.twig)では、choice_widgetブロック内でexpandedの場合に改めてform_widget関数を呼び出しているが属性情報を引き継いでいないため、ラジオボタンとチェックボックスに属性を直接付けることができない。

らしいです。(非力)

そこでform_themeの出番なのです。

EC-CUBE3ではformのレイアウトはデフォルトで以下のファイルを読み込んでいます。

src/Eccube/Resource/template/Form/form_layout.twig

あの忌まわしいClass="form-group"をここで外すこともできます。
(その場合は該当するType全てのClass="form-group"が外れてしまいます。)

さて話しが逸れましたが、form_theme使っていきます。

form_widget(form.test)の中がラジオボタンorチェックボックスだったとします。
そしてそのformにクラスtest-classを付けたいとします。
先ずはソースから↓

test.twig
<div class="form-group">
 {% form_theme form _self %}
 {% block choice_test_widget %}
  {% spaceless %}
   {% for child in form.test %}
    {{ form_widget(child,{attr : {'class': 'test-class'}}) }}
   {% endfor %}
  {% endspaceless %}
 {% endblock choice_test_widget %}
</div>

...はい、よく分かりませんね。
一行ずつ解説。

test.twig
{% form_theme form _self %}

参照:https://symfony.com/doc/current/form/form_customization.html

特別な{% form_theme form self %}タグを使用することで、Twigはオーバーライドされたフォームブロックに対して同じテンプレート内を調べます。form.age フィールドがintegerタイプフィールドであると仮定すると、そのウィジェットがレンダリングされると、カスタマイズされた integerwidgetブロックが使用されます。

twigを何かしらオーバーライド(上書き)するみたいです。

test.twig
{% block choice_test_widget %}
//何かしらの処理
{% endblock choice_test_widget %}

choiceはフォームタイプのことです。test_widgetがブロック名ですね。

test.twig
{% spaceless %}
//何かしらの処理
{% endspaceless %}

HTMLの空白行を取り除いてくれるそうです。(適当)

test.twig
{% for child in form.test %}
//何かしらの処理
{% endfor %}

form.testがウィジェットの形だとform_widget(form.test)となる部分ですね。
いわゆる、該当するフォームを指定。
分かりやすいようにchildという変数に代入しています。
(もちろん何でもOK)

test.twig
{{ form_widget(child,{attr : {'class': 'test-class'}}) }}

ここで今回の記事のメインです。普段ならform_widget(form.test)とやるところを
form_widget(child ~としています。
これは先ほどのforで回したform.testが変数childに入っているということなんですね。

こうやってバラすことで{attr : {'class': 'test-class'}}が適用されるようになります。

ちなみに上記のやり方でレイアウトを好きに作れるので、個別にclass="form-control"を
外したい時などにも使えます。

まとめ

Symfony2はク〇めんどい。

以上。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away