Welcart会員登録フォームに住所自動入力機能を追加する方法

Welcartの会員登録フォームに郵便番号から住所を自動入力してくれるライブラリ「AjaxZip3」を用いて住所自動入力機能を追加する方法を書いていきます。

郵便番号から住所入力用ボタン追加

以下のコードを会員登録フォーム用のテンプレートに追加します。（※郵便番号入力フォーム横に追加するためには別途カスタマイズが必要です）

<input id="search_zipcode" type="button" value="郵便番号から住所入力" onclick="AjaxZip3.zip2addr('member[zipcode]', '', 'member[pref]', 'member[address1]');">

AjaxZip3のJSファイル読み込み

footer.php等に以下のようにAjaxZip3のJSファイルを読み込むためのコードを追加します。

<script type='text/javascript' src='https://ajaxzip3.github.io/ajaxzip3.js?'></script>

ついでに「郵便番号から住所入力」ボタンがクリックされたときにフォーマットをチェックするスクリプトも追加します。

<script type="text/javascript">
(function($) {

$("#search_zipcode").click(function () {
    var str = $("#zipcode").val();
    if( !str.match(/^\d{7}$|^\d{3}-\d{4}$/) ){
        alert("郵便番号を正しくご入力ください。");
        $("#zipcode").focus();
    }
});

})(jQuery);
</script> 

動作確認

上記のコード追加後に郵便番号入力フォームに正しい郵便番号を入力すると都道府県と市区町村のフォームに自動入力されます。

郵便番号が分からない方のために日本郵便の「郵便番号検索」ページへのリンクを貼るなどの対応もするといいと思います。

動作確認環境

エックスサーバー（x10）
PHP 7.2.27
MySQL 5.7
WordPress 5.3.2
Welcart e-Commerce 1.9.28