LoginSignup
TrendQuestionOfficial EventOfficial ColumnOpportunitiesOrganization
技術が好きなメンバーと成長。パーソルエクセルHRパートナーズの「システム開発部」
13
9

More than 1 year has passed since last update.

@dev_belltzel

posted at

updated at

第64回EC-CUBE関西UGに参加したまとめ｜会員情報に趣味の項目（テキスト）と受注情報に熨斗の項目（セレクトボックス）を追加するカスタム

EC-CUBE,EC-CUBE4,EC-CUBE関西UG

2020-10-15（木）18:00～開催された第64回EC-CUBE関西UGをまとめてみました。

約2時間おかじ（qiita:@okazy twitter:@OwOkazy）さんがぶっ通しで、説明しながらライブコーディングを行ってくれました。

資料が欲しい、YouTubeで見れないですか？といったコメントなども見たので、僕なりに資料を残してみます。

資料サイト

EC-CUBE 4.0 開発者向けドキュメント
https://doc4.ec-cube.net/

Symfony doc
https://symfony.com/doc/current/index.html

本日のソース
github:okazy

他にも紹介されてたような・・・

環境

おかじさんは、「1.コマンドラインからインストールする」の方法でEC-CUBEをインストールしていました。

環境はレンタルサーバーにインストールしてもいいし、XAMPP・MAMPでもいいかと思います。
EC-CUBEが動ていれば問題なし！！

基礎知識

カスタムするPHPファイルは「app/Customize」フォルダ内に設置します。
できるだけ「src/Eccube」フォルダ内の構成と同じように作成すると分かり易いです。

会員情報に趣味の項目（テキスト）を追加するカスタム

フロント側の新規会員登録ページ・マイページ→会員情報編集ページ、管理側の会員登録ページ・会員編集ページに趣味の項目を追加するカスタムです。

ENTITYのカスタマイズ

参考ページ：Entityのカスタマイズ
・基本の拡張方法
・Entity からフォームを自動生成する

会員情報（src/Eccube/Entity/Customer.php）の情報を拡張します。
CustomerTrait内でFormの設定まで行います。

CustomerTrait.php
<?php
namespace Customize\Entity;

use Doctrine\ORM\Mapping as ORM;
use Eccube\Annotation\EntityExtension;
use Eccube\Annotation\FormAppend;
use Symfony\Component\Validator\Constraints as Assert;

/**
 * @EntityExtension("Eccube\Entity\Customer")
 */
trait CustomerTrait
{
    /**
     * @var string|null
     * @ORM\Column(type="string", nullable=true)
     * @Assert\NotBlank(message="入力してください")
     * @FormAppend(
     *     auto_render=true,
     *     type="\Symfony\Component\Form\Extension\Core\Type\TextType",
     *     options={"required": true, "label": "趣味"}
     * )
     */
    private $hobby;

    /**
     * @return string|null
     */
    public function getHobby(): ?string
    {
        return $this->hobby;
    }

    /**
     * @param string|null $hobby
     */
    public function setHobby(?string $hobby): void
    {
        $this->hobby = $hobby;
    }
}

それでは、上記ファイルを設置してデータベースの更新などコマンドを打っていきましょう。

ファイルの設置

「app/Customize/Entity/CustomerTrait.php」へ上記コードを追加します。
CustomerTrait.phpは新規作成します。

ファイルの設置が完了したら、ターミナルからコマンドを実行します。

コマンドの実行

EC-CUBEを設置したフォルダへ移動して次のコマンドを実行しましょう。

Proxy クラスを生成
bin/console eccube:generate:proxies

キャッシュクリア
bin/console cache:clear --no-warmup

実行する SQL を確認
bin/console doctrine:schema:update --dump-sql

こんな感じでSQLが表示されると思います。

The following SQL statements will be executed:

    ALTER TABLE dtb_customer ADD hobby VARCHAR(255) DEFAULT NULL;

SQL を実行
bin/console doctrine:schema:update --dump-sql --force

キャッシュ生成
bin/console cache:warmup

Formを確認

フロント側
新規会員登録ページ、マイページ→会員情報編集ページに趣味項目が追加されています。

2020-10-15_22h54_48.png

管理側
新規会員登録、会員情報編集ページに趣味項目が追加されています。

2020-10-15_22h55_54.png

