Дальрефтранс: делаем контейнерные перевозки доступнее — с помощью Битрикса, интеграций, интерактивных карт и мультиязычности
Аналитика и прототипы
Дизайн
Разработка
Разработка
Фронтенд разработка
При разработке сайтов на битриксе мы используем стек:
Далее реализуется обыкновенная верстка
посредством Twig (шаблонизатора, используемого в стеке компании), стилизуется посредством
SASS.
Сборка проекта происходит с помощью Gulp,
где объединяются различные модули, стили, библиотеки, скрипты.
Frontend–разработчик
Ярослава Пантелеева
Начали разработку с простых страниц — 404, пользовательское соглашение, конкретная новость. После разработки страницы добавляли анимируемые переходы слайдеров, лаконичные ховеры, плавные появления модальных окон.
Также было принято решение отказаться от использования Vue с битриксом, поэтому для логики использовался чистый JS — это одна из особенностей проекта.
Страница «Контакты»
Одним из простых, но интересных решений стала карта на странице Контакты.
Мы использовали простое изображение карты с svg-элементами
для каждого города (это сами метки и линии до городов). Анимируемые при клике с помощью
возможностей CSS. Это был самый простой и быстрый способ решения задачи.
Frontend-разработчик
Оля Захарова
Страница «Услуги»
Самое сложное, необычное и интересное решение было в разделе «Услуги» — это интерактивная карта.
Наша задача — создать возможность самостоятельно задавать координаты и отображать сухопутные и морские перевозки на карте.
Проанализировали стандартные решения с возможностью
адаптации решения под нашу задачу. Ни Яндекс, ни google не позволяли строить
морские маршруты, поэтому мы выбрали Mapbox.
Системный аналитик
Мари Стародубцева
Mapbox позволял ставить метки (маркеры) на карте, соединять их анимированными линиями по заданным координатам в целые маршруты.
С mapbox опыта работы не было, поэтому
много времени ушло на изучение документации. Сложным в реализации был функционал зума
карты и анимирования путей в различных сценариях.
Frontend-разработчик
Оля Захарова
Возможности настроить прямую интеграцию с Mapbox не было. Но сервис давал возможность выгружать координаты маршрутов в формате Json.
Чтобы контент-менеджеры могли оперативно
управлять изменениями маршрутов, мы создали возможность загружать json-файлы через
админ.систему.
Backend–разработчик
Алексей Пономарёв
В итоге, при изменении маршрутов контент-менеджеры могут произвольно отрисовывать маршрут в редакторе Mapbox и выгруженный json-файл загружать в админ.систему.
Еще одна особенность проектов на Битриксе — взаимозависимость фронта и бэка. Всю реализуемую фронтом верстку битрикс-разработчик впоследствии интегрирует с Битриксом. Поэтому здесь нужна хорошая командная работа, чтобы работа одного разработчика не ломала работу другого.
Бэкенд разработка
Мы работали на вот таком стеке:
После создания проекта у нас на сервере и подготовки админ. системы к разработке выбираем лицензию битрикса. Для создания сайтов средней сложности — лицензия «Стандарт» самый оптимальный вариант.
Подобные сайты Студия разрабатывает по несколько в год, поэтому большинство процессов налажены и разработка проходит гладко и в срок.
На этом сайте получилось реализовать несколько интересных решений.
У компании контент для разных стран отличался, поэтому нужна была возможность редактировать каждую версию независимо от других. В итоге, каждая языковая версия сайта в админ. системе редактируется отдельно.
Мультиязычность сайта
Для централизованного сбора заявок на услуги компании нужна была интеграция с внутренней CRM-системой заказчика.
Интеграция с Data и CRM-системой
Мы работали по методам разработчиков со стороны
заказчика. В форме заказа услуги поле «Компания» интегрировали с сервисом Dadata и фиксировали
намного больше данных для заявки, чем видел пользователь. После отправки формы заявка
сохранялась и на сайте и в CRM-системе заказчика.
Backend–разработчик
Алексей Пономарёв
После полного функционального тестирования мы начали работать над оптимизацией сайта — это был один из главных критериев при приемке работы. На стороне фронтенда сделали следующее:
Оптимизация работы сайта и уменьшение веса страниц
Удаление лишних элементов в сборке, занимающих большое количество памяти (слежение за скриптами source map)
02
03
Уникальные инструменты, например mapbox, подключались только на конкретных страницах
Минификация js и css файлов и сжатие изображений
01
На стороне бэкенда:
Сократили время ответа от сервера
02
Использовали кэширование страниц
01
03
Оптимизировали количество запросов
Уменьшили вес изображений через Tiny Png
04
Главное действие клиента на сайте — это посмотреть расписание перевозок, рассчитать стоимость и отследить нахождение своего контейнера. Все данные расположены централизованно на главной странице.
Интеграция сервисов перевозки
Каждый сервис интегрировали на основе методов от разработчиков заказчика. Данные в каждое поле приходили из центральной базы. Вся поисковая выдача строилась на данных с другого сайта.
При тестировании мы уделили отдельное
внимание различным состояниям центральной базы и предусмотрели разные сценарии, чтобы
пользователь в любых ситуациях понимал, что сейчас произошло и в чем проблема.
Тестировщик
Анна Полховская
