1. /
  2. /
  3. /
  4. カート内入力チェックで離脱を防ぐ

カート内入力チェックで離脱を防ぐ

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
入力チェック（パソコン）

　「注文画面のアスタリスクを任意マークへ変えて成約率を上げたい！」、「カート入力時にフリガナ、FAXを入力しなくて良い方が成約が上がる！」や「カート離脱防止アラートを表示させる」で、カートの入力フォーム中での離脱を防ぐWelcartのカスタマイズについてかいてきました。今回も大事な施工です。

目次

必須項目や全角不可は後から知ると悔しい

　今回も、EFO（エントリーフォーム最適化）について考えていたことの1つです。
　自分で買い物をするときに住所の番地を半角数字で入力して「次に」をクリックすると、『住所は全角でご入力ください」などとエラーが出たりして、面倒な思い、悔しい思いをしたことがある方もいらっしゃると思います。
　逆に便利なのは、フォームに記入している最中にそのサイトの記入ルールと違うことを教えてくれるフォームです。

入力チェック（スマホ）

今回も『Welcart カスタマイズブログ』さんを参考に！

　このカートの離脱防止シリーズをはじめ、生まれ年ワインショップのWelcartのカスタマイズは、半分以上このサイトを参考にさせてもらっています。それが

『Welcart カスタマイズ ブログ』さん！！
http://welcustom.net/

　今回も「入力項目をその場でチェック jQuery-Validation-Engine」の投稿を参考にさせてもらいます。まず、「1. jQuery-Validation-Engineをダウンロード、必要なファイルをテーマ内に移す」の部分は、『Welcart カスタマイズ ブログ』さん、そのままでＯＫです。

　https://github.com/posabsolute/jQuery-Validation-Engineから、zipファイルをダウンロードするのですが、『Welcart カスタマイズ ブログ』さんのダウンロード画面のキャプチャとは、2016年8月には違っていました。2017年2月の画面をキャプチャして貼っておきますが、とにかく、Downloadできるボタンを探しましょう。

Validation-Engineのダウンロード画像

　そして、このzipファイルを展開（解凍）して、次の3つのファイルを使います。

  1. jquery.validationEngine.jsファイル （ /js/jquery.validationEngine.js （jQuery-validation-Engine本体））
  2. jquery.validationEngine-ja.jsファイル （/js/languages/jquery.validationEngine-ja.js （日本語ファイル））
  3. validationEngine.jquery.cssファイル （ /css/validationEngine.jquery.css （スタイルシート））

　１，２は子テーマ中のjsフォルダ内に、３は子テーマ中のcssフォルダの中にアップロードします。

『Welcart カスタマイズブログ』さんから、変更しなくてはいけないところ

　前回の記事同様、変更しないとエラーになってしまうところがあります。それは、

2. functions.php内に、jQueryの読み込みの記述をする
　WordPressでは、<head>要素内に直接jQueryの読み込み（<script>～）の記述をする代わりに、functions.phpにjQueryの出力を指定するコードを書き込みます。

のコードです。コードは、次のように書かれています。


