Welcart カスタマイズ ブログ

スマホからのお買い物をもっと楽に！HTML5に対応した入力フォーム

• ツイート
• B! ブックマーク
• Google+
•  Pocket
• Facebook

HTML5に対応したに入力フォームを作れば、スマホでの入力がぐっと楽になります。

特に、郵便番号や電話番号などの入力時には、指定の属性をあらかじめ付与しておくと自動でテンキーが表示されるようになるので、スマホユーザーの顧客が感じる注文の煩わしさを軽減することが出来ます。

WelcartはまだXHTMLの入力フォームですので、今回はjQueryで属性値を変更させる方法で対応。いずれはWelcart側でもHTML5に移行していくかと思いますので、その場合には単にコードを削除するだけで済むように、簡易的なカスタマイズにしました。

もくじ

1. HTML5の入力フォームについて
2. e-mail部分はファイルを直接書き換え
3. jQueryのファイルを作る
4. functions.phpでjQueryのファイルを読み込む
5. まとめ

1. HTML5の入力フォームについて

HTML5の入力フォームは、入力する内容を<input>や<select>の属性値として指定することで、入力内容と異なる情報を入れた時にエラーを出したり、必須項目であることを明示することが出来ます。

例：e-mailの入力の場合

e-mailアドレス以外（実際は＠が入っていない文字列）を入力して「送信」すると、HTML5に対応しているブラウザならば以下の画像のようなエラーを自動で出してくれます。

FireFoxの場合

また、属性値によっては、スマホ入力の際に適切なキー表示をしてくれるようになります。

tel/number入力の場合

email入力の場合。「@」が最初から表示される

HTML5の入力フォームで指定できる属性値

今回はメールアドレス・数値入力部分等の属性のみのカスタマイズですが、HTML5では日付やカラーピッカー等の属性値がカバーされています。

<input>－HTML5タグリファレンス – HTMLクイックリファレンス

その他、プレースホルダー機能などもありますから、必要に応じて導入してもいいですね。

こちらの本にも詳しい説明がありますので、興味があればどうぞ。安定のエビスコム本。

HTML5 スタンダード・デザインガイド

2. Welcartの入力項目

Welcartお客様情報入力フォームは、プラグインが出力している部分がかなりあり、直接<input>項目をカスタマイズ出来るのはメールアドレスとパスワードの入力部分だけとなります。

「プラグインが吐き出すため編集不可能」と書いてはいますが、フィルターフックを使えば一応出来ます。

パスワードは属性値が最初から「password」になっていますので、HTML5用に変更する必要はありません。

もし、既にメンバーページやお客様情報ページなどを使用中テーマに退避済みの場合には、直接メールアドレスの入力フィールドのtype属性をemailに書き換えてもOKです（その場合は、3で説明するメールアドレスのtype属性を書き換えるjQueryは不要となります）。

お客様が入力する項目があるページは以下の通りです。

• wc_customer_page.php（お客様情報ページ）
• wc_delivery_page.php（発送・支払い方法ページ）
• wc_login_page.php（ログインページ）
• wc_member_page.php（メンバーページ）
• wc_new_member_page.php（新規メンバー登録ページ）
• wc_lostpassword_page.php（パスワードを忘れた場合のページ）

※会員パスワード変更ページのwc_changepassword_page.phpは、わざわざHTML5にする部分がないため省いています。

それぞれのページの見え方をチェックして、どの入力フィールドにどんなidやclassがついているかチェックしておきましょう。

3. jQueryのファイルを作る

今回はカスタマイズを簡略化するために、全てjQueryで書き換えを行います。いずれWelcartもHTML5に対応される可能性もあるので、その際はこのファイルとファイルの読み込み命令を削除すればいいだけです。

メールアドレス部分

$('#loginmail,input[name="loginmail"],input[name*="mailaddress"]').attr('type', 'email');

ログインページ・メンバーページ・お客様情報ページでのメールアドレス入力部分を、HTML5に対応させます。

wc_customer_page.php（お客様情報ページ）での「会員の方はこちら」でのメールアドレス・パスワードの入力フィールドのid要素と、「会員でない方は～」のメールアドレス入力フィールドのid要素の計３つが、デフォルトでは全てmailaddress1になってしまっています。そのためセレクタの指定がやや面倒臭いことになっています。

数字部分

$('.quantity,#zipcode,#tel,#fax,.used_point').attr('type', 'tel');

上記で書き換えを行っているのは、左から順に以下の５つです。

• 数量変更の数字入力
• 郵便番号
• 電話番号
• FAX番号
• ポイント使用の入力

ここでは全てtelとしました。numberという属性もありますが、半角入力を強制します。

Welcartのデフォルトでは郵便番号以外は半角入力強制となっているので、好みでnumberに変えても良いでしょう。

ふたつをまとめると・・・

まとめるとこんな感じです。

jQuery(function($){
 $('.quantity,#zipcode,#tel,#fax,.used_point').attr('type', 'tel');
 $('#loginmail,input[name="loginmail"],input[name*="mailaddress"]').attr('type', 'email');
});

テキストエディタなどで書いた上記コードはvalidation.js等の名前をつけ、使用中テーマ内にjsファイルとして保存します。

必須項目の「required」もつける場合

必須項目を示すrequiredという属性をinput内に入れておくと、フィールドが空の場合にはエラーが出ます。

Google Chromeの場合

jQueryでrequired属性をつける場合には、propという命令を使います。

$('input[name*="mailaddress"],#name1,#name2,#zipcode,#customer_pref,#member_pref,#address1,#address2,#tel,#password1,#password2').prop('required', true);

ただ、これだけでは「戻る」ボタンを押した時にも「必須です」が作動してしまい戻れなくなります。そこで、戻る関連ボタンでは無効にする命令も付け加える必要があります（未検証）。

今回の目的は「スマホでの入力を楽にする」だけですので、カスタマイズからは省きました。

4. functions.phpでjQueryのファイルを読み込む

WordPressでjQueryを動かすには、jQueryの本体が読み込まれている必要があります。jQueryはWordPressに付属していますので、以下のコードをfunctions.phpに書き込めばOK。wp_head()読み込み時に一緒に読み込まれます。

function my_scripts(){
   wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts');

更に、先ほど作成したvalidation.jsを読み込むには、以下のように書き足します。

function my_scripts(){
   wp_enqueue_script( 'jquery' );
   if( is_page( array( 'usces-cart','usces-member' )) ){
      wp_enqueue_script( 'validation', get_template_directory_uri() . '/validation.js', array(), '',　true);
   }
}
add_action( 'wp_enqueue_scripts', 'my_scripts');

3行目に入れたif文は、カートページまたは会員ページの場合にのみ、validation.jsを読み込むようにする命令です。

これで完了です。

5. まとめ

飽くまでもHTML5に対応したブラウザでしか作動しない点には注意ですが、XHTML以前のブラウザでもこのコーディングでエラーが出るわけではないため、安心して導入出来ます。

欠点もなくはありません。HTML5対応ブラウザによる項目チェックは「メールアドレスには@さえ入っていればいい」等になっており、やや不完全です。完全なチェック機能を求める場合には、jQuery-Validation-Engine等のプラグインを使ったほうがいいです。

ただ、今回のカスタマイズはスマホからのお買い物では格段に入力が楽になりますので、HTML5でECサイトを作っている場合はカゴ落ち対策の一つとして取り入れても損はないでしょう。

いずれは標準でWelcartが対応してくれることに期待です。

• カートページ
• カゴ落ち対策, jQuery

• ツイート
• B! ブックマーク
• Google+
•  Pocket
• Facebook