Модуль бронирования
Подготовка
Как работает кнопка бронирования
На сайт загружается страница бронирования. На страницу с описанием тура устанавливается кнопка бронирования. В кнопке «зашивается» код тура, так каждое бронирование будет уникальным.
Загрузите страницу бронирования на сайт
Скачайте по ссылке исходники: booking_page.zip. Загрузите страницу бронирования на ваш сайт в корневой каталог. Лучше всего это сделать по FTP.
Вы можете самостоятельно настроить внешний вид страницы бронирования. Для наилучшего отображения формы лучше не добавлять элементов, ограничивающих ширину формы.
Модуль на домене АтомсТревел
Для клиентов, у которых нет собственного сайта, реализована возможность формирования страниц бронирования на домене booking.atomstravel.com.
Для того, чтобы сформировать страницу бронирования тура вам нужно в ссылку вида https://booking.atomstravel.com/?showcase=идентификатор канала продажи&tour=идентификатор тура подставить параметры вашего канала продаж и ID тура.
Идентификатор канала продажи можно взять в разделе «Продажи» — «Каналы продаж». Откройте ваш розничный (b2c) канал продаж кнопкой «Редактировать» и перейдите в раздел «Настройки канала». Скопируйте идентификатор и вставьте в код.
Идентификатор тура можно найти здесь же, в редактировании канала продаж на вкладке «Выбор туров». Нажмите «Развернуть» напротив организации, которая предоставляет тур. Скопируйте идентификатор и вставьте в код.
Пример сгенерированной ссылки:
Создание кнопки бронирования
Создайте уникальный код кнопки для каждого тура. Скопируйте шаблон кода и добавьте в него идентификатор канала продаж и идентификатор тура. Установите код кнопки на страницу тура.
Создайте код кнопки
Для каждого тура нужно создать собственную уникальную кнопку! Генерация кнопок происходит на базе шаблона:
<a style="display: inline-block; cursor: pointer; background-color: #007cf0; color: #fff;border: none; border-radius: 3px; padding: 0 20px; vertical-align: middle; font-size: 1rem; line-height: 42px; text-align: center; text-decoration: none; font-weight: 600; text-transform: none;" href="/booking_page.html?showcase=идентификатор канала продажи&tour=идентификатор тура"> Забронировать тур //Текст кнопки </a>
Где найти идентификаторы:
- Идентификатор канала продажи
В разделе «Продажи» — «Каналы продаж» откройте ваш розничный (b2c) канал продаж кнопкой «Редактировать» и перейдите в раздел «Настройки канала». Скопируйте идентификатор и вставьте в код.
- Идентификатор тура
Откройте ваш розничный (b2c) канал продаж в режиме «Редактировать» и нажмите «Развернуть» напротив организации, которая предоставляет тур. Скопируйте идентификатор и вставьте в код.
Установите кнопку бронирования на сайт
На страницу с описанием тура добавьте код кнопки бронирования. Для автоматизации бронирования других туров точно так же создайте код кнопки по шаблону и установите на страницу с описанием тура.
Виджет бронирования на страницу тура
Вы можете добавить виджет бронирования непосредственно на страницу тура на своём сайте. Для этого используется код со страницы бронирования.
Загрузите страницу бронирования на сайт
Для работы виджета необходимо загрузить страницу бронирования в корень сайта: booking_page.zip.
Создайте код виджета
Дорабатываем код: прямо в скрипте указывает параметры ID канала продаж и ID тура (см. выше). Добавляем полученный код на страницу соответствующего тура:
<div style="max-width: 1200px; margin: 20px auto">
<div id="booking">
<script src="https://atom-s.com/booking.js"></script>
<script type="text/javascript">
getAtomSBookingScript(function () {
function getParameterUrlParam(name) {
name = name.replace(/[\[\]]/g, '\\$&');
let url = window.location.href,
regex = new RegExp('[?&]' + name + '(=([^]*)|&|#|$)'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
var atomBooking = new window.atomSBooking();
atomBooking.initialize('booking', {
"host": 'atom-s.com',
"locale": 'ru',
"apiVersion": "v2",
"apiKey": 'Ключ канала продажи', // Ключ канала продажи
"tourSlug": 'ID тура', // ID тура
}, null, null);
atomBooking.display();
});
</script>
</div>
</div>
Установка модуля бронирования на Тильду
Вам нужно создать страницу бронирования и загрузить туда специальный код. Для каждого тура нужно сформировать кнопки с уникальной ссылкой на бронирование, указав путь к странице бронирования, канал продаж и идентификатор.
Создайте страницу для бронирования
Создайте отдельную страницу для бронирования, например /booking. Добавьте на эту страницу код:
<div style="max-width: 1200px; margin: 20px auto">
<style>div#booking a {color:#03b2cb;} div#booking a.btn{color:#000;}div#booking a.btn-green{color:#fff;}.DayPicker_weekHeader_ul {padding-left:0px!important}</style> <div id="booking"> <script src="https://atom-s.com/booking.js"></script> <script type="text/javascript"> getAtomSBookingScript(function () { function getParameterUrlParam(name) { name = name.replace(/[\[\]]/g, '\\$&'); let url = window.location.href, regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'), results = regex.exec(url); if (!results) return null; if (!results[2]) return ''; return decodeURIComponent(results[2].replace(/\+/g, ' ')); } var atomBooking = new window.atomSBooking(); atomBooking.initialize('booking', { "host": 'atom-s.com', "locale": 'ru', "apiVersion": "v2", "apiKey": getParameterUrlParam('showcase'), "tourSlug": getParameterUrlParam('tour'), }, null, null); atomBooking.display(); }); </script> </div> </div>
Создайте код кнопки
Создайте код кнопки из шаблона, приведённого ниже:
<a style="display: inline-block; cursor: pointer; background-color: #007cf0; color: #fff;border: none; border-radius: 3px; padding: 0 20px; vertical-align: middle; font-size: 1rem; line-height: 42px; text-align: center; text-decoration: none; font-weight: 600; text-transform: none;"
href="доменное имя сайта/booking?showcase=идентификатор канала продажи&tour=идентификатор тура">
Забронировать тур //Текст кнопки
</a>
В шаблоне замените:
- Путь к странице /booking на вашем сайте.
- Идентификатор канала продаж.
- Идентификатор тура.
Должно получиться:
<a style="display: inline-block; cursor: pointer; background-color: #007cf0; color: #fff;border: none; border-radius: 3px; padding: 0 20px; vertical-align: middle; font-size: 1rem; line-height: 42px; text-align: center; text-decoration: none; font-weight: 600; text-transform: none;"
href="https://atom-s.com/booking?showcase=87d22e04-5a98-4667-a70a-11d4d2bcd820-d4d62120801188c380b7e6f890efef6b&tour=27190">
Забронировать тур //Текст кнопки
</a>
Изменение стиля модуля бронирования
По умолчанию, модуль бронирования передается на ваш сайт в стандартном виде. Вы можете самостоятельно внести изменения в стиль страницы модуля бронирования. Для этого прямо в код страницы бронирования после основного кода добавляется блок <style>.
Код вы можете написать свой. Приводим пример, как может выглядеть такой код:
<style> /*booking*/ [atomsbookingconstructor].constructor, [atomsorder].order { font-family: Roboto!important; font-size: 16px!important; } [atomsbookingconstructor].constructor .card, [atomsorder].order .card { box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .1) !important; border-radius: 16px !important; } [atomsbookingconstructor].constructor .container, [atomsorder].order .container { padding-right: 0px !important; padding-left: 0px!important; } [atomsbookingconstructor].constructor .block, [atomsorder].order .block { padding: 30px 40px !important; } [atomsbookingconstructor].constructor .block .header, [atomsorder].order .block .header { font-size: 20px!important; margin-bottom: 16px!important; } [atomsbookingconstructor].constructor .btn-link, [atomsorder].order .btn-link, [atomsbookingconstructor].constructor a, [atomsorder].order a { font-size: 15px !important; text-decoration: none !important; } [atomsbookingconstructor].constructor .block.border-top, [atomsorder].order .block.border-top { border-top: 1px solid #e8e8e8!important; } [atomsbookingconstructor].constructor .block.border-bottom, [atomsorder].order .block.border-bottom { border-bottom: 1px solid #e8e8e8!important; } [atomsbookingconstructor].constructor .card .block-header, [atomsorder].order .card .block-header { font-size: 20px!important; } [atomsbookingconstructor].constructor .text-muted, [atomsorder].order .text-muted { color: #000A1699!important; } [atomsbookingconstructor].constructor .block.editor, [atomsorder].order .block.editor { background-color: #F5F5F5!important; } [atomsbookingconstructor].constructor hr.narrow.darker, [atomsorder].order hr.narrow.darker { border-top: 1px solid #e8e8e8!important; } [atomsbookingconstructor].constructor .btn-default, [atomsorder].order .btn-default, [atomsbookingconstructor].constructor .btn-green.btn-lg { color: #fff!important; border: 1px solid transparent!important; padding: 0 32px!important; font-size: 16px!important; line-height: 46px!important; font-weight: 400!important; border-radius: 0px!important; background-color:#e07d20!important; border-radius: 6px!important; } [atomsbookingconstructor].constructor .btn-default:hover, [atomsorder].order .btn-default:hover { background-color: #cd7019!important; border-color: #cd7019!important; } [atomsbookingconstructor].constructor .actions .btn-blue, [atomsorder].order .actions .btn-blue { color: white; background-color: #e07d20; border-color: #e07d20; } [atomsbookingconstructor].constructor .actions .btn-blue:hover, [atomsbookingconstructor].constructor .actions .btn-blue:focus, [atomsbookingconstructor].constructor .actions .btn-blue:active, [atomsbookingconstructor].constructor .actions .btn-blue.active, [atomsorder].order .actions .btn-blue:hover, [atomsorder].order .actions .btn-blue:focus, [atomsorder].order .actions .btn-blue:active, [atomsorder].order .actions .btn-blue.active { background-color: #cd7019; border-color: #cd7019; } [atomsbookingconstructor].constructor .btn-link, [atomsorder].order .btn-link { color: #e07d20!important; } div#booking a { color: #e07d20!important; } div#booking a.btn { color: #fff!important; } [atomsbookingconstructor].constructor .btn:active, [atomsbookingconstructor].constructor .btn.active, [atomsorder].order .btn:active, [atomsorder].order .btn.active { outline: 0!important; box-shadow: none!important; /*background-color: #1c72ac!important;*/ } [atomsbookingconstructor].constructor .btn:focus, [atomsbookingconstructor].constructor .btn.focus, [atomsbookingconstructor].constructor .btn:active:focus, [atomsbookingconstructor].constructor .btn:active.focus, [atomsbookingconstructor].constructor .btn.active:focus, [atomsbookingconstructor].constructor .btn.active.focus, [atomsorder].order .btn:focus, [atomsorder].order .btn.focus, [atomsorder].order .btn:active:focus, [atomsorder].order .btn:active.focus, [atomsorder].order .btn.active:focus, [atomsorder].order .btn.active.focus { outline: 0!important; } [atomsbookingconstructor].constructor .hotels .hotel-item, [atomsorder].order .hotels .hotel-item { padding: 30px 40px!important; } [atomsbookingconstructor].constructor .hotels .hotel-item .header, [atomsorder].order .hotels .hotel-item .header { font-size: 20px!important; margin-bottom: 14px; display: block; } [atomsbookingconstructor].constructor .hotels .selected, [atomsorder].order .hotels .selected { background-color: #F5F5F5!important; } [atomsbookingconstructor].constructor .hotels .hotel-item .wrap .option, [atomsorder].order .hotels .hotel-item .wrap .option { padding: 20px!important; border: 1px solid #e8e8e8!important; border-radius: 4px!important; } [atomsbookingconstructor].constructor .hotels .hotel-item .gallery .wrapper, [atomsorder].order .hotels .hotel-item .gallery .wrapper { border-bottom: 0!important; border-top: 0!important; padding-bottom: 0!important; padding-top: 0!important; } [atomsbookingconstructor].constructor .hotels .hotel-item .wrap .option .blue, [atomsorder].order .hotels .hotel-item .wrap .option .blue { color: #000A16DE!important; } [atomsbookingconstructor].constructor .hotels .hotel-item span.text-primary.name {margin-bottom: 4px;} .block.editor.tourists + .block > .actions > button.btn-default:nth-child(2) { background-color: transparent !important; color: #000 !important; border-color: #e07d20 !important; } .block.editor.tourists + .block > .actions > button.btn-default:nth-child(2):hover { background-color: #e07d20 !important; color: #fff !important; border-color: #e07d20 !important; } [atomsbookingconstructor].constructor .input-group #inputPromocode + .input-group-btn > .btn { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; line-height: 32px !important; padding: 0 20px !important; } [atomsbookingconstructor].constructor .card .package .green-block, [atomsorder].order .card .package .green-block { background-color: inherit!important; color: inherit!important; padding-bottom: 0 !important; } [atomsbookingconstructor].constructor .card .package .green-block > .header {margin-bottom:0!important} #atoms-booking-order-consists-of {font-size:16px!important} [atomsbookingconstructor].constructor .block.summary-body.border-bottom, [atomsorder].order .block.summary-body.border-bottom { border-bottom: 0 !important; } [atomsbookingconstructor].constructor .block.summary-body>div>div {margin-top: 12px;} .CalendarDay__selected, .CalendarDay__selected:active, .CalendarDay__selected:hover { color: #fff; background:#e07d20!important; border-color:#e07d20!important; } @media (min-width:768px) { #booking .col-sm-5 { position: sticky; top: 40px; } } @media (max-width:600px) { [atomsbookingconstructor].constructor .block, [atomsorder].order .block, [atomsbookingconstructor].constructor .hotels .hotel-item, [atomsorder].order .hotels .hotel-item { padding: 30px 20px !important; } } @media (max-width:960px) { [atomsbookingconstructor].constructor .btn-default, [atomsorder].order .btn-default, [atomsbookingconstructor].constructor .btn-green.btn-lg { padding: 0 12px !important; font-size: 14px !important; line-height: 36px !important; } } </style>