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

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

■2部
第67回EC-CUBE関西UGに参加したまとめ｜【開発者向け】購入フローをカスタマイズしてみよう！

今回は3部作のラスト、1部2部でカスタマイズした内容を、プラグイン化するお話です。
なので、プラグイン化してCustomizeフォルダ内をリセットして、2部と同じ動きをすれば完成です！！

今回もおかじ（@okazy）さんが頑張ってくれました！！！

※覚えてない部分や、聞けてない部分もあるので、憶測や説明が不十分だったりするかもですが、ご了承ください。

資料サイト

プラグイン化された完成品
github:okazy

プラグインで推奨の命名規則
https://doc4.ec-cube.net/plugin_naming_conventions

プラグインのインストール
https://doc4.ec-cube.net/plugin_install

コマンドラインインターフェイス
https://doc4.ec-cube.net/quickstart_cli

環境

環境の作り方は覚えてないです。

とりあえず、まっさらなEC-CUBEの環境を作り、2部で完成したCutomizeフォルダ内をコピーすれば3部勉強用の環境は完成です！！

2部完成品のCutomizeフォルダ内

コピーしたらこちらのコマンドを実行して、Entityをデータベースに反映させましょう。

※Customizeフォルダで動いている環境と、プラグインを作成する環境の2つを作成した方が良いかもです。
@okazyは1つの環境で行ってましたが、エラーが起こった時に何が悪いのか分かり難いかもです。
EC-CUBEのカスタマイズに慣れてない場合は特に・・・。

プラグイン化の手順

コマンドでプラグインの雛形を作成
プラグインのインストールと有効化
プラグインのディレクトリへファイルを移動
テンプレートファイルを移動
命名規則に従い、変数名などを修正
パッケージング

コマンドでプラグインの雛形を作成

プラグインの雛形を作成するコマンドを打ちます。

bin/console eccube:plugin:generate

name [EC-CUBE Sample Plugin]:
> プラグイン名を入力

code [Sample]:
> プラグインコードを入力（スネークケース）（例：KansaiUg）

ver [1.0.0]:
> バージョンを入力（未入力でエンターでOK）

成功すると、/app/Plugin/KansaiUgが作成されています。

※プラグインコードは一意となるコードを付けてください。他のプラグインコードと被ってはダメです。
できるだけオリジナリティの高いプラグインコードを考えましょう。

プラグインのインストールと有効化

次のコマンドを打って、プラグインのインストールと有効化を行います。

インストール
bin/console eccube:plugin:install --code=[プラグインコード]

bin/console eccube:plugin:install --code=KansaiUg

有効化
bin/console eccube:plugin:enable --code=[プラグインコード]

in/console eccube:plugin:enable --code=KansaiUg

特に問題なく成功すると思います。

プラグインのディレクトリへファイルを移動

2部で完成したCustomizeフォルダ内のファイルをプラグインフォルダの中へ移動します。
移動するファイルリストは以下になると思います。

app/Customize/
├── Entity
│   ├── CustomerTrait.php
│   └── OrderTrait.php
├── EventListener
│   └── NoshiEvent.php
├── Form
│   └── Extension
│       ├── AdminNoshiExtension.php
│       └── NoshiExtension.php
└── Service
    └── PurchaseFlow
        └── Processor
            └── NoshiProcessor.php

そのままのフォルダ構成、ファイル名で移動させます。
※Customizeフォルダでのカスタマイズ、プラグインの作成のフォルダ構成はEC-CUBE本体と同じにするのが好ましいです。

命名規則に従い、変数名などを修正

順番が前後していますが、ここで移動したファイルを修正しましょう。。

namespaceの変更

まず、namespaceを変更します。

namespace Customize\Entity;
↓
namespace Plugin\[プラグインコード]\Entity;

namespace Plugin\KansaiUg\Entity;

上記のようにCustomizeフォルダからプラグインへ移動したので、namespaceをプラグイン用に変更します。
必要な個所はすべて変更してください。

命名規則に従った修正

今回の修正箇所は、資料にあるプラグインで推奨の命名規則のドキュメントテーブルのカラム名およびgetter/setter FormExtensionで追加するフィールドが関わってきます。

修正は自力で行ってみてください。
EntityとFromフォルダ内だけになると思います。

※getter/setterを変更すれば、それが使われている箇所すべてを変更しなければならないです。
Customizeフォルダからプラグイン化する時は規模によっては大変になるので、少しづつ移動させるのが良いかもです。

なぜ命名規則に従わなければならないのか。

