Поисковый виджет для «Инфофлот»: интеграция круизов на сайты турагентств

Наш клиент - круизный центр «Инфофлот», который занимается продажей путевок на морские и речные круизы по всему миру. Заказчик обратился к нам для создания поискового виджета, который бы передавал на сайт турагентств-партнеров информацию по доступным круизам в реальном времени. Мы создали виджет на Bitrix Framework. Он состоит из двух компонентов: первый - конфигуратор для настройки поисковика, авторизации и идентификации пользователя, второй - выводит виджет на сайте турагентства. После завершения основных работ по проекту клиент возвращался к нам несколькими итерациями доработок по улучшению работы сервиса и пользовательского опыта. На текущий момент создано более 1400 виджетов, которые используются на сайтах 670 турагентств.

Виджет «Инфофлот» обеспечивает быстрый и удобный поиск круизов на сайтах туристических агентств - партнеров нашего клиента. Так как он работает напрямую с API «Инфофлота», пользователю достаточно лишь настроить отображение и наполнение поисковика (поля, города, теплоходы, реки для поиска круизов) в личном кабинете и встроить его на свой сайт, не привлекая разработчика. В системе уже создано более 1400 виджетов, которые используются на сайтах 670 турагентств.

Так как у заказчика уже был сервер на Bitrix24, мы решили вести разработку на Bitrix Framework. Создали два компонента: один отвечает за настройку виджетов, авторизацию и идентификацию пользователей системы, второй - за вывод поисковика с той же идентификацией по внутреннему токену и с той же модульной структурой показа нужных блоков через технологию Ajax. Впоследствии мы также добавили varnish для кэширования запросов и увеличения быстродействия поиска по круизам. В результате клиент получил скрипт, который можно встраивать на любой сайт без подключения специалистов.

Изначальная идея проекта подразумевала, что встраиваемый скрипт будет взаимодействовать напрямую с документом сайта, на который он будет внедрен. Однако мы обнаружили, что подрядчики, которые работали над версткой виджета, не учли, что он будет использоваться на других сайтах, а не только на клиентском. Это вылилось в ряд проблем, так как для построения визуальной части проекта использовалась библиотека bootstrap.css. Несмотря на то, что эта библиотека считается устаревшей, она до сих пор используется на многих сайтах, так как позволяет реализовать задачи верстки в кратчайшие сроки. Из-за этого не стали рассматривать возможность встраивания виджета напрямую в документ сайта - в этом случае наши стили и стили этой библиотеки конфликтовали бы друг с другом, - и обратились к технологии iframe. iframe - один из старейших тегов html, однако в хорошем исполнении этот тег можно использовать на нестандартных проектах. Виджет «Инфофлот» - как раз этот случай. Этот фрейм считается отдельным документом, на котором внедрен виджет, а значит - не взаимодействует с самим сайтом.

Клиент пришел с готовым дизайном и версткой виджета, однако на старте проекта отсутствовало техническое задание и полноценная аналитика. Поэтому в ходе работы отдельные функции переосмысливались и уточнялись совместно с заказчиком. Параллельно дорабатывался и Rest API: клиент расширял его там, где данных не хватало для корректной работы виджета. На раннем этапе виджет не учитывал все изменения, вносимые через личный кабинет конфигуратора - например, изменение ширины, высоты или стилей iframe. Это вынуждало турагентства каждый раз заново вставлять код на сайт. Мы доработали скрипт - теперь все настройки обновляются автоматически, без вмешательства со стороны. Авторизация пользователей в личном кабинете осуществляется по токену. После одного из технических сбоев около 50 виджетов получили некорректные ключи. Для восстановления их работы нам пришлось вручную найти и заменить токены в системе.