WordPressでECサイト（通販サイト）を運営できる拡張機能に Welcart というものがあります。

基本無料で使用できる大変ありがたいプラグインです。

それで弊社でもそのプラグインを使用して構築しているのですが、購入処理を進めていくときにブラウザの【戻る】ボタンを押してしまうと、画面が一旦消えてしまうことがあります。

スマホでは普通に表示されるんですけれど、パソコンだと出てしまうようです。
それを何とかしようということになり色々実験しました。

実験中ふと思い出したのですが、昔はブラウザを閉じると勝手に別ウィンドウでホームページが開かれたりするという迷惑なサイトがありました。
これは「このホームページは閉じたい」という閲覧者の思惑と、
「断じて閉じさせぬ！」という運営者の思惑の攻防だったりしたのですが、
さすがにこれは問題があるよね、ということで最近のブラウザではホームページを閉じるイベントのときには処理できる内容がかなり限定されているようです。

ということで、最近はかなりせいぜい簡単なメッセージを出すことぐらいしかできなくなっていました。
こんな感じの画面ですね。

これをするためには JavaScriptで下記のようなスクリプトを走らせます。

$(window).on('beforeunload', function() {
    return 'Your own message goes here...';
});

　参考：how to stop browser back button using javascript – Stack Overflow

‘Your own message goes here…’ という箇所は表示させたいメッセージを入れますが、ブラウザによってはメッセージの変更に対応していませんのでおまじない程度に記述しておきましょう。

さて上記のままのプログラムですと、ブラウザの戻るボタンだけではなく画面上にある戻るボタンすら警告画面が出てしまいます。
ですので若干アレンジが必要です。

(function(){
  var isWarning = true;
  window.addEventListener("submit", warningOff);
  window.addEventListener("beforeunload", onUnload);
  
  function warningOff(){
    isWarning = false;
  }
  function onUnload(e) {
    if( isWarning ){
      var confirmationMessage = "ブラウザの【 戻る 】ボタンを使わないでください。";
      e.returnValue = confirmationMessage;
      return confirmationMessage;
    }
  }
  
  $(function(){
    $("a, #previouscart").on('click', function(){
      warningOff();
    });
  });
})();

これを外部.jsファイルにして、該当するテンプレートファイルに挿入します。
今回の場合、下記3つのテンプレートファイル上で挿入する必要がありました。

　wc_cart_page.php　・・・　カート画面
　wc_confirm_page.php　・・・　注文確認画面
　wc_delivery_page.php　・・・　配送情報入力画面

これで戻るボタンを不用意に使われることがなくなりますね。

ちなみにこちらはパンの通販サイト、キッチンおかだ様のウェブサイトにて使用しています。