以上で、会員情報に趣味の項目（テキスト）を追加するカスタムは完了です。

ENTITYファイルだけで、簡単に項目が追加できるので簡単・・・ですね。
ちょっとした項目の追加ならこの方法が良いかも。

受注情報に熨斗の項目（セレクトボックス）を追加するカスタム

フロント側のカートからレジへ進んでご注文手続きページ・ご注文内容確認ページ、管理側の受注登録ぺージ、受注編集ページへ熨斗の項目を追加するカスタムです。

熨斗の選択はセレクトボックスで選択項目は「あり・なし」です。

ENTITYのカスタマイズ

参考ページ：Entityのカスタマイズ
・基本の拡張方法

受注情報（src/Eccube/Entity/Order.php）の情報を拡張します。
上記の会員情報のカスタムと違いFormは別の方法でカスタムするので、ここでは熨斗の情報を登録できるようにOrderに項目を追加するだけです。

OrderTrait.php
<?php
namespace Customize\Entity;

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

/**
 * @EntityExtension("Eccube\Entity\Order")
 */
trait OrderTrait
{
    /**
     * @var bool
     * @ORM\Column(type="boolean", nullable=true)
     */
    private $noshi = false;

    /**
     * @return bool
     */
    public function isNoshi(): ?bool
    {
        return $this->noshi;
    }

    /**
     * @param bool $noshi
     */
    public function setNoshi(bool $noshi): void
    {
        $this->noshi = $noshi;
    }
}

熨斗の項目は「あり・なし」の選択だけなので、boolean（true/false）で0か1かみたいな感じです。
ON/OFFがしっくりくるかも？

getNoshi()ではなくisNoshi()なのは、booleanはtrueかfalseになるので、このようなときはisを使います。
return $this->noshi;はtrueかfalseが返ります。

ファイルの設置

「app/Customize/Entity/OrderTrait.php」へ上記コードを追加します。
OrderTrait.phpは新規作成します。

まずは管理側から。

Formのカスタマイズ

参考ページ：FormTypeのカスタマイズ
・FormExtensionを使った拡張

受注情報Form（src/Eccube/Form/Type/Admin/OrderType）の拡張します。
会員情報の時はENTITY内でFormの拡張を行いましたが、受注情報の拡張はFormを作成する元になるOrderType.phpを拡張します。

AdminNoshiExtension.php
<?php

