Kit.travel — White Label от Travelpayouts с набором расширений
Решение больше не поддерживается.

С помощью White Label от Travelpayouts партнёры создают поиск авиабилетов и отелей на собственном сайте в несколько кликов. Обладая минимальными знаниями в HTML и CSS, партнёры могут добавить на White Label различные улучшения:

  • меню в шапке и подвале сайта;
  • изображение для фона;
  • дополнительные вкладки с формами поиска от тревел-брендов (трансферы, страховка, туры и многое другое);
  • виджеты тревел-брендов;
  • всплывающие окна и многое другое.

Мы создали образец White Label сайта, на котором собрали эти и многие другие улучшения. Сайт доступен по адресу kit.travel. Архив с кодом настроек White Label: Kit.travel_White_Label.zip.

Важно! Для начала изучите инструкции по созданию White Label. При добавлении улучшений не забудьте заменить ID, код виджетов и партнёрские ссылки в шаблоне на собственные.

mceclip0.png

Ниже мы рассмотрим улучшения, внедрённые на White Label, подробнее.

Шапка и подвал сайта kit.travel

В верхней части сайта мы добавили меню и слайдер, содержащий рекламные баннеры туристических брендов.

mceclip1.png

В меню вы можете разместить ссылки на другие страницы вашего сайта (если White Label настроен на поддомене) или партнёрские ссылки на сайты тревел-брендов.

Слайдер удобно использовать для информирования посетителей о промоакциях, рассказывать о ваших новых статьях или размещать баннеры тревел-брендов.

Подробнее о добавлении этих расширений читайте в статьях: Как добавить меню в шапку и подвал White Label и Как добавить слайдер в White Label.

Основная часть White Label

Основная часть содержит вкладки, с помощью которых можно переключаться между различными формами поиска тревел-брендов. Под блоком с формой поиска находится раздел «Ищи лучшее», в котором, в зависимости от выбранной вкладки, отображается определённый виджет бренда.

Вкладка «Авиабилеты»:

mceclip4.png

Вкладка «Трансферы»:

mceclip3.png

Дополнительные улучшения

Помимо инструментов от тревел-брендов, мы разместили на главной странице White Label ссылки на статьи блога.

Для вывода заголовка статей из блога мы добавили следующий код в блок Футер сайта на вкладке Мои блоки:

<script src="https://jquery-plugins.net/FeedEk/FeedEk.min.js" type="text/javascript"></script>
<script src="https://jquery-plugins.net/Scripts/prettify.js"></script>
<script type="text/javascript">
 $(function () {
 $('#blogrss').FeedEk({
 FeedUrl: 'https://www.aviasales.ru/blog/feed/zen', MaxCount: 3, ShowDesc: true, DateFormat: 'dd MMMM yyyy', DescCharacterLimit: 100, DateFormatLang: 'ru'
 });
 prettyPrint();
 $.ajax({ type: "POST", url: '/Home/PluginVisitAdd', data: { pluginId: 1 } });
 });
 
 $(window).on('load', function() {
 // парсинг превью блогов
 $('#blogrss').on('init', function(event, before){
 console.log("initialized");
 });
 $('.itemTitle').before('<div class="img-block-blog"><img src="http://sem-dev.co.ua/WLNEW/logo-blog.png"/></div>');
 $('.blockbot').insertAfter('#blogrss ul li:nth-child(3)');
 
 $('.sob__tur').on('init', function(event, addClass){
 console.log("initialized");
 });
 $('.sob__ex.sob__all iframe').css('min-height','180px');
 $('.sob__ex.sob__all iframe').css('max-height','none');
 $('.ps-nights').addClass('tt');
 $('.ps-pretext').addClass('tt');
 $('.ps-departures').addClass('tt');
 //проверка
 if($('*').is('#blogrss')) {
 $('.blockbot').show();
 }
 else {
 $('.blockbot').hide();
 }
 //добавляем маркер в ссылки для блога
 $('.itemTitle a').each(function(){ 
 var hrefmarker = $(this).attr('href');
 var hrefmarkeradd = hrefmarker+'&marker=229849';
 $(this).attr('href',hrefmarkeradd);
 });
 });
</script>

В Блок на главной странице добавили код для отображения:

 <div class="blog">
 <h2 class="TPWL-front-content-special_offers-title">Читай интересное</h2>
 <div id="blogrss"></div>
 </div>

Пример стилей можно найти в файле style.css.

Адаптация White Label под мобильные устройства

По умолчанию White Label от Travelpayouts адаптивен и автоматически подстраивается под разрешение экрана. Ряд изменений, которые мы внесли, требуют дополнительных настроек стилей. В файле style.css вы можете найти подборку стилей, которые использовались на kit.travel.

Другие расширения

В нашем справочном центре вы можете найти описание других расширений, которые можно добавить на ваш White Label:

Присылайте нам примеры ваших White Label — и мы обязательно опубликуем интересные решения в нашем справочном центре.