プラグインをインストールするのは1つじゃないですよね。
自分だけなく、他人の作ったプラグインも一緒にインストールする事も多いでしょう。

もし、同じテーブル名だったら。
もし、同じカラム名だったら。
もし、同じURLだったら。

考えるだけでも恐ろしい？

テンプレートファイルを移動

テンプレートの移動先は/app/Plugin/プラグインコード/Resource/template以下になります。

テンプレートへのパスは@[プラグインコード]/****
****はtemplateからのパスを指定してください。

管理画面へ介入しているテンプレート

/app/template/admin/order_edit.twigをプラグインに移動します。

/app/template/admin/order_edit.twig
↓移動
/app/Plugin/KansaiUg/Resource/template/admin/order_edit.twig

管理画面へのテンプレート介入はEventを使って行っています。

/EventListener/NoshiEvent.phpのテンプレートパスを修正しましょう。

$event->addSnippet('@admin/order_edit.twig');
↓移動
$event->addSnippet('@KansaiUg/admin/order_edit.twig');

フロント画面のテンプレート

Customizeでは/app/template/defaultに本体からコピーしてカスタマイズしていました。
defaultはテンプレートコード。他のテンプレートを利用している場合はそちらをカスタマイズします

しかし、プラグインではテンプレートを修正などはできません。
（やろうと思えばできるが、やってはいけない。）

管理画面のようにjavascriptで要素を埋め込む事も出来ると思いますが、テンプレートが大きくカスタマイズされてたり、デフォルト以外にテンプレートを利用していると、意図しない動作になる可能性が高いです。

ではどうするのか？
それは、プラグイン利用者がパーツを埋め込むという方法が推奨されます。

方法はこちらを参照。詳しく説明されてます。
本体カスタマイズに画面へのパーツ埋め込み、画面への介入方法の記載を追加

テンプレートの移動

まずは、twigファイルを作成します。
/app/Plugin/KansaiUg/Resource/template/shopping_confirm_noshi.twig
/app/Plugin/KansaiUg/Resource/template/shopping_index_noshi.twig

Customizeした部分を作成したtwigファイルへ移動します。

/app/template/default/Shopping/confirm.twig

{# ここから追加 #}
<div class="ec-orderPayment">
    <div class="ec-rectHeading">
        <h2>熨斗（手数料500円）</h2>
    </div>
    <div class="ec-input">
        <p>{% if Order.isNoshi %}あり{% else %}なし{% endif %}</p>
    </div>
</div>
{# ここまで追加 #}

上記を/app/Plugin/KansaiUg/Resource/template/shopping_confirm_noshi.twigへ移動

/app/template/default/Shopping/index.twig

{# ここから追加 #}
<div class="ec-orderPayment">
    <div class="ec-rectHeading">
        <h2>熨斗（手数料500円）</h2>
    </div>
    <div class="ec-input">
        {{ form_widget(form.noshi, { 'attr': { 'data-trigger': 'change' }}) }}
        {{ form_errors(form.noshi) }}
    </div>
</div>
{# ここまで追加 #}

上記を/app/Plugin/KansaiUg/Resource/template/shopping_index_noshi.twigへ移動

移動しただけだと、カスタム部分は消えてしまうので、プラグインのテンプレートパーツのタグを埋め込みましょう。

#/app/template/default/Shopping/confirm.twigへ埋め込むタグ

{{ include('@KansaiUg/shopping_confirm_noshi.twig', ignore_missing=true) }}

#/app/template/default/Shopping/index.twigへ埋め込むタグ

{{ include('@KansaiUg/shopping_index_noshi.twig', ignore_missing=true) }}

移動完了

これでファイルの移動が完了したと思います。
プラグインはすでに有効化されていますので、Entityを反映させる為のコマンドを打ちましょう。

以上で移動作業は完了です。
お疲れ様でした！！

パッケージング

無視できない電話が掛かって来て、一切内容を聞くことができませんでした。
github パッケージ作成で検索したら幸せになれるかも？

この部分はまだよくわからんです。

最後に

3部作が完結しました。

カスタマイズ方法、プラグイン化の方法、理解できたでしょうか？
とはいえ、まだまだ入りの部分。

クライアントの要望には、まだまだ精進しなければならないので、頑張りましょう！！

最後までお付き合いいただき、有り難う御座いました。

間違っている部分があれば編集リクエストいただけえると助かります。
宜しくお願いします。

第69回EC-CUBE関西UGに参加したまとめ｜【開発者向け】カスタマイズをプラグイン化してみよう！