/*
 * This file is part of EC-CUBE
 *
 * Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
 *
 * http://www.ec-cube.co.jp/
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

namespace Customize\Form\Extension;

use Eccube\Form\Type\Admin\OrderType;
use Symfony\Component\Form\AbstractTypeExtension;
use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\Form\FormEvent;
use Symfony\Component\Form\FormEvents;

class AdminNoshiExtension extends AbstractTypeExtension
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder->addEventListener(FormEvents::POST_SET_DATA, function (FormEvent $event) {
            $form = $event->getForm();

            $form->add('noshi', ChoiceType::class, [
                'choices' => [
                    'あり' => true,
                    'なし' => false,
                ],
            ]);
        });
    }

    public function getExtendedType()
    {
        return OrderType::class;
    }
}
ファイルの設置

「app/Customize/Form/Extension/AdminNoshiExtension.php」へ上記コードを追加します。
AdminNoshiExtension.phpは新規作成します。

準備は完了しましたが、まだ受注登録・編集のフォームへ熨斗の項目は表示されません。
表示させるには、テンプレートを作成します。

今回は、支払い方法の項目の下へ、熨斗の項目を表示させるようにします。

テンプレート作成

EC-CUBE4では、JavaScriptを使ってHTMLの変更をする事を推奨しています。
どこかに情報があったのですが、いつも見失って見つけることができませんでした。。。
見つけれたら記事の修正をしておきます。

画面への介入についてはサンプルプラグインが参考になります。

order_edit.twig
<script>
    $(function () {
        $('#customize-noshi').appendTo($('#orderOverview > div > div > div:nth-child(1)'));
    });
</script>
<div class="d-none">
    <div id="customize-noshi" class="row mb-3 form-group">
        <label class="col-3 col-form-label">熨斗</label>
        <div class="col">
            {{ form_widget(form.noshi) }}
            {{ form_errors(form.noshi) }}
        </div>
    </div>
</div>
ファイルの設置

「app/template/admin/order_edit.twig」へ上記コードを追加します。
order_edit.twigは新規作成します。

次に、設置したtwigを管理側の受注登録・編集ページで読み込むためにEventファイルを作成します。

Event作成（テンプレートイベント）

受注登録・編集フォームのtwigファイルはsrc/Eccube/Resource/template/admin/Order/edit.twigになります。
ここへ上記のorder_edit.twigの内容を追加（拡張）する為の方法です。

参考ページ：Symfonyの機能を使ったカスタマイズ
・Symfony Event

※EventはSymfonyの機能ですが、TemplateEventはEC-CUBEの独自拡張です。

NoshiEvent.php
<?php
namespace Customize\EventListener;

use Eccube\Event\TemplateEvent;
use Symfony\Component\EventDispatcher\EventSubscriberInterface;

class NoshiEvent implements EventSubscriberInterface
{

    public static function getSubscribedEvents()
    {
        return [
            '@admin/Order/edit.twig' => 'onAdminOrderEditTwig',
        ];
    }

    public function onAdminOrderEditTwig(TemplateEvent $event)
    {
        $event->addSnippet('@admin/order_edit.twig');
    }
}
ファイルの設置

「app/Customize/EventListener/NoshiEvent.php」へ上記コードを追加します。
order_edit.twigは新規作成します。

フロント側

Formのカスタマイズ

フロント側の受注情報Form（src/Eccube/Form/Type/Shopping/OrderType）の拡張します。

参考ページ：FormTypeのカスタマイズ
・FormExtensionを使った拡張

NoshiExtension.php
<?php

/*
 * This file is part of EC-CUBE
 *
 * Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
 *
 * http://www.ec-cube.co.jp/
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

namespace Customize\Form\Extension;

use Eccube\Form\Type\Shopping\OrderType;
use Symfony\Component\Form\AbstractTypeExtension;
use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\Form\FormEvent;
use Symfony\Component\Form\FormEvents;

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

        $builder->addEventListener(FormEvents::POST_SET_DATA, function (FormEvent $event) {
            $form = $event->getForm();

            $form->add('noshi', ChoiceType::class, [
                'choices' => [
                    'あり' => true,
                    'なし' => false,
                ],
            ]);
        });
    }

    public function getExtendedType()
    {
        return OrderType::class;
    }
}
ファイルの設置

「app/Customize/Form/Extension/NoshiExtension.php」へ上記コードを追加します。
NoshiExtension.phpは新規作成します。

テンプレートのカスタマイズ

参考ページ：デザインテンプレートの基礎
・デザインカスタマイズ時のファイル配置

フロント側のテンプレートを直接変更していますが、フロント側のデザインをカスタマイズする時は/src/Eccube/Resource/template/[template_code]を/app/template/[template_code]へコピーしてから変更します。
すべてコピーしなくても、必要な分だけコピーしたら大丈夫です。

コードが長いので、本日のソース「github:okazy」からapp/template/default/Shopping/confirm.twigとapp/template/default/Shopping/index.twigを確認してください。

ファイルの設置

「app/template/default/Shopping/confirm.twig」と「app/template/default/Shopping/index.twig」へ上記コードを追加します。

コマンドの実行

会員情報と同じようにコマンドを実行しましょう。

Proxy クラスを生成
bin/console eccube:generate:proxies

キャッシュクリア
bin/console cache:clear --no-warmup

実行する SQL を確認
bin/console doctrine:schema:update --dump-sql

こんな感じでSQLが表示されると思います。

The following SQL statements will be executed:

    ALTER TABLE dtb_order ADD noshi TINYINT(1) DEFAULT NULL;

SQL を実行
bin/console doctrine:schema:update --dump-sql --force

キャッシュ生成
bin/console cache:warmup

Formを確認

フロント側
ご注文手続きに熨斗の選択肢
2020-10-16_01h12_43.png

ご注文内容確認に熨斗の選択肢の確認
2020-10-16_01h14_40.png

管理側
受注管理・編集ページに熨斗の項目が追加されてます。
2020-10-16_00h40_37.png

以上で、第64回EC-CUBE関西UGの内容は終了です。

おかじ（@OwOkazy）さん、ありがとうございました！！

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
Sign upLogin
13
9