LoginSignup
6
7

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-01-28

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円の手数料を追加する

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

環境

前回の続きになります。

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

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

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

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

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

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

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

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

Customize/Entity/OrderTraitの修正

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

熨斗ありの場合に500円の手数料を追加する

NoshiProcessorの追加と説明

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

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

実行のタイミング

@ShoppingFlow

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

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

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

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

Cart では処理をしない

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

$itemHolderOrder(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;
    }
}

$itemHolderOrder(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);
}

熨斗の選択が有りだったらOrderOrderItem(熨斗手数料の明細)を追加する処理です。

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

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

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

テンプレートの修正

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

残りの1箇所

- {{ 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がどんな順番で実行されていて、データがどのように変化しているのか、その辺の把握も大事だと思います。

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

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

6
7
0

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
  3. You can use dark theme
What you can do with signing up
6
7