このページではJavaScriptで追加のコードを記載して郵便番号から住所を検索した結果を「都道府県」「市区町村」「住所」の各テキストボックスに挿入する方法を紹介します。この機能を追加することで訪問者用の予約カレンダーの予約手続き時に郵便番号をもとに住所入力の一部を省力することができます。今回、住所を検索するためのAPIはPostcodeJP APIを使用しまのでアカウントを予め登録してAPIキーを取得してください。
- JavaScriptによる機能の拡張はBooking Package バージョン 1.4.56以降で利用することができます。
- この機能はMicrosoftのInternet Explorer (IE)に対応していません。
入力フォームに追加する住所関連の項目
| ユニークID | 名前 |
| postcode | 郵便番号 |
| pref | 都道府県 |
| city | 市区町村 |
| address | 住所 |
Booking Package > カレンダー設定 > 対象のカレンダーの入力フォームに上記の項目を追加してください。次にBooking Package > 一般設定内のJavaScriptタブに下記のサンプルコードを追加してください。
住所検索するためのサンプルコード
/*globals bookingPackageUserFunction */
window.addEventListener('bookingPackageUserFunction', function() {
bookingPackageUserFunction.notification(function(eventName, yourCalendarID, uniqueID) {
if (eventName == 'displayed_booking_form' && yourCalendarID == 1) {
addSearchButton();
}
});
});
function addSearchButton() {
var searchButton = document.getElementById('searchButton');
if (searchButton == null) {
searchButton = document.createElement('button');
searchButton.id = 'searchButton';
searchButton.textContent = 'Search';
var postCode = document.getElementById('booking_package_input_postcode')
postCode.insertAdjacentElement('afterend', searchButton);
searchButton.addEventListener('click', function(event) {
var apiKey = 'XXXXXXXXXX';
var code = postCode.value;
code = code.replace('-', '');
fetch(
'https://apis.postcode-jp.com/api/v3/postcodes?apikey=' + apiKey + '&postcode=' + code,
{method: 'GET'}
).then(
response => response.text()
).then(
text => {
var json = JSON.parse(text);
console.log(json);
if (json.data.length > 0) {
document.getElementById('booking_package_input_pref').value = json.data[0].pref;
document.getElementById('booking_package_input_city').value = json.data[0].city;
document.getElementById('booking_package_input_address').value = json.data[0].town;
}
}
);
});
}
};
上記のサンプルコード内では比較演算子でyourCalendarID変数の値と”1″が等しい場合となっていますが、比較対象の”1″をあなたが対象とするカレンダーのIDに置き換える必要があります。カレンダーIDの確認はBooking Package > カレンダー設定内のショートコード内のidの値で知ることができます。
if (eventName == 'displayed_booking_form' && yourCalendarID == 1) {
PostcodeJPで取得したAPIキーは下記のapikeyの”XXXXXXXXXX”と置き換えます。
var apiKey = 'XXXXXXXXXX';
個人情報の入力フォーム内の各入力フィールドの要素のidには接頭辞の”booking_package_input_“が追加されています。例えば「郵便番号」のユニークID”postcode”の要素の idは”booking_package_input_postcode”、「市区町村」のユニークID”city”の要素の idは”booking_package_input_city”となります。
document.getElementById('booking_package_input_pref').value = json.data[0].pref;
document.getElementById('booking_package_input_city').value = json.data[0].city;
document.getElementById('booking_package_input_address').value = json.data[0].town;
上記のサンプルコードは複数町域にまたがる郵便番号に対応していませんのでご注意ください。