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

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

67回は前回（第64回）に続く内容になっています。
今回もおかじ（@okazy）さんが約2時間ぶっ通しで、説明しながらライブコーディングを行ってくれました。

また僕なりに資料を残してみます。

#資料サイト
EC-CUBE 4.0 開発者向けドキュメント::購入フローのカスタマイズ
https://doc4.ec-cube.net/customize_service#%E8%B3%BC%E5%85%A5%E3%83%95%E3%83%AD%E3%83%BC%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA-2424

本日のソース
github:okazy

• 互換性を保つためにisNoshiのnullを許可
• 熨斗ありの場合に500円の手数料を追加する

上記２点が今回の差分になります。

#環境
前回の続きになります。

前回のカスタマイズが終わった環境を作りたい場合は、kansai202010のブランチをお使いください。

kansai202101のブランチが今回追加カスタマイズされたソースになります。

#購入フローのカスタマイズ

今回は、熨斗ありで受注した時に「熨斗手数料」の明細を追加するカスタマイズになります。

カートからご注文手続きへ移動し、熨斗の項目を有りに変更すると、ページがリロードされ設定した金額（今回は500円）が手数料にプラスされています。

無しに設定すれば、手数料に500円がプラスされません。

熨斗ありで受注後、管理画面の受注一覧から受注詳細へ移動して、商品情報を確認してください。
熨斗手数料の項目が追加されているのが分かります。

##互換性を保つためにisNoshiのnullを許可

Customize/Entity/OrderTraitの修正

関数isNoshi()のreturnで、NULLを許可する修正を行ってます。

##熨斗ありの場合に500円の手数料を追加する
###NoshiProcessorの追加と説明

今回は熨斗の明細を追加する処理を追加する為に、Eccube/Service/PurchaseFlow/ItemHolderPreprocessorをimplementsしたCustomize/Service/PurchaseFlow/Processor/NoshiProcessorを追加(作成)しています。

実装内容を細かく説明しようと思いましたが、どうやって説明したらいいのか悩んだ挙句、細かい解説は諦めました。
おおざっぱに解説します。

####実行のタイミング

@ShoppingFlow

アノテーションで設定しています。

@ShoppingFlowは購入画面で実行されます。

他にも
@CartFlowはカート画面、カートブロック
@OrderFlowは管理画面の受注詳細画面
で動作するものがあり全３種になります。

カートブロックに打消し線入れてますが、カートブロックでpurchaseFlowを実行しないように修正されてますね。

####Cart では処理をしない

if (!$itemHolder instanceof Order) {
    return;
}

$itemHolderがOrder（Eccube\Entity\Order）でなければ、処理を行わないようにしています。

PurchaseFlowはカート画面でも実行されますのでCart（Eccube\Entity\Cart）の時もあります。
そういう時に実行されないようにする処理・・・だと思います。

####すでに設定した「熨斗手数料」があれば削除

foreach ($itemHolder->getItems() as $item) {
    if ($item->getProcessorName() == NoshiProcessor::class) {
        $itemHolder->removeOrderItem($item);
        $this->entityManager->remove($item);

        break;
    }
}

$itemHolderはOrder（Eccube\Entity\Order）です。
getItems()でOrderItem（Eccube\Entity\OrderItem）を取得してProcessorNameを比較し、NoshiProcessor::classだったらOrderからOrderItem（熨斗手数料の明細）を削除します。

この処理が無い場合は、OrderItem（熨斗手数料の明細）がどんどん増えていきます。
（支払い方法を変更したり、熨斗の有無を変更した場合などに）

####熨斗が有効な場合に熨斗手数料の明細を追加

if ($itemHolder->isNoshi()) {
    $this->addNoshiItem($itemHolder);
}

private function addNoshiItem(ItemHolderInterface $itemHolder): void
{
    $OrderItemType = $this->orderItemTypeRepository->find(OrderItemType::CHARGE);
    $TaxDisplayType = $this->taxDisplayTypeRepository->find(TaxDisplayType::INCLUDED);
    $Taxation = $this->taxTypeRepository->find(TaxType::TAXATION);
    $TaxRule = $this->taxRuleRepository->getByRule();

    $item = new OrderItem();
    $item->setProductName('熨斗手数料')
        ->setQuantity(1)
        ->setPrice(500)
        ->setOrderItemType($OrderItemType)
        ->setOrder($itemHolder)
        ->setTaxDisplayType($TaxDisplayType)
        ->setTaxType($Taxation)
        ->setProcessorName(NoshiProcessor::class)
        ->setTaxRate($TaxRule->getTaxRate())
        ->setTaxAdjust($TaxRule->getTaxAdjust())
        ->setRoundingType($TaxRule->getRoundingType());

    $itemHolder->addItem($item);
}

熨斗の選択が有りだったらOrderにOrderItem（熨斗手数料の明細）を追加する処理です。

OrderItemType TaxDisplayType TaxTypeはEccube/Entity/Masterフォルダ内のファイルを見れば、どんな設定をしているのか分かります。
探してみてください。

$TaxRuleは管理画面の設定→店舗設定→税率設定で設定された有効なEccube/Entity/TaxRuleになります。
詳しくはEccube/Repository/TaxRuleRepository::getByRule()を見てください。

あとはOrderItemをnewして$itemHolder->addItem($item)でOrderにOrderItem（熨斗手数料の明細）を追加しています。

####テンプレートの修正

３か所の修正があり、２か所はテキストの修正です。

残りの１箇所

- {{ form_widget(form.noshi) }}
+ {{ form_widget(form.noshi, { 'attr': { 'data-trigger': 'change' }}) }}

上記の変更は値が変更された時に、画面が更新されるようになります。
生成されたコードを見て、どのようになっているのかは、自身でお確かめください。

実際にはパラメーターを飛ばして、注文手続き画面へリダイレクトされる処理です。
javascriptのコードはこちらです。

##PurchaseFlowの資料

2019/2/7 EC-CUBE東京UG勉強会の資料ですが、PurchaseFlowについてのスライドがあります。

EC-CUBEの中の人でありエバンジェリスト足立 智広（qiita:@chihiro-adachi twitter:@chihiro_adachi）さんの資料ですね。
自分がPurchaseFlowを勉強してる時に、よくみた資料です。

参考になると思います。

#まとめ

すみませんが、今回はキャプシャーなしですOTL

前回の環境が無くなっていたので、準備するのが面倒・・・というのは心の中に隠しておきます。

私見ですが、PurchaseFlowを使った購入フローやカート画面、管理画面の受注詳細のフローに追加するProcessorの作成は、Order・CartのEntity周り、本体でどのようなProcessorがどんな順番で実行されていて、データがどのように変化しているのか、その辺の把握も大事だと思います。

カスタマイズ例を探すのもよいですが、本体のソースを読んでみるのも良いですよ。
使えそうな部分が結構あります。

以上、最後まで読んで頂き有り難う御座いました。