お客様情報のフリガナ入力を必須にする方法

スポンサーリンク

購入手続きやメンバーページでの、お客様情報のフリガナ入力を必須にする必要があったので、自分用備忘録です。

もくじ

  1. 必須のアスタリスクマークを付ける
  2. 入力チェックをする
  3. まとめ

1. 必須のアスタリスクマークをつける

まずは、必須項目であることを示す、アスタリスクマークをつけます。

Welcartフリガナ必須1

利用するフィルター

  • usces_filter_furigana_form

template_func.phpの、「フリガナ」入力周りのHTMLタグの出力部分に設置されています。

「フリガナ」のテーブルタグのth部分にアスタリスクマークを挿入すればいいので、以下のようになります。

add_filter('usces_filter_furigana_form', 'my_furigana_customer', 10, 3);
function my_furigana_customer($furigana, $type, $values ){
	$furigana =  '<tr class="inp1"><th scope="row"><em>' . __('*', 'usces') . '</em>' . usces_get_essential_mark('name3', $data).'フリガナ</th>';
	$furigana .= '<td>'.__('Familly name', 'usces').'<input name="' . $type . '[name3]" id="name3" type="text" value="' . esc_attr($values['name3']) . '" onKeyDown="if (event.keyCode == 13) {return false;}" style="ime-mode: active" /></td>';
	$furigana .= '<td>'.__('Given name', 'usces').'<input name="' . $type . '[name4]" id="name4" type="text" value="' . esc_attr($values['name4']) . '" onKeyDown="if (event.keyCode == 13) {return false;}" style="ime-mode: active" /></td>';
	$furigana .= '</tr>';
	return $furigana;
}

表示としてはこれで完了です。

Welcartフリガナ必須2

しかし、これだけではアスタリスクマークがついただけで入力チェックがされないため、次に別のフックを使い入力チェックをします。

2.入力チェックをする

利用するフィルター

  • usces_filter_member_check_fromcart(お客様情報がメンバーの情報の場合?)
  • usces_filter_customer_check(お客様情報)
  • usces_filter_delivery_check(配送先情報)
  • usces_filter_member_check(メンバー登録)

上の二つは、お客様情報の入力画面に表示されるデータの入力チェックを行うもの(と思われるの)で、扱うデータは同じです。

従って、上の二つのフィルターは一つのフックでまとめて出力コントロールすることして大丈夫だと思います。

お客様情報ページの出力チェック

add_filter('usces_filter_member_check_fromcart', 'my_filter_customer_check', 10);
add_filter('usces_filter_customer_check', 'my_filter_customer_check', 10);
function my_filter_customer_check($mes) {
	if (  WCUtils::is_blank($_POST["customer"]["name3"]) ){
		$mes .= "フリガナを入力して下さい。<br />";
	}
	return $mes;
}

配送情報ページの出力チェック

注文者情報と違う場所に配送する場合のみ、フリガナ入力のチェックを行いたいため、上の場合と違い、【「別の発送先を指定する」を選択された場合】という条件を付けます。

add_filter('usces_filter_delivery_check', 'my_filter_member_check2', 10);
function my_filter_member_check2($mes) {
	if ( isset($_POST['delivery']['delivery_flag']) && $_POST['delivery']['delivery_flag'] == 1 ) {
		if (  WCUtils::is_blank($_POST["delivery"]["name3"]) ){
			$mes .= "フリガナを入力して下さい。<br />";
		}
		return $mes;
	}
}

メンバーページの出力チェック

もちろんですが、会員システムを利用しない場合は不要です。

add_filter('usces_filter_member_check', 'my_filter_member_check', 10);
function my_filter_member_check($mes) {
	if (  WCUtils::is_blank($_POST["member"]["name3"]) ){
		$mes .= "フリガナを入力して下さい。<br />";
	}
	return $mes;
}

これで、各入力ページでの入力チェックで、フリガナが入力されていない場合は「フリガナを入力して下さい」というエラー表示が出るようになります。

Welcartフリガナ必須エラーチェック

3. まとめ

入力チェックは「ブランクの場合」にエラー表示が出るようにしています。もし「カタカナのみ」等の入力内容のチェックを加える場合には、こちらのサイトの記事などで紹介されているpreg_matchによる正規表現チェックを追加すればいいと思います。

アスタリスク表示と入力チェックでそれぞれフックを使わなければいけないのと、入力画面がメンバー・お客様情報・配送情報と複数あるため、コードそのものはシンプルですがやや面倒なカスタマイズであると言えるかもしれません。

ちなみに今回はフリガナだけでしたが、エラーチェックなどは他の項目の入力チェックへのアレンジが出来そうです。

3 Responses to “お客様情報のフリガナ入力を必須にする方法”

  1. yamasakidaisuke より:

    いつも参考にさせて頂いております。
    記事を参考に、FAXを必須項目にさせていただきます。
    ありがとうございます!

  2. […]  まずは、前回の記事で紹介した素晴らしい『Welcartカスタマイズブログ』さんの記事の中に「お客様情報のフリガナ入力を必須にする方法」というのがあり、アスタリスクをどうやってつけるのかを知りました。  そして、おそらくusces_get_essential_markが、必須マークのフィルターフックだということも想像できました。ただフィルターフックとphpの書き方が理解できていない私が、見よう見まねで新しくfunction.phpにessential_mark(必須マーク)を画像にするコードを書いてもエラーでサイトが表示されなくなったりしました>< […]

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