Kit.travel - White Label от Travelpayouts с набором расширений

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

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

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

Важно! Не забудьте заменить маркер, код виджетов и партнёрские ссылки в шаблоне на собственные.

mceclip0.png

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

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

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

mceclip1.png

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

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

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

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

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

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

mceclip4.png

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

mceclip3.png

Как добавить новые вкладки, читайте в этой статье.

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

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

mceclip5.png

Вывод фотографий из Инстаграм

Чтобы добавить вывод фотографий, нужно получить специальный токен. Как это сделать читайте в этой инструкции.

Откройте настройки White Label, перейдите на вкладку Подвал и добавьте следующий код:

<script type="text/javascript">
$(document).ready(function() {
var token = '257525016.dce3d50.031b0d83a8404340a03b25925da868f2',
num_photos = 20;

$.ajax({
url: 'https://api.instagram.com/v1/users/self/media/recent',
dataType: 'jsonp',
type: 'GET',
data: {access_token: token, count: num_photos},
success: function(data){
console.log(data);
for( x in data.data ){
$('div#rudr_instafeed').append('<div class="slide"><a href="' + data.data[x].link + '" target="_blank"><img src="'+data.data[x].images.low_resolution.url+'"></a></div>');
}
},
error: function(data){
console.log(data);
}
});

});
$(window).on('load', function() {
$('#rudr_instafeed').on('init', function(event, slick){
console.log("initialized");
});
// слайдер с фото Инстаграмма
$('#rudr_instafeed').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
responsive: [
{
breakpoint: 1576,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
infinite: true,
dots: false
}
}
]
});
});
</script>

В параметре token укажите токен, полученный на странице https://rudrastyh.com/tools/access-token. В параметре num_photos можно указать количество фотографий, которые будут отображаться в виджете. 

Перейдите на вкладку Главная страница в настройках White Label и добавьте следующий код:

 <div class="insta">
<h2 class="TPWL-front-content-special_offers-title">Сохраняй моменты</h2>
<div style="max-height: 320px; overflow: hidden"><div id="rudr_instafeed"></div></div>
<a class="insta__link" href="https://www.instagram.com/aviasales">Открыть Instagram</a>
</div>

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

Вывод статей из блога

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

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

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

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