【EC-CUBE 4】お問い合わせフォームに新しい項目を追加する方法

事前準備として、src下に元々あるファイルをapp下にコピーします。（src下のファイルを直接編集しても機能しますが、基本的にカスタマイズするファイルはapp下に複製し、オリジナルは弄らない方が良いです。）

複製したContactTypeファイルを開き、以下コードを修正・追記します。

namespace Customize\Form;

namespaceを複製先ディレクトリに変更します。
（オリジナルではEccube\Form\Type\Frontになっていると思います。）

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

useに上記コードを追加します。
「会社名」はテキストで入力するためこの記述が必要です。

->add('company_name', TextType::class, [
  'required' => false,
])

会社名を入力するフォームの生成コードです。フォームを設置したい位置に挿入します。本例では、フォームの一番最初（public function buildForm内、$builderすぐ下の行）に追記しました。

会員がログインしたときに、自動で会社名がセットされるようにします。

事前準備として、src下に元々あるファイルをapp下にコピーします。（src下のファイルを直接編集しても機能しますが、基本的にカスタマイズするファイルはapp下に複製し、オリジナルは弄らない方が良いです。）

複製したContactControllerファイルを開き、以下コードを修正・追記します。

namespace Customize\Controller;

namespaceを複製先ディレクトリに変更します。
（オリジナルではEccube\Controllerになっていると思います。）

// 以下を追記
use Eccube\Controller\AbstractController;

// Eccube\Form\Type\Front\ContactTypeを修正
use Customize\Form\ContactType;

useにAbstractControllerを追加し、フォームの参照先はCustomize下のファイルに変更します。

'company_name' => $user->getCompanyName(),

public function index内、$builder->setDataの引数に追記します。

バック側の処理が終わったので、次はフロント側を修正します。
EC-CUBE管理画面→コンテンツ管理→ページ管理より「お問い合わせ(入力ページ)」を開き、「会社名」を表示させたい場所に以下コードを追記します。（実装例では一番上に記述しています。）

<dl>
    <dt>
        {{ form_label(form.company_name, '企業・団体名', { 'label_attr': { 'class': 'ec-label' }}) }}
    </dt>
    <dd>
        <div class="ec-halfInput{{ has_errors(form.company_name) ? ' error' }}">
            {{ form_widget(form.company_name, {'attr': { 'placeholder': '企業・団体名' }}) }}
            {{ form_errors(form.company_name) }}
        </div>
    </dd>
</dl>

EC-CUBE管理画面→コンテンツ管理→ページ管理よりお問い合わせ(確認ページ)を開き、STEP 3で修正したContact/index.twigと同じ位置に以下コードを追記します。

<dl>
    <dt>
        {{ form_label(form.company_name, '企業・団体名', { 'label_attr': { 'class': 'ec-label' }}) }}
    </dt>
    <dd>
        {{ form.company_name.vars.data }}
        {{ form_widget(form.company_name, { type : 'hidden' }) }}
    </dd>
</dl>

最後に問合受付メールを修正し、会社名がメールでも表示されるようにします。

テンプレートはテキストとHTMLの2種類あるため、それぞれを修正します。

EC-CUBE管理画面→設定→店舗設定→メール設定より、「会社名」を表示させたい場所に以下コードを追記します。（特別な事情がなければ、入力フォームと同じ順番になるよう追記するのが見やすいです。）

企業・団体名：{% if data.company_name is defined %} {{ data.company_name }} {% endif %}

EC-CUBE管理画面→設定→店舗設定→メール設定より、「会社名」を表示させたい場所に以下コードを追記します。（特別な事情がなければ、入力フォームと同じ順番になるよう追記するのが見やすいです。）

{% if data.company_name is defined %}
<dl style="display: flex;border-bottom: 1px dotted #ccc;margin: 0;">
  <dt style="padding-top: 14px;width: 30%;"><label class="ec-label">企業・団体名</label></dt>
  <dd style="width: 70%;line-height: 3;">{{ data.company_name }}</dd>
</dl>
{% endif %}

未入力時にはスキップするようif文がセットになっています。（スキップしない場合は入力必須にしないと、未入力時にメール送信エラーになります。）

ここまでで準備完了です。
管理画面からキャッシュを削除してページにアクセスし、挙動を確認します。

冒頭でお見せしたように、お問い合わせページに新しい項目（会社名）が追加され、確認画面や送信後のメールに反映されているかどうか、また、ログイン時に会社名が自動でセットされるどうかを確認しましょう。