Symfony
EC-CUBE

EC-CUBEのSymfony開発ブランチでカスタマイズディレクトリを使って既存フォームに新規項目を追加してみる

概要

EC-CUBEのSymfony開発ブランチではEC-CUBE3.0系にはなかったカスタマイズディレクトリによるカスタマイズ方法が導入されています。
本記事ではカスタマイズ例として既存フォームへ新規項目を追加するまでの流れを示します。

ソースコードは以下でも確認いただけます。
https://github.com/okazy/ec-cube/tree/demo

新規画面追加

新規会員登録画面へ趣味のフォームを追加します。

詳しい内容は公式ドキュメントを参照してください。

Step1: /app/Customize/Entity 配下に CustomerTrait トレイトを作成します。

/app/Customize/Entity/CustomerTrait.php
<?php

namespace Customize\Entity;

trait CustomerTrait
{

}

Step2: @EntityExtension アノテーションを追加して拡張するエンティティを指定します。

/app/Customize/Entity/CustomerTrait.php
<?php

namespace Customize\Entity;

use Eccube\Annotation\EntityExtension;

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

}

Step3: $hobby 変数を追加します。

/app/Customize/Entity/CustomerTrait.php
<?php

namespace Customize\Entity;

use Eccube\Annotation\EntityExtension;

/**
 * @EntityExtension("Eccube\Entity\Customer")
 */
trait CustomerTrait
{
    public $hobby;
}

Step4: @ORM\Column アノテーションでデータベースの設定を追加します。

/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
{
    /**
     * @ORM\Column(type="string", nullable=true)
     */
    public $hobby;
}

Step4: コマンドラインからプロキシファイルを作成します。

/app/proxy/entity ディレクトリに Customer.php が作成されます。

bin/console eccube:generate:proxies

Step5: コマンドラインからDBのスキーマを変更します。

dtb_customer テーブルに hobby カラムが追加されます。

実行されるSQLの確認。

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

問題がなければ実行

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

Step6: @FormAppend アノテーションでフォームの設定を追加します。

/app/Customize/Entity/CustomerTrait.php
<?php

namespace Customize\Entity;

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

/**
 * @EntityExtension("Eccube\Entity\Customer")
 */
trait CustomerTrait
{
    /**
     * @ORM\Column(type="string", nullable=true)
     * @FormAppend(
     *     auto_render=true,
     *     form_theme="Form/hobby.twig"
     * )
     */
    public $hobby;
}

Step7: /app/template 配下にテンプレートファイルを追加します。

/app/template/default/Form/hobby.twig
{%- extends 'Form/form_div_layout.twig' -%}

{%- block _entry_hobby_row -%}
    <dl>
        <dt>
            {{ form_label(form, '趣味', {'label_attr': {'class': 'ec-label'}}) }}
        </dt>
        <dd>
            {# 確認画面での表示 #}
            {% if type is defined and type == 'hidden' %}
                {{ form.vars.data }}
                {{ form_widget(form, {type: 'hidden'}) }}
            {% else %}
                {# 入力画面での表示 #}
                <div class="ec-select{{ has_errors(form) ? ' error' }}">
                    {{ form_widget(form) }}
                    {{ form_errors(form) }}
                </div>
            {% endif %}
        </dd>
    </dl>
{%- endblock _entry_hobby_row -%}

画面を更新して趣味が登録できたら成功です!