【EC-CUBE 4】ドロップダウンリスト / ラジオボタン / チェックボックスの実装方法

2022年12月28日

この記事では、タイトルにあるフォーム部品3種の実装方法について紹介します。

なお、その他の入力フォームについては以下記事で紹介しています。

EC-CUBEにおけるフォーム実装方法

通常のHTMLでは、フォーム部品は<form>タグ内に<select>要素や<input>要素を配置することで実装します。

HTMLの記述内容

ドロップダウンリスト: <select>タグと<option>タグ
ラジオボタン: <input type=”radio”>
チェックボックス: <input type=”checkbox”>

ただEC-CUBEが採用しているPHPフレームワーク・Symfonyでは、Symfony Formsという機能を利用するのが基本です。FormBuilderというオブジェクトを作成し、そこにaddメソッドでフィールドを追加することでフォームを実装します。

$builder -> add( 名前, タイプ, [ 属性 ])

注文やお問い合わせのフォームなどは「src/Eccube/Form/Type」下に「○○Type.php」として多数保存されています。これらのファイルを見ると、フォーム生成部分にはaddメソッドが使われていますね。

各フォーム部品の実装方法

では実際に、ドロップダウンリスト（プルダウン）、ラジオボタン、チェックボックスを実装してみましょう。

これらのフォーム部品をaddメソッドで実装するには、その第二引数にChoiceType::classを指定します。

ChoiceTypeを使うには、事前にuseで読み込んでおく必要があります。
これを忘れるとエラーになるので、必ず最初に以下コードを記述しておきましょう。

use Symfony\Component\Form\Extension\Core\Type\ChoiceType;

ドロップダウンリスト（プルダウン）

addメソッドを以下のように記述します。

->add('name', ChoiceType::class, array(
    'choices'  => [
        '選択肢1' => 'Choice 1',
        '選択肢2' => 'Choice 2',
        '選択肢3' => 'Choice 3',
    ]
))

choicesに渡す連想配列では、「’表示させる内容’ => value」の形で値をセットします。

よく使われるオプションについて

addメソッドの第三引数である配列に「label」などのキーワードを追加することで、様々な属性を付与できます。

label: フォームにラベルが付けられます。
placeholder: 初期表示する内容を指定できます。
multiple: trueにすると複数選択ができるようになります。（デフォルトではfalse）

実装例１（label & placeholder）

->add('name', ChoiceType::class, array(
    'choices'  => [
        '選択肢1' => 'Choice 1',
        '選択肢2' => 'Choice 2',
        '選択肢3' => 'Choice 3',
    ],
    'label' => 'メーカー名',
    'placeholder' => '選択してください',
))

実装例２（label & multiple）

->add('name', ChoiceType::class, array(
    'choices'  => [
        '選択肢1' => 'Choice 1',
        '選択肢2' => 'Choice 2',
        '選択肢3' => 'Choice 3',
    ],
    'label' => 'メーカー名',
    'multiple' => true,
))

【応用】選択肢をデータベースから取得する

ドロップダウンリストの選択肢を直接コードに記述するのではなく、データベースから取得して選ばせるということも可能です。

コードを短くできることに加え、データベースが追加（削除）・更新されると自動的に選択肢も追加（削除）・更新されるため、データベースの内容と連携させたい場合には特にオススメです。

詳細は以下記事にて解説していますので、あわせてご覧ください。

【EC-CUBE 4】ドロップダウンリストの選択肢をデータベースから取得する方法

ラジオボタン

addメソッドを以下のように記述します。

->add('name', ChoiceType::class, array(
    'choices'  => [
        '選択肢1' => 'Choice 1',
        '選択肢2' => 'Choice 2',
        '選択肢3' => 'Choice 3',
    ],
    'expanded' => true,
))

第三引数の連想配列に、「’expanded’ => true」を追加します。（デフォルトではfalseになっています。）
choicesに渡す連想配列では、「’表示させる内容’ => value」の形で値をセットします。

よく使われるオプションについて

addメソッドの第三引数である配列に「label」などのキーワードを追加することで、様々な属性を付与できます。

label: フォームにラベルが付けられます。
data: 初期値を設定できます。（指定した選択肢をチェックした状態になります。）

実装例

ラベルにメーカー名を指定し、選択肢1をチェックした状態で表示する場合

->add('name', ChoiceType::class, array(
    'choices'  => [
        '選択肢1' => 'Choice 1',
        '選択肢2' => 'Choice 2',
        '選択肢3' => 'Choice 3',
    ],
    'expanded' => true,
    'label' => 'メーカー名',
    'data' => 'Choice 1',
))

チェックボックス

addメソッドを以下のように記述します。

->add('name', ChoiceType::class, array(
    'choices'  => [
        '選択肢1' => 'Choice 1',
        '選択肢2' => 'Choice 2',
        '選択肢3' => 'Choice 3',
    ],
    'expanded' => true,
    'multiple' => true,
))

第三引数の連想配列に、「’expanded’ => true」と「’multiple’ => true」を追加します。（デフォルトでは両方ともfalseになっています。）
choicesに渡す連想配列では、「’表示させる内容’ => value」の形で値をセットします。

まとめ

以上、EC-CUBEで使われるSymfony Formsについて、ドロップダウンリスト（プルダウン）・ラジオボタン・チェックボックスを実装する方法を紹介しました。

いずれもよく使われるフォーム部品ですので、ぜひ実装方法をマスターしておきましょう。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！