ECCUBE4ゲスト購入で「職業」を選択する方法

ECCUBE４で、会員登録画面には「職業」欄があります。ゲスト購入でも「職業」を追加する手順を説明します。下図のようにゲスト購入時にも「職業」が選択できます。

「職業」欄として使うのではなく、何か、購入時に情報を追加したい場合、もともとある「職業」を別の用途にして使うのもありです。

ゲスト購入時のお客様情報入力画面に「職業」を追加する手順
- 変更対象
- 作業手順
動作確認
- ゲスト購入
- 管理画面
まとめ

ゲスト購入時のお客様情報入力画面に「職業」を追加する手順

会員情報、注文者情報のテーブルには、もともとjob_id があります。なので会員が購入したときは購入情報に「職業」が記録されています。ゲスト購入の時も「職業」を記録できるようにしましょう。

変更対象

変更対象は以下とします。

ゲスト購入時の「お客様情報の入力」画面に職業欄を追加
「ご注文手続き」画面に職業を表示。「都道府県」同等に変更可能にする。
「ご注文内容のご確認」画面に職業を表示。
管理者「受注登録」画面で、注文者情報に「職業」を表示、変更可能にする。

作業手順

では、変更対象に対して、修正をしていきます。複数の変更対象に必要な部分は共通部分として説明していきます。

変更箇所-共通部分

src\Eccube\Form\Type\Admin\OrderType.php

追加内容は下リストの通りです。

use Eccube\Form\Type\Master\JobType;

1	use Eccube\Form\Type\Master\JobType;

            ->add('job', JobType::class, [
                'required' => false,
            ])

->add('job', JobType::class, [

'required' => false,

])

job を追加しています。

追加の位置は下図を参考にしてください。gitのGUIアプリ sourcetree の画面コピーです。右側の変更内容の左側に行番号がありますのでそれで判断できます。

OrderHelper.php

src\Eccube\Service\OrderHelper.php にjobの変換処理を追加します。名前からid に変換する処理です。

変換内容は以下の通りです。

箇所は、先ほど同様に、sourcetree のキャプチャから判断してください。行番号と前後の内容で判断できます。

・use文

use Eccube\Repository\Master\JobRepository;

1	use Eccube\Repository\Master\JobRepository;

・レポジトリの定義

    /**
     * @var JobRepository
     */
     protected $jobRepository;

/**

* @var JobRepository

protected $jobRepository;

・コンストラクタ

        JobRepository $jobRepository,

1	JobRepository $jobRepository,

と

        $this->jobRepository = $jobRepository;

1	$this->jobRepository = $jobRepository;

コンストラクタでのjobRepository受け渡しですね。

・job変換処理

最後、jobの変換処理の部分です。ここでjobRepository を使うために上のコードの追加があるんですね。名前からid を検索しています。

        if ($NonMember && $NonMember->getJob()) {
            $Job = $this->jobRepository->find($NonMember->getJob()->getId());
            $NonMember->setJob($Job);
        }

if ($NonMember && $NonMember->getJob()) {

$Job = $this->jobRepository->find($NonMember->getJob()->getId());

$NonMember->setJob($Job);

}

src\Eccube\Form\Type\Front\NonMemberType.php

ゲスト購入時フォームデータにjobを追加します。

追加コードは下リストです。

use Eccube\Form\Type\Master\JobType;

1	use Eccube\Form\Type\Master\JobType;

            ->add('email', RepeatedEmailType::class)
            ->add('job', JobType::class);

1 2	->add('email', RepeatedEmailType::class) ->add('job', JobType::class);

add('email' の行は追加ではありませんが、行末を示す「;」を削除しています。

挿入箇所は以下の通りです。ピンク背景が削除行、緑背景が追加行になります。

変更箇所-ゲスト購入時の「お客様情報の入力」画面に職業欄を追加

src\Eccube\Controller\NonMemberShoppingController.php

indexメソッドに以下のコードを追加します。

                ->setAddr02($data['addr02'])
                ->setJob($data['job']);

1 2	->setAddr02($data['addr02']) ->setJob($data['job']);

setAddr02 の行は、追加ではなく「;」を削除しています。

該当箇所は以下を参考にしてください。

app\template\default\Shopping\nonmember.twig

ビューの修正です。職業をプルダウンメニューで選択できるようにします。

このファイル、最初は存在していないので、コピーしてきましょう。

src\Eccube\Resource\template\default\Shopping\nonmember.twig

を app\template\default\Shopping\nonmember.twig にコピーします。

バージョンアップでビューに対する変更が消えてしまわないように、コピーして修正する仕様になっています。

追加コードは下リストの通りです。

                <dl>
                    <dt>
                        {{ form_label(form.job, '職業', { 'label_attr': {'class': 'ec-label' }}) }}
                    </dt>
                    <dd>
                        <div class="ec-select{{ has_errors(form.job) ? ' error' }}">
                            {{ form_widget(form.job) }}
                            {{ form_errors(form.job) }}
                        </div>
                    </dd>
                </dl>

<dl>

<dt>

{{ form_label(form.job, '職業', { 'label_attr': {'class': 'ec-label' }}) }}

</dt>

<dd>

</div>

</dd>

</dl>

下図を参考に、メールアドレスの下に追加しましょう。

変更箇所-「ご注文手続き」画面に職業を表示。「都道府県」同等に変更可能にする。

app\template\default\Shopping\index.twig

まずビューから変更しましょう。

ビューはすべて同じなのですが、初めて編集するときは、コピーしてきましょう。

src\Eccube\Resource\template\default\Shopping\index.twig を

app\template\default\Shopping\index.twig にコピーします。

以下のコードを追加してください。3か所あります。

<p class="ec-input"><span class="customer-edit customer-job">{{ Order.job }}</span></p>

1	<p class="ec-input"><span class="customer-edit customer-job">{{ Order.job }}</span></p>

                            <dl>
                                <dt>
                                    <label class="ec-label">{{ '職業'|trans }}</label>
                                </dt>
                                <dd>
                                    <div class="ec-input">
                                        <span class="customer-form customer-job"></span>
                                    </div>
                                </dd>
                            </dl>

<dl>

<dt>

<label class="ec-label">{{ '職業'|trans }}</label>

</dt>

<dd>

</div>

</dd>

</dl>

<input type="hidden" id="customer-job" class="customer-in" name="customer_job" value="{{ Order.job }}">

1	<input type="hidden" id="customer-job" class="customer-in" name="customer_job" value="{{ Order.job }}">

箇所は下図を参考にしてください。「変更」ボタンを押して修正モードに移行したり、「OK」ボタンや「キャンセル」ボタンで表示画面に戻ったりするため、3か所に追加しています。

ちなみにここでの職業の変更I/Fはテキストになっています。プルダウンメニューは面倒なのであきらめましょう。

src\Eccube\Controller\NonMemberShoppingController.php

この画面で注文内容を修正すると、非同期通信で注文情報を修正しに行きます。その受け側のcustomerメソッドを修正します。

修正にあたり、jobRepository クラスを使うため、コンストラクタの修正も入っています。

修正コードを下に示します。

・コンストラクタなど

最初にjobRepository の準備部分のコードです。さっきも似たような箇所ありましたね。5か所です。

use Eccube\Repository\Master\JobRepository;

1	use Eccube\Repository\Master\JobRepository;

    /**
     * @var JobRepository
     */
     protected $jobRepository;

