前回の「カート入力時にフリガナ、FAXを入力しなくて良い方が成約が上がる！」の記事に続いて、カートページをカスタマイズした施工方法について書いてみたいと思います。
目次
カートの離脱防止に効果的？
前回も書きましたが、ショップ運営をしていると、EFO（エントリーフォーム最適化）について考えることがあります。EFO（とは、いわゆるカゴ落ち対策で、私もプレゼントワインショップを開設して落ち着いてきたころ、もっと買いやすいカートのフォームのほうがいいなと思ったことがありました。
その中で、考えたことの1つ。私も別のサイトで買い物をしていて、カート入力中についリンクのあるボタンに触れてしまったりして、異動してしまい、入力中のものが全て消えてしまうことがありますが、あれ、かなりやる気がそがれますよね。「もう買うのいいやぁ・・・」ってちゃっちゃいます。
そこで、よく見かける離脱防止のアラートがなると、成約率が上がるのではないかと思っていたのです。ただ、コレ、本当に離脱したいときにはウザいので、そこらへんは紙一重なのですが、スマホで購入する人が増えているので、画面のどこかに触れてしまって、入力中のものがパーになるのは本当に困ります。
フェイスブックで見かけるアレというと分かりやすいのではないでしょうか
離脱防止アラートについて調べると・・・
さて、この離脱防止アラートについても、めちゃ詳しく設置方法を書いてくれているのは、やっぱり
『Welcart カスタマイズ ブログ』さん！！
http://welcustom.net/
『Welcart カスタマイズ ブログ』さんの「カートページからの離脱を防止するアラート」に書かれています。
いざ設置
『Welcart カスタマイズ ブログ』さんの「カートページからの離脱を防止するアラート」を見て、コピーでＯＫなのかな？と思っていると、やっぱりエラーが出た覚えがあります（もう覚えていないのですが）。順番に見ていってみましょう。
下記のコードをhead要素内のwp_head()より後に記載します。
「カートページからの離脱を防止するアラート」『Welcart カスタマイズ ブログ』
この意味は分かる方が多いと思いますが、より詳しく書くと、Welcartの子テーマ内の「テーマヘッダー（header.php）」ファイル中の
<?php wp_head(); ?>
の1行よりも後に、次のコードを記載するということです。そして記載するように書かれているコードが
<?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; ?>
です。
なので、上記をコピーして、皆さんのWelcartの子テーマ中の「header.php」の所定の箇所にペーストして下さい。続いて、書かれているのが
jQueryを動かす為には、使用中のテーマでjQueryを読み込む設定をしている必要があります。それにはwp_head()より前にwp_enqueue_script(‘jquery’);を記載するか、functions.phpに以下のようなアクションフックを記載します。
でそのコードは
add_action('wp_enqueue_scripts', 'myScript');
function myScript() {
wp_enqueue_script('jquery');
}
なのですが、これは皆さんの子テーマ内のfunction.phpにコピペする前に、一度バックアップをとっておいてみてください。私は、エラーでフリーズしたような気がするのですよねぇ。
実際のコードを公開しておきます
エラーが出て修正したと思われるコードを書いておきますね。現在の「生まれ年ワインショップ」の子テーマのfunction.phpに書いてあるコードは、この離脱防止アラートと他のものを組み合わせているのですが、おそらくこの離脱防止アラートだけの時は次のようなコードでした。
/*離脱防止用*/
function my_scripts(){
wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts');
/*離脱防止用（終了）*/
以上です。 今、見直してみても、myScript⇒my_scriptsの部分を修正したのだと思います（違ったらすみません＾＾；）。皆さんもコピーしてやってみてください＾＾
ちなみに、離脱防止アラートは下の画像のようにちゃんと出たのですが、エラーメッセージは上で設定したメッセージとは違うのですよねぇ。
スマホだと、
※2017年、スマホの離脱防止アラートが効果がなくなってしまったかもしれません。WordPressのアップデートが関係しているのでしょうか
お願い
検索でここにたどり着いた方は、自営業者さんでWelcartを導入しようと思っている方だと思います。役に立った方は、ビジネスでの贈り物に当店「生まれ年ワインショップ」もしくは、日本初のプレゼント専門ワインショップ「プレゼントワインショップ」をご利用いただけると嬉しいですm(__)m
コメント