カートページからの離脱を防止するアラート
スポンサーリンク
お客様がお買い物の手続き途中で購入を止めてしまうことを通称「カゴ落ち」と言います。
スーパーでのお買い物を考えてみて下さい。ネットショップでの買い物手続きは、まさにレジに並んでお財布を出そうとしている所です。
しかしながら、まさにお財布を出そうとしたその時に気が変わり、「やっぱり買うのやーめた」とレジから離れてしまう。それが「カゴ落ち」であります。
そこで今回は、レジに並んだお客様が離れようかなと迷ったその時、店員が掛ける一言となるべく、アラートを表示させるjQuery。時々、様々なサイトで出てくるアレです。
参考にしたのはこちらのサイト。
ページを移動（離脱）するときにjQueryで警告を出す方法（小粋空間）
カスタマイズ方法
上記サイトの記載を参考に、Welcart用にカスタマイズ。以下の2点を追加しました。
- お客様情報～確認ページの間にだけ表示させる条件分岐
- 「戻る」「次へ」等のボタンではアラートを出さないコード
※私が運営中のECサイトではクレジット決済にPaypalを導入しているので、以下のコードでもPaypalボタンを押した時にアラートが出ないようにしています（9行目のinput[type=image]の部分）。他のクレジット決済でボタンの仕様が異なる場合は、ここを変更して下さい。
下記のコードをhead要素内のwp_head()より後に記載します。
<?php
$alert_pages = array("customer", "delivery", "confirm");
if( in_array(usces_get_page_mode(), $alert_pages)): ?>
<script>
jQuery(document).ready(function(){
jQuery(window).on("beforeunload", function(){
return "ご注文は完了していません。";
});
jQuery("input[type=submit], input[type=button], input[type=image]").click(function() {
jQuery(window).off('beforeunload');
});
});
</script>
<?php endif; ?>
jQueryを動かす為には、使用中のテーマでjQueryを読み込む設定をしている必要があります。それにはwp_head()より前にwp_enqueue_script('jquery');を記載するか、functions.phpに以下のようなアクションフックを記載します。
add_action('wp_enqueue_scripts', 'myScript');
function myScript() {
wp_enqueue_script('jquery');
}
これで、「次へ」「戻る」ボタン以外で別のページに移ろうとした際や、ウィンドウ自体を消そうとする時にアラートが現れます。
「カートの中」ページでもアラートを表示させたい場合
注文途中だけでなく、一番初めの「カートの中」のページでも「ご注文は完了していません」のアラートを表示させたい場合は、コードの始めのarrayの中に、「”cart”」を含めればいいです。
$alert_pages = array("cart", "customer", "delivery", "confirm");
ただ、私の環境ではChromeでは良かったのですが、何故かIEではうまく動きませんでした（「買い物を続ける」ボタンでもアラートが出てしまう）。
レジに並んだお客様を逃さないようにするのは、売上アップへの重要なポイントです。アラートの表示は、レジを離れそうになったお客様に「やっぱりこのままお買い物を続けようかな」と一瞬でも思って頂ける、一つの効果となりますね。
[…] 『Welcart カスタマイズ ブログ』さんの「カートページからの離脱を防止するアラート」に書かれています。 […]