form_widgetとは決まったHTMLでフォームを出力してくれるtwigの関数です。EC-CUBEではほとんどのページでこの関数によりフォームを出力しています。

このHTMLには最初からBootstrap3のクラスが使用されており、このrowやform-controlといったクラスがコーディングデータ組み込みの邪魔になることが良くあります。そのような場合の対応として、Bootstrapのクラスを取り除くには次の3つの方法が考えられます。

  1. ・Form/form_layout.twigを修正する
  2. ・twig.form.templatesにForm/form_layout.twig以外のテンプレートを指定する
  3. ・form_theme関数によりtwig内でテーマを変更する

Form/form_layout.twigについて

ApplicationクラスのinitRenderingメソッド内で次のようにForm/form_layout.twig をデフォルトで使用するよう指定されています。

このform_layout.twigにはtextやchoiceなどそれぞれのFormTypeのHTMLをどのように出力するかが規定されています。

ファイルの上部を見るとForm/form_layout.twigはbootstrap_3_layout.html.twigを継承しています。そのためにbootstrap3のクラスが自動で付与されるという仕組みです。

Form/form_layout.twigを修正または使用せずに別のテンプレートを使用すればBootstrapのクラスを使用しないフォームを出力することができます。

form_theme関数について

form_themeは管理画面のtwigで{% form_theme searchForm ‘Form/bootstrap_3_horizontal_layout.html.twig’ %}というように用いられていますが、一部のフォームだけを違うテンプレートに設定できる関数です。

部分的に出力されるHTMLを変更したい場合はform_theme関数を用いると便利です。

 

関連するカスタマイズ

Bootstrap3のクラスform-controlを取り除く方法(form_widget)... EC-CUBE3.0系ではSymfonyComponentの1つであるFormにより、Twig内では強力な関数form_widget、form_errorsが使用できます。 これらは作成したFormType(定義ファイル)に従って自動で初期データ入力やエラー処理をしてくれるというたいへん便利な...
style.cssに#contents min-height: 100vh;は必要か?... default/css/style.cssに #contents { min-height: 100vh;}という最低の高さ指定があります。 デフォルトテーマでこれを全ページに適用させている理由としては、新規ページ等でコンテンツが少ない場合に、ある程度高さがないと見た目が悪いということだと思...
Choiceタイプ(ラジオボタン)でNoneを消す方法... セレクトボックスやチェックボックス、ラジオボタンを簡単に生成することができるChoiceタイプは非常に強力なフォームタイプです。 ただ添付画像のようにラジオボタンを生成したときにNoneという選択肢が自動で表示されることがあります。 このNoneの消し方は意外と知られてい...
Invalid parameter number: number of bound variable...   クエリビルダを使用して開発していると頻繁に出くわす例外エラーがQueryExceptionです。 その中でも有名なInvalid parameter numberについてご紹介致します。 この例外はクエリビルダにバインドした変数の数と、渡したパラメーターの数が異なると...

弊社はEC-CUBE公式インテグレートパートナーです。