Memo

メモ > 技術 > CMS: ECCube > カスタマイズ: ご注文手続きに項目を追加
カスタマイズ: ご注文手続きに項目を追加

※プラグインで対応する、という手段も検討する
  むしろ独自に項目を追加すると、CSVエクスポートなど他機能と連携するための処理も考慮する必要があってややこしい
  原則独自に追加しようとせずに、素直にプラグインに頼るのが良さそう

EC-CUBE 開発コミュニティ - フォーラム
https://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=22487&forum=4

以下は前述の「カスタマイズ: 会員情報に項目を追加」の内容をもとにした、「メッセージカード」の項目を追加する手順
注意点についても、前述の内容を確認しておくこと

■Entityを作成

app\Customize\Entity\OrderTrait.php を作成
<?php

namespace Customize\Entity;

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

/**
 * @EntityExtension("Eccube\Entity\Order")
 */
trait OrderTrait
{
    /**
     * @var string|null
     * @ORM\Column(type="text", nullable=true)
     * @Eccube\Annotation\FormAppend(
     *     auto_render=false,
     *     type="\Symfony\Component\Form\Extension\Core\Type\TextareaType",
     *     options={
     *          "required": false,
     *          "label": "メッセージカード",
     *          "attr": {"placeholder": "例：お誕生日おめでとうございます！", "rows": 5}
     *     })
     */
    private $card_text;

    /**
     * @return string|null
     */
    public function getCardText()
    {
        return $this->card_text;
    }

    /**
     * @param string|null $card_text
     * @return OrderTrait
     */
    public function setCardText($card_text)
    {
        $this->card_text = $card_text;
        return $this;
    }
}


作業したらキャッシュを削除する

$ php bin/console cache:clear --no-warmup


プロキシファイルを作成する

$ php bin/console eccube:generate:proxies


以下に、トレイトを認識させるためのプロキシファイルが作成される
app\proxy\entity\src\Eccube\Entity\Order.php

■テーブル定義を変更$ php bin/console cache:clear --no-warmup
$ php bin/console doctrine:migrations:diff
Generated new migration class to "/var/www/html/app/DoctrineMigrations/Version20240902053229.php" from schema differences.


以下のファイルが作成される

app\DoctrineMigrations\Version20240902053229.php

<?php declare(strict_types=1);

namespace DoctrineMigrations;

use Doctrine\DBAL\Schema\Schema;
use Doctrine\Migrations\AbstractMigration;

/**
 * Auto-generated Migration: Please modify to your needs!
 */
final class Version20240902053229 extends AbstractMigration
{
    public function up(Schema $schema) : void
    {
        // this up() migration is auto-generated, please modify it to your needs
        $this->abortIf($this->connection->getDatabasePlatform()->getName() !== 'mysql', 'Migration can only be executed safely on \'mysql\'.');

        $this->addSql('ALTER TABLE dtb_order ADD card_text LONGTEXT DEFAULT NULL');
    }

    public function down(Schema $schema) : void
    {
        // this down() migration is auto-generated, please modify it to your needs
        $this->abortIf($this->connection->getDatabasePlatform()->getName() !== 'mysql', 'Migration can only be executed safely on \'mysql\'.');

        $this->addSql('ALTER TABLE dtb_order DROP card_text');
    }
}


マイグレーションを実行すると、テーブルに項目が追加される

$ php bin/console doctrine:migrations:status
$ php bin/console doctrine:migrations:migrate
■画面表示を調整

src\Eccube\Resource\template\admin\Order\edit.twig
を複製して
app\template\admin\Order\edit.twig
を作成し、以下を追加する
                    <!-- メッセージカード -->
                    <div class="card rounded border-0 mb-4">
                        <div class="card-header">
                            <div class="row">
                                <div class="col-8">
                                    <div class="d-inline-block" data-tooltip="true" data-placement="top" title="{{ 'admin.common.card_text'|trans }}"><span class="card-title">{{ 'admin.common.card_text'|trans }}<i class="fa fa-question-circle fa-lg ml-1"></i></span></div>
                                </div>
                                <div class="col-4 text-right"><a data-toggle="collapse" href="#messageArea" aria-expanded="false" aria-controls="messageArea"><i class="fa fa-angle-up fa-lg"></i></a></div>
                            </div>
                        </div>
                        <div class="collapse show ec-cardCollapse" id="messageArea">
                            <div class="card-body">
                                {{ form_widget(form.card_text, {'attr': {'rows': 8}}) }}
                            </div>
                        </div>
                    </div><!-- .card.rounded -->
■リソースファイルを調整

ラベルを正しく表示させるに、以下のリソースファイルに文言を追加する

app\Customize\Resource\locale\messages.ja.yaml
common.card_text: メッセージカード
admin.common.card_text: メッセージカード


app\Customize\Resource\locale\messages.en.yaml
common.card_text: Message Card
admin.common.card_text: Message Card


ここまでの手順で、管理画面からの登録編集に対応できている
引き続き、注文時に入力できるようにする

■ユーザ側の注文画面からの登録に対応

※ShoppingController.phpの「checkoutメソッド内を修正」は、「フォームの生成.」処理を通過すると追加項目の値を取得できなくなるための対策
  ただし無理矢理対応している感が否めないので、引き続き実装方法について確認したい
  これはECCube自体の不具合で、後のバージョンでは修正されている…という可能性はあるか
  【EC-CUBE 4】注文内容に新しい項目を追加し、注文画面をカスタマイズしてみた | ノベブロ / NOVEBLO
  https://noveblo.com/eccube-order-customize/
  Orderエンティティ拡張時、FormAppendを利用するとデータが登録されない - Issue #4255 - EC-CUBE/ec-cube
  https://github.com/EC-CUBE/ec-cube/issues/4255

src\Eccube\Controller\ShoppingController.php
を複製して
app\Customize\Controller\ShoppingController.php
を作成し、以下を調整する
// namespaceを修正
namespace Eccube\Controller;
↓
namespace Customize\Controller;

// use部分に追加
use Eccube\Controller\AbstractShoppingController;

// checkoutメソッド内を修正
        // フォームの生成.
        $form = $this->createForm(OrderType::class, $Order, [
            // 確認画面から注文処理へ遷移する場合は, Orderエンティティで値を引き回すためフォーム項目の定義をスキップする.
            'skip_add_form' => true,
        ]);
        $form->handleRequest($request);

        if ($form->isSubmitted() && $form->isValid()) {
            log_info('[注文処理] 注文処理を開始します.', [$Order->getId()]);
↓
        // 追加項目の値を取得
        $card_text = $Order->getCardText();

        // フォームの生成.
        $form = $this->createForm(OrderType::class, $Order, [
            // 確認画面から注文処理へ遷移する場合は, Orderエンティティで値を引き回すためフォーム項目の定義をスキップする.
            'skip_add_form' => true,
        ]);
        $form->handleRequest($request);

        if ($form->isSubmitted() && $form->isValid()) {
            // 追加項目の値を設定
            $Order->setCardText($card_text);

            log_info('[注文処理] 注文処理を開始します.', [$Order->getId()]);


src\Eccube\Resource\template\default\Shopping\index.twig
を複製して
app\template\default\Shopping\index.twig
を作成し、以下を追加する
                <div class="ec-orderConfirm">
                    <div class="ec-rectHeading">
                        <h2>{{ 'メッセージカード'|trans }}</h2>
                    </div>
                    <div class="ec-input">
                        {{ form_widget(form.card_text, {'attr': {'class': 'form-control', 'placeholder': 'メッセージがございましたら、こちらにご入力ください。(3000文字まで)'|trans, 'rows': '6'}}) }}
                        {{ form_errors(form.card_text) }}
                    </div>
                </div>


src\Eccube\Resource\template\default\Shopping\confirm.twig
を複製して
app\template\default\Shopping\confirm.twig
を作成し、以下を追加する
            <div class="ec-orderConfirm">
                <div class="ec-rectHeading">
                    <h2>{{ 'メッセージカード'|trans }}</h2>
                </div>
                <div class="ec-input">
                    {{ Order.card_text|nl2br }}
                </div>
            </div>


app\Customize\Form\Extension\OrderExtension.php を作成する
<?php

namespace Customize\Form\Extension;

use Eccube\Form\Type\Shopping\OrderType;
use Symfony\Component\Form\AbstractTypeExtension;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\Form\Extension\Core\Type\TextareaType;
use Symfony\Component\Validator\Constraints as Assert;

class OrderExtension extends AbstractTypeExtension
{

    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        // ShoppingController::checkoutから呼ばれる場合は, フォーム項目の定義をスキップする.
        if ($options['skip_add_form']) {
            return;
        }

        $builder
            ->add('card_text', TextareaType::class, [
                'required' => false,
                'constraints' => [
                    new Assert\Length(['max' => 3000]),
                ],
            ]);
        ;
    }

    public function getExtendedType()
    {
        return OrderType::class;
    }

}
■キャッシュをクリア

最後に、キャッシュをクリアしておく

$ php bin/console cache:clear --no-warmup


これで受注にメッセージカード欄が追加される

■メモ

以下も参考になりそう

EC-CUBE4 購入時オプションを追加 #symfony3 - Qiita
https://qiita.com/applexco/items/78a999a0f7464043d98c
Memo

Advertisement