add_action( 'wp_enqueue_scripts', 'myScript' );
function myScript() {
    wp_enqueue_script('jquery');
    if(is_page(array('usces-cart','usces-member')){
        wp_enqueue_style( 'validationEngine.jquery.css',
        get_template_directory_uri() . '/css/validationEngine.jquery.css', array(), '1.0', 'all');
        wp_enqueue_script( 'jquery.validationEngine.js',
        get_template_directory_uri() . '/js/jquery.validationEngine.js', array('jquery'), '2.6.2', true);
        wp_enqueue_script( 'jquery.validationEngine-ja.js',
        get_template_directory_uri() . '/js/jquery.validationEngine-ja.js', array('jquery'), '2.0', true);
    }
}

ここは、前回同様、myScript⇒my_scriptsの修正が必要です。ここだけ修正しておけば、動くはずですので皆さん、試してみて下さい。

　ちなみに、前回記事の「カート離脱防止アラートを表示させる」施工をしているなら、ここで一緒に書いてしまえば良いと思います。

フォームチェックをさせる命令

　function.phpに関して以上を行っておけば、あとはカートでフォームチェックをさせる命令を書いておけば良いようです。そのコードを書くのは、

そして、コードは必ずwp_headより後、</head>より前に書くようにします。
「入力項目をその場でチェック jQuery-Validation-Engine」『Welcart カスタマイズ ブログ』

とありますが、前回の記事同様に、より詳しく書いておくと、Welcartの子テーマ内の「テーマヘッダー（header.php）」ファイル中の


    <?php wp_head(); ?>

の1行よりも後に、コードを記載するということです。そして記載するように書かれているコードが


<?php if(is_page( array('usces-cart', 'usces-member' ))): ?>
<script type="text/javascript">
jQuery(function(){
    jQuery("form").validationEngine();
    jQuery(".back_cart_button, .back_to_customer_button").click(function(){
        jQuery("form").validationEngine('hideAll');
        jQuery("form").validationEngine('detach');
        return true;
     });
});
</script>
<?php endif; ?>

です。
　そして、これと別に

jQuery-Validation-Engineを入力フォームで動かすために、Welcartの当該ページの入力項目のclass名を追加します。
～中略～
以下のコードを、3.の「jQuery(“form”).validationEngine();」のコードの上に足します。

と書かれており、


jQuery("input[name*='mailaddress1'],input[name*='mailaddress2'], #name1, #name2, #zipcode, #customer_pref, #address1, #address2, #tel").addClass("validate[required]");
jQuery("#customer_pref option:first-child").val("");

を記載することにより、全ての必須項目に対して、入力チェックが行われることになります。これだけでも十分ですが、さらにメールアドレスかどうかのチェックもするカスタマイズ方法も書いてくれているのがスゴイ！
　つまり、メアド欄にちゃんとアットマークの入ったアドレスが記載されているかどうかもチェックできるということです。私は、これも適用させてコードを書きましたので、それを載せておきますね。コピペでＯＫだと思います。

私の実際のコードを公開

　まずは、たった今上で書いた、Welcartの子テーマ内の「テーマヘッダー（header.php）」ファイル中の<?php wp_head(); ?>の後に次のコードを記載します。


<!--カート入力チェック用-->
<?php if(is_page( array('usces-cart', 'usces-member' ))): ?>
<script type="text/javascript">
jQuery(function(){
    jQuery(" #name1, #name2, #zipcode, #customer_pref, #address1, #address2, #tel").addClass("validate[required]");
    jQuery("input[name*='mailaddress1'],input[name*='mailaddress2']").addClass("validate[required,custom[email]]");
    jQuery("#customer_pref option:first-child").val("");
    jQuery("form").validationEngine();
    jQuery(".back_cart_button, .back_to_customer_button").click(function(){
        jQuery("form").validationEngine('hideAll');
        jQuery("form").validationEngine('detach');
        return true;
     });
});
</script>
<?php endif; ?>
<!--カート入力チェック用（終了）-->

そして、子テーマのfunction.php内に実際に私が記載しているコードは、前回記事の離脱防止と一緒に書いたもので


/*離脱防止用、カート内入力チェック用*/
function my_scripts(){
   wp_enqueue_script( 'jquery' );
   if( is_page( array( 'usces-cart','usces-member' )) ){
      wp_enqueue_script( 'validation', get_stylesheet_directory_uri() . '/js/validation.js', array(), '',　true);
        wp_enqueue_style( 'validationEngine.jquery.css',
        get_stylesheet_directory_uri() . '/css/validationEngine.jquery.css', array(), '1.0', 'all');
        wp_enqueue_script( 'jquery.validationEngine.js',
        get_stylesheet_directory_uri() . '/js/jquery.validationEngine.js', array('jquery'), '2.6.2', true);
        wp_enqueue_script( 'jquery.validationEngine-ja.js',
        get_stylesheet_directory_uri() . '/js/jquery.validationEngine-ja.js', array('jquery'), '2.0', true); 
    }
}
add_action( 'wp_enqueue_scripts', 'my_scripts');
/*離脱防止用、カート内入力チェック用（終了）*/

となります。

　実際に、Welcartを導入している「生まれ年ワインショップ」でカートに進んで、最初の「姓」のカーソルを入力しないまま、「名」へ移すと入力チェックが作動して必須項目ですと教えてくれています。
入力チェック（パソコン）
これは、パソコンでみた画面ですが、一番最初の画像はスマホで見た画像です。
　以上です。皆さんもコピーしてやってみてください＾＾

お願い

検索でここにたどり着いた方は、自営業者さんでWelcartを導入しようと思っている方だと思います。役に立った方は、ビジネスでの贈り物に当店「生まれ年ワインショップ」もしくは、日本初のプレゼント専門ワインショップ「プレゼントワインショップ」をご利用いただけると嬉しいですm(__)m
　

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

生まれ年ワインショップ

生まれ年ワインの魅力は何といっても、生きていた時間を飲むということです。自分と同じ年数を生きている飲食物なんて考えられますか？
大切な方の特別な記念日に、忘れられない生まれ年ワインを贈りませんか？

『生まれ年ワインショップ』へ

SNSでもご購読できます。

コメントを残す

*

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。