カートページからの離脱を防止するアラート

スポンサーリンク

お客様がお買い物の手続き途中で購入を止めてしまうことを通称「カゴ落ち」と言います。

スーパーでのお買い物を考えてみて下さい。ネットショップでの買い物手続きは、まさにレジに並んでお財布を出そうとしている所です。

スーパーのレジ

しかしながら、まさにお財布を出そうとしたその時に気が変わり、「やっぱり買うのやーめた」とレジから離れてしまう。それが「カゴ落ち」であります。

そこで今回は、レジに並んだお客様が離れようかなと迷ったその時、店員が掛ける一言となるべく、アラートを表示させる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ではうまく動きませんでした(「買い物を続ける」ボタンでもアラートが出てしまう)。

レジに並んだお客様を逃さないようにするのは、売上アップへの重要なポイントです。アラートの表示は、レジを離れそうになったお客様に「やっぱりこのままお買い物を続けようかな」と一瞬でも思って頂ける、一つの効果となりますね。

One Response to “カートページからの離脱を防止するアラート”

  1. […]  『Welcart カスタマイズ ブログ』さんの「カートページからの離脱を防止するアラート」に書かれています。 […]

Copyright© 2024 Welcart カスタマイズ ブログ All Rights Reserved.