訪問者の予約手続き時に進捗度を予約カレンダーに表示する方法を紹介します。
このページはナビゲーションを表示するためのJavaScriptとCSSをサンプルコードを記載していますが、デザイン性などは考慮していませんのでご了承ください。また、JavaScript及びCSSのサポートは行っていませんので自己責任でご利用ください。また、下記のサンプルコードはBooking Package > 一般設定内のJavaScriptタブとCSSタブ以外では動作しませんのでご注意ください。
JavaScriptのサンプルコード
/*globals bookingPackageUserFunction */
window.addEventListener('load', function(){
var navigationsPanel = document.createElement('div');
navigationsPanel.id = 'booking_navigations_panel';
var navigations = {calendar: '日付の選択', services: 'サービスの選択', schedules: '時間の選択', form: '個人情報の入力', confirm: '入力内容の確認', complete: '予約完了'};
for (var key in navigations) {
var navigation = document.createElement('span');
navigation.id = 'navigation_' + key;
navigation.classList.add('navigation');
navigation.textContent = navigations[key];
navigationsPanel.appendChild(navigation);
}
var rootPanel = document.getElementById('booking-package-locale-ja');
rootPanel.insertAdjacentElement('beforebegin', navigationsPanel);
});
window.addEventListener('bookingPackageUserFunction', function() {
bookingPackageUserFunction.notification(function(eventName, yourCalendarID, uniqueID) {
console.log(eventName);
changeBookingNavigation(eventName);
});
});
function changeBookingNavigation(eventName) {
if (eventName == 'displayed_calendar' || eventName == 'displayed_services' || eventName == 'displayed_schedules' || eventName == 'displayed_booking_form' || eventName == 'displayed_booking_confirmation' || eventName == 'displayed_booking_complete') {
var navigationsPanel = document.getElementById('booking_navigations_panel');
if (navigationsPanel != null) {
var navigations = navigationsPanel.getElementsByClassName('navigation');
for (var i = 0; i < navigations.length; i++) {
navigations[i].classList.remove('focus');
}
if (eventName == 'displayed_calendar') {
document.getElementById('navigation_calendar').classList.add('focus');
} else if (eventName == 'displayed_services') {
document.getElementById('navigation_services').classList.add('focus');
} else if (eventName == 'displayed_schedules') {
document.getElementById('navigation_schedules').classList.add('focus');
} else if (eventName == 'displayed_booking_form') {
document.getElementById('navigation_form').classList.add('focus');
} else if (eventName == 'displayed_booking_confirmation') {
document.getElementById('navigation_confirm').classList.add('focus');
} else if (eventName == 'displayed_booking_complete') {
document.getElementById('navigation_complete').classList.add('focus');
}
}
}
};CSSのサンプルコード
#booking_navigations_panel .focus {
color: #FFF;
background: #e91e63;
border-radius: 3px;
border: none;
font-size: 16px;
font-weight: normal;
}
#booking_navigations_panel .navigation {
padding: 0.5em;
}