/**

* @var JobRepository

protected $jobRepository;

     * @param JobRepository $jobRepository

1	* @param JobRepository $jobRepository

        JobRepository $jobRepository,

1	JobRepository $jobRepository,

        $this->jobRepository = $jobRepository;

1	$this->jobRepository = $jobRepository;

修正位置はsourcetree の画面で示します。

・customerメソッド

追加コードは以下の3か所です。

            $job = null;
            if ($data['customer_job']!=='') {
                $job = $this->jobRepository->findOneBy(['name' => $data['customer_job']]);
                if (!$job) {
                    log_info('非会員お客様情報変更入力チェックエラー(job)');

                    return $this->json(['status' => 'NG'], 400);
                }
            }

$job = null;

if ($data['customer_job']!=='') {

$job = $this->jobRepository->findOneBy(['name' => $data['customer_job']]);

if (!$job) {

log_info('非会員お客様情報変更入力チェックエラー(job)');

return $this->json(['status' => 'NG'], 400);

}

                ->setEmail($data['customer_email'])
                ->setJob($job);

1 2	->setEmail($data['customer_email']) ->setJob($job);

                ->setEmail($data['customer_email'])
                ->setJob($job);

1 2	->setEmail($data['customer_email']) ->setJob($job);

修正位置はsourcetreeの変更箇所で示します。

（2020/9/26修正）

setJobメソッドの追加箇所が2か所ありますが、片方が顧客情報、もう片方が注文情報への追加になっています。

変更箇所-「ご注文内容のご確認」画面に職業を表示。

ここはビューに追加するだけとなっています。

app\template\default\Shopping\confirm.twig

まずコピーしましょう。

src\Eccube\Resource\template\default\Shopping\confirm.twig から app\template\default\Shopping\confirm.twig にコピーしてください。

追加コードは以下の通りです。

                    <p class="ec-input">{{ Order.job }}</span></p>

1	<p class="ec-input">{{ Order.job }}</span></p>

追加位置は下図のようになっています。

変更箇所-管理者「受注登録」画面で、注文者情報に「職業」を表示、変更可能にする。

管理者が修正できるようにします。

ビューのみの変更になります。

app\template\admin\Order\edit.twig

まずコピーしましょう。

src\Eccube\Resource\template\admin\Order\edit.twig から app\template\admin\Order\edit.twig にコピーしてください。

追加コードは以下の通りです。

                                        <div class="row form-group">
                                            <label class="col-3 col-form-label">{{ 'admin.common.job'|trans }}</label>
                                            <div class="col">
                                                {{ form_widget(form.job) }}
                                                {{ form_errors(form.job) }}
                                            </div>
                                        </div>