[EC-CUBE] 4.3.1-p1
[レンタルサーバ] さくらインターネット（VPS）
[OS] Ubuntu 22.04
[PHP] 8.2
[データベース] PostgreSQL 14
[WEBサーバ] Apache 2.4
[ブラウザ] 各種（現象はサーバーサイドのバリデーション仕様に起因するためブラウザ非依存）
[導入プラグインの有無] なし
[カスタマイズの有無] EC-CUBE2からの移行に伴うテーマ移植
[現象]

EC-CUBE2からEC-CUBE4へテーマを移植する際にハマった点を共有します。
同様の移植作業をされる方の参考になれば幸いです。

■ 起きたこと

購入手続き画面(Shopping/index.twig)で、お支払い方法を選択する前に
「お届け先を変更する」ボタンを押すと、画面が変化せず、
利用者からは「ボタンが反応しない」ように見える状態になっていました。
お客様からの問い合わせで発覚しました。

■ 調べて分かったこと

Shopping/index.twigは全項目が単一フォームで構成されており、
ShoppingController::redirectTo()はフォーム全体のバリデーションが
通らないとリダイレクトを実行しない仕様になっています
(公式APIドキュメントにも「フォームの値をDBに保存してから
リダイレクトさせる」と明記されています)。そのため、
お支払い方法が未選択の状態だとバリデーションエラーとなり、
画面が遷移せず差し戻されます。ここまではEC-CUBE4の
正規の仕様です。

同様の現象は下記の質問スレッドでも報告されていました。
https://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=29151&forum=11

■ 見落としていた点（本題）

標準テーマにはバリデーションエラーの表示機構
(Shopping/alert.twig、および各項目下のform_errors)が
実装されているため、通常はエラー内容が赤字で表示され、
利用者は「支払い方法を選ぶ必要がある」と気づけるようになっています。

弊社ではEC-CUBE2から移植したテーマにこのalert.twigの実装が
漏れており、エラーメッセージが一切表示されない状態でした。
その結果、バリデーションエラーで差し戻されているだけなのに
「ボタンが反応しない不具合」に見えてしまっていました。

■ 対応した内容

1. Shopping/alert.twigをテーマに実装(標準テーマを参照)
2. .ec-errorMessageのCSSが適用されているか確認
(地の文と同色で埋もれて見えないケースがありました)
3. 配送方法・支払方法のフォーム項目にdata-trigger="change"を
付与し、配送方法変更時に対応する支払方法が再計算されるようにした
4. UX改善として、購入手続き画面のセクション順を
「お支払い方法→お届け先」の順に変更

EC-CUBE2からの移植では、標準テーマにだけ実装されている
表示系のパーツ(特にエラー表示まわり)が漏れやすいと感じました。
同じような移植作業をされる方の参考になれば幸いです。