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

ChoiceTypeを使ったフォームの実装について

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

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

【動作環境】
EC CUBEのバージョン:4.1.2
サーバー:Xserver

目次

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)

実装例1(label & placeholder)

->add('name', ChoiceType::class, array(
    'choices'  => [
        '選択肢1' => 'Choice 1',
        '選択肢2' => 'Choice 2',
        '選択肢3' => 'Choice 3',
    ],
    'label' => 'メーカー名',
    'placeholder' => '選択してください',
))
「label」と「placeholder」実装後の画面

実装例2(label & multiple)

->add('name', ChoiceType::class, array(
    'choices'  => [
        '選択肢1' => 'Choice 1',
        '選択肢2' => 'Choice 2',
        '選択肢3' => 'Choice 3',
    ],
    'label' => 'メーカー名',
    'multiple' => true,
))
「label」と「multiple」実装後の画面
【応用】選択肢をデータベースから取得する

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

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

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

ラジオボタン

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をコピーしました!

この記事を書いた人

ノベルティグッズのECサイトを運営する中小企業役員。
本ブログを通じ、販促向けの最新/ロングセラー商品紹介やWebサイト制作に役立つ技術情報を発信しています。

目次