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. При добавлении улучшений не забудьте заменить маркер, код виджетов и партнёрские ссылки в шаблоне на собственные.

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 — и мы обязательно опубликуем интересные решения в нашей базе знаний.

Была ли эта статья полезной?

Еще есть вопросы? Отправить запрос