【応用可】会員登録画面にオリジナル項目を追加【Eccube4】 - エンジニ屋.com(エンジニヤドットコム)

本記事は、下記写真のように会員登録画面に新たな項目を追加する方法の紹介となります。

新規会員登録画面

※開発Eccube バージョン
・Eccube4.0.6

本記事で紹介する方法は、ラジオボタンでの項目の追加ですが、FormTypeの一部などを変えると他の項目で応用可能です。
尚、項目の追加方法のみ紹介なので、選択を替えたとしても何も変化はありません。例えば「法人として登録」を選択した場合、会社名を必須化にするなどのカスタマイズ方法が必要な方は、こちらの記事を参考にしてください。

enginiya.com

それでは、項目の追加方法を紹介していきます。

データベースにカラムを追加

データベースにカラムを追加

先ずは、DBのテーブルに新しく項目を保存する為のカラムを追加していきます。 app\Customize\Entity\CustomerTrait.phpにファイルを作成してコードを下記のように書きます。

<?php

namespace Customize\Entity;

use Eccube\Annotation\EntityExtension;
use Doctrine\ORM\Mapping as ORM;

/**
 * @EntityExtension("Eccube\Entity\Customer")
 */
trait CustomerTrait
{

  /**
     * @var int
     *
     * @ORM\Column(name="registration_type", type="integer")
     *
     */
    private $registration_type;

    /**
     * Set registrationType.
     *
     * @param string $registrationType
     *
     * @return Customer
     */
    public function setregistrationType($registrationType)
    {
        $this->registration_type = $registrationType;
        return $this;
    }

    /**
     * Get registrationType.
     *
     * @return string
     */
    public function getregistrationType()
    {
        return $this->registration_type;
    }
}

カラム名は何でも良いですが、ここではregistration_typeとしてます。値は、数値として受け取るのでintegerとします。入力値は必須にするつもりなので、nullableは設定していません。

では、コードが書くことが出来たらコマンドターミナルで下記コマンドを実行します。

php bin/console eccube:generate:proxies

こちらで、更新されるファイルがapp/proxyディレクト内に準備されます。

次に下のコマンドを実行します。

php bin/console doctrine:schema:update --dump-sql --force

こちらで、データベースに接続をして、テーブルにカラムが追加されるsqlが実行されます。

dtb_customer というテーブルを確認すると、一番右にregistation_typeというカラムが追加されているはずです。

Formに項目を追加

冒頭のイメージ図のように、ユーザ側で表示させる為に、先ずはフォームとなるソースを作成していきます。新規会員登録画面の各項目は、EntryTypeというファイル内で作成されているので、こちらを拡張する為にapp\Customize\Form\Extension\Front\EntryTypeExtension.phpを作成します。そして下記のようにコードを書きます。

<?php

namespace Customize\Form\Extension\Front;

use Eccube\Form\Type\Front\EntryType;
use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
use Symfony\Component\Form\AbstractTypeExtension;
use Symfony\Component\Form\FormBuilderInterface;

class EntryTypeExtension extends AbstractTypeExtension
{
    public function getExtendedType()#拡張させたいType名
    {
        return EntryType::class;
    }

    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('registration_type',ChoiceType::class,[#表示させるタイプを選択
                'required' => true,
                'choices' => [
                    trans('front.customer.corporation.label') => 0,#表示させたい項目名
                    trans('front.customer.individual.label') => 1,
                ],
                'label' => false,
                'expanded' => true,#ラジオボタンで表示させる為
                'multiple' => false,#ラジオボタンで表示させる為
            ]);
    }
}

ラジオボタンで条件を必須にする場合は、上記の書き方となります。 choicesで選択項目名と、保存される値を設定しています。ここで、項目名を設定しても良いですが、別ファイルから呼び出す方法で行っています。

app\Customize\Resource\locale\Eccube\messages.ja.yamlを作成して下記のように書きます。

front.customer.corporation.label: 会社として登録
front.customer.individual.label: 個人として登録

先ほど、choicesで設定した同じ文字列の横に表示させる項目名を書きます。　このようにすることで、trans()で呼び出すことが可能です。

twigで呼び出して表示

Formを作成しただけでは、表側では表示されないので、表示させる為にtwigファイルからFormのコードを呼び出します。

src\Eccube\Resource\template\default\Entry\index.twigをコピーして、 app\template\default\Entry\index.twigを作成します。本記事では、一番上に項目を追加したいので、32行目あたりに下記のようにコードを追加します。

<dl>
     <dt>
          {{ form_label(form.registration_type,"登録方法", { 'label_attr': { 'class': 'ec-label' }}) }}
      </dt>
       <dd>
           <div class="ec-radio{{ has_errors(form.registration_type) ? ' error' }}">
                {{ form_widget(form.registration_type) }}
                {{ form_errors(form.registration_type) }}
           </div>
       </dd>
</dl>

これで登録までは可能ですが、最後に確認画面の表示するコードも載せておきます。 src\Eccube\Resource\template\default\Entry\confirm.twigをコピーして app\template\default\Entry\confirm.twigを作成します。下記をコードを30行目あたりに追加してください。

<dl>
    <dt>
      {{ form_label(form.registration_type,"登録方法", { 'label_attr': { 'class': 'ec-label' }})|nl2br }}
    </dt>
     <dd>
          {% set ans = form.registration_type.vars.data %}
    {% if ans == 0 %}
         {{ 'front.customer.corporation.label'|trans }}
   {% elseif ans == 1 %}
         {{ 'front.customer.individual.label'|trans }}
   {% endif %}
        {{ form_widget(form.registration_type, { type : 'hidden'}) }}
   </dd>
</dl>

0と1で値を保存しているので、if文で条件分岐をさせて表示名を変えています。

以上で、冒頭のイメージ図のように追加ができました。あとはマイページの編集画面、管理側の会員画面も項目に合して変更してください。変更の方法は、大部分が似たような流れとなりますので、本記事では割愛させて頂きます。

最後に

Eccubeはsymfonyのフレームワークで構成されています。もし「自力でもっとカスタマイズしたい」や「仕事でEccubeで開発することになった」方には、下記のsymofony4 入門の参考書をおすすめします。
こちらの参考書にはEccubeのカスタマイズ方法については、記載されてませんがカスタマイズに必要な知識のEntity、Controller、twig、Repositoryなどの利用方法が非常に分かりやすく書かれています。筆者も仕事でEccubeに携わることとなり、参考書を購入し理解が深まりました。 symfonyはLaravelと密接している部分もありLaravelの構成部分の理解も深まり有益でした。
価格帯は若干高めですが、中身はしっかりしているので、購入して損はないと思います。

リンク