概要
弊社では、高トラフィックに対応したECCUBEの構築も対応しております。
*高トラフィック/高アクセス →瞬間的なアクセスの増幅(瞬間的同時接続:4000ユーザー)
例)何時何分より一斉に販売開始 ユーザーはその時間に購入する準備をしている。
サーバも分散し、もちろんデータベースも独立させて、ロードバランサーなるものを入れて対応してます。
今回のこの記事は、ECCUBEの2.13系で起きたバグ?なんですが、スマフォサイトを持ち、かつ、決済モジュールを利用してない支払い方法の際は、要注意な記事になります。
*高トラフィックではない、利用者も一度調査が必要です。
商品をカゴに入れ、決済方法を選び、確認画面から、注文完了ボタンを押す際の、javascriptの記述に、デフォルトのテンプレートで記述ミスがありました。
要は『連続クリック禁止』のためのjavascriptの記述に問題があります。
ここで、制限を入れてあげないと、受注が重複して立ってしまう誰も得しない、何とも面倒なことが起きてしまいます。
調査方法:スマートフォンサイト
(1)商品をカートに入れる
(2)支払い方法を、決済モジュールを利用してないものを選ぶ(よくあるパターンだと、銀行振込、代引きなど)
(3)確認画面に進む
(4)注文完了ボタンを連続クリックする(筆者はサーバが落ちるまでやってみました。)
(5)データベースに受注データを書き込み中
(6)エラー画面が表示される
(7)同じ受注が何件も立ってしまう(筆者は最大で11件)
*ちなみにPCサイトでは、しっかり、「連続クリック防止」のjavascriptが機能してますので、よほどのことがない限り、重複オーダーは立つことはありません。(0とは言えない。)
解決策:スマートフォン
改修するファイルはtemplateファイルで1箇所。
/data/Smarty/templates/sphone/shopping/confirm.tpl
デフォルトの記述は、以下ののようなソースなのですが
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> var sent = false; function fnCheckSubmit() { if (sent) { alert("只今、処理中です。しばらくお待ち下さい。"); return false; } sent = true; return true; } </script> |
よく見受ける、ソースですね。
しかしこれが、注文完了ボタンのソースを見ると
1 2 3 4 5 6 7 8 9 10 |
<div class="btn_area"> <ul class="btn_btm"> <!--{if $use_module}--> <li><a rel="external" href="javascript:void(document.form1.submit());" class="btn">次へ</a></li> <!--{else}--> <li><a rel="external" href="javascript:void(document.form1.submit());" class="btn">ご注文完了ページへ</a></li> <!--{/if}--> <li><a rel="external" href="./payment.php" class="btn_back">戻る</a></li> </ul> </div> |
冒頭に記述されてる、fnCheckSubmit() が、ボタン内でセットされてないではありませんか(笑)
*笑いごとではないです。本当に。
これでは、ユーザーさん側は、注文完了ページが表示されない場合は、何度もクリックしてしまいます。
そこで以下のように改修
冒頭のjavascriptは、そのまま生かすことにします。
注文完了ボタンだけ記述方法を変更
*サイトのデザインに合わせて改変してください。
1 |
<button class="btn btn-default" onclick="return fnCheckSubmit();">ご注文完了ページへ</button> |
これで2回目以降にボタンをクリックしても、重複オーダーが発生することがほぼ無くなります。(0ではない)
まとめ
高機能なオープンソースでも、このようなバグなどは、つきものです。
カスタマイズをした部分だけデバックするのではなく、基本機能もしっかりデバックすることが、重要だということですね。
ぜひ、一度この件に関して、ご興味、調査が必要なお客様は、お気軽にお問い合わせください。