【EC-CUBE 4】入力フォームの初期値または入力例を設定する方法

EC-CUBE 4で入力フォームに初期値または入力例(プレースホルダー)をセットする方法

この記事では、商品登録や会員登録、お問い合わせページなどの入力欄に、「初期値」もしくは「入力例(プレースホルダー)」を設定する方法について紹介します。

商品名に 初期値 を設定した例

商品名に初期値を設定した商品登録画面
商品名に初期値を設定したときの商品登録の画面

商品名に 入力例 を設定した例

商品名にプレースホルダーを設定した商品登録画面
商品名に入力例(プレースホルダー)を設定したときの商品登録の画面

比較的簡単にカスタマイズできる内容ですので、ぜひトライしてみてください。

開発前にデバッグモードの設定をお薦めします

デバッグモードを設定しておくと、エラーが起きたときに詳細情報が表示されるようになります。
エラー箇所を探しやすくなるので、開発前に設定しておくのをオススメします。
デバッグモードの設定方法については 以下記事 で解説しています。

カスタマイズ後は、デバッグモードの解除を忘れないように。

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

目次

「初期値」を設定する

入力フォームに初期値を設定するには、そのフォームを生成するFormTypeのaddメソッドに「data」というキーワードをセットする方法が簡単です。

以下は、商品登録のフォームを生成するファイル(「src/Eccube/Form/Type/Admin」下にある「ProductType.php」)の一部を修正し、「デフォルトネーム」という初期値がセットされるよう実装したコードです。

->add('name', TextType::class, [
  'data' => 'デフォルトネーム',
    'constraints' => [
        new Assert\NotBlank(),
        new Assert\Length(['max' => $this->eccubeConfig['eccube_stext_len']]),
    ],
]);

上記コードのように、商品名を登録するためのフォーム生成コードに「’data’ => ‘デフォルトネーム’,」を挿入することで、「デフォルトネーム」という初期値がセットされます。
「デフォルトネーム」部分は、初期値としてセットしたい値に書き換えてください。

データベースと連動する場合は、登録済データを表示させる

商品登録のようなデータベースと連動するフォームの場合、前項の設定では問題があります。
登録済み商品を更新する場合に、既存の登録内容がすべて初期値に置き換わってしまうのです。

既に登録してある項目については、初期値ではなく登録内容がフォームに反映されるのが一般的です。
そのためには挿入コードを以下のように修正します。

'data' => $options['data']['id'] ? $options['data']['name'] : 'デフォルトネーム',

ここで、$options[‘data’]には登録されている商品情報が格納されています。
(詳しく知りたい方はdump関数で中身を確認してみることをオススメします → 確認方法は こちらの記事 にて)

$options[‘data’][‘id’]で商品IDを参照し、商品IDが存在する or しない(≒ 商品が登録済 or 未登録)かで、初期値にセットする内容を分岐させています。従って、

  • 商品が登録されている(IDが存在する) → その商品の商品名($options[‘data’][‘name’])をセット
  • 商品が登録されていない(IDが存在しない) → 「デフォルトネーム」をセット

このような実装となります。

IDは商品登録時に自動付与されるため、商品登録の有無をIDの有無で判別しています。
もし何らかの理由でIDのない商品がデータベースに存在する場合は、商品名がすで登録されていても「デフォルトネーム」がセットされてしまいます。
何をもって商品登録の有無を判別するかは、状況に合わせてコードを修正してください。

データベース連動型フォームの場合、初期値のセットはエンティティ側でも実装できそうです。
が、データベースの操作が必要そうで少々煩雑なため、本記事では解説しません。

「入力例(プレースホルダー)」を設定する

入力フォームに、グレーの文字で入力例や入力内容(一般に「プレースホルダー」と呼ばれる)を設定するには、そのフォームを生成するFormTypeのaddメソッドに「placeholder」というキーワードをセットします。

->add('name', TextType::class, [
  'attr' => ['placeholder' => 'デフォルトネーム'],
    'constraints' => [
        new Assert\NotBlank(),
        new Assert\Length(['max' => $this->eccubeConfig['eccube_stext_len']]),
    ],
])

「placeholder」の場合、すでに登録済の項目に関してはその内容が表示されるようになるので、先ほどのように条件分岐させたコードを記述する必要はありません。

ただ上記コードを見てもらうとわかる通り、先ほどとは記述方法が少し異なります。
「attr」というキーワードを介して連想配列で記述しなければならず、直接「placeholder」というキーワードでセットした場合はエラーになってしまいます。

まとめ

以上、入力フォームのデフォルト値やプレースホルダーをセットする方法について紹介しました。

いずれも必須の機能というわけではありませんが、ユーザビリティを上げるのに有効な手段であり、入力間違いや入力漏れなどを防ぐことにも繋がります。

本記事で紹介したコード1行を挿入するだけで実装できる簡単なカスタマイズなので、ぜひ使ってみてください!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次