Разработка сайта на Битрикс

Анастасия /
менеджер проекта

О компании

Компания Сантрек уже более 11 лет занимается разработкой авторских туристических маршрутов по Кавказу, на основе которых проводит сборные, индивидуальные и корпоративные туры.

Первый сайт заказчика был разработан в 2011 году, на заре создания компании. К 2022 году он содержал в себе огромное количество интересной и полезной информации, но визуально и технически уже просто устарел.

В течение последних 11 лет компания предпринимала попытку переработать сайт – разработать новый, более привлекательный дизайн и удобный интерфейс для пользователей.

Эта попытка не была доведена до конца. Однако именно после нее остались наработки, которые мы использовали в дальнейшем, так как к очередному подходу "с нуля" компания была не готова морально и финансово.

15 000

128

туристов

авторских туров

южных регионов

Сайт проекта
sun-trek.ru

Особенности работы с проектом

Цель проекта: осовременить дизайн, улучшить техническую базу сайта и юзабилити.

До 1 млн ₽

6 месяцев

Конфигурация

бюджет проекта

срок разработки

лицензия 1С:Битрикс-Стандарт + индивидуальное решение

Для понимания, можем ли мы использовать наработки предыдущих подрядчиков в своей работе, первым шагом стало проведение технического аудита проекта.

По его итогу мы составили документ, в котором указали перечень найденных ошибок, их критичность и способы исправления.

Этот же документ позволил нам оценить стоимость работ по приведению технической базы к стандартам Битрикс и сравнить эти затраты с разработкой проекта на «чистой» базе.

Предыдущий дизайн, по словам заказчика, был сделан на скорую руку. В нем нарушались некоторые принципы дизайна и юзабилити, но в целом вектор визуала заказчику нравился.

Поэтому мы решили взять максимум из имеющихся материалов и «докрутить» их, не меняя кардинально основу.

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

Новые интеграции проводились только в случаях «очень надо» с нашей стороны или «очень хочу» со стороны заказчика.

Слабая техническая база проекта

Ограниченность в функционале

Устаревший и не функциональный дизайн

Переработан и усовершенствован дизайн проекта

4.1

Отзывы

Отдельная страница с подробными отзывами туристов – для каждого отзыва можно задать пол его автора, от которого зависит отображаемая на странице иконка.

4.2

О нас

4.3

Контакты

Обратная связь с компанией через формы «Заказать звонок» и «Задать вопрос» – после заполнения формы на почту менеджеру приходят данные пользователя, его вопрос и ссылка на страницу, с которой форма была отправлена.

4.4

Горящие туры

Отдельная страница горящих туров с отличным от стандартных разделов шаблоном карточек туров – в нем упор сделан на анонсное изображение тура.

4.5

Туры

Привязка карточек туров по двум критериям – тип активности и направление – с последующим выводом в разных разделах и возможностью для пользователя выбирать тур по более важному для него критерию.

4.6

Направления

4.7

Карточка тура

Детальная и максимально подробная карточка тура, из которой туристы могут получить всю интересующую информацию.

Возможность забронировать тур – после заполнения формы на почту менеджеру приходит письмо с информацией о бронировании и ссылкой на тур.

Возможность формировать ссылку на оплату тура через административную часть проекта.

Краткий список технических изменений:

/ git

На сайте используется система управления версиями Git. С её помощью происходит "доставка" изменений на проект, а также контроль версий. Это позволяет следить за изменениями файлов проекта, а также отслеживать любое вмешательство в код проекта.

/ composer

Используется пакетный менеджер Composer. С его помощью установлены пакеты, упрощающие разработку на проекте. Также он может пригодиться в будущем для настройки тестирования работоспособности кода проекта.

/ JS, CSS

Установлен и настроен сборщик js- и css-файлов webpack. Благодаря этому библиотеки для js могут быть установлены одной командой, а также могут с легкостью изменять свои версии.

Улучшена техническая база проекта, исправлены ошибки, интегрирован новый дизайн.

/ webpack

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

/ scss

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

/ D7

В логике сайта, где это возможно, использованы методы из нового ядра битрикса (D7). Новое ядро использует более простые обращения к базе данных и не содержит лишней логики. Уменьшается общее время выполнения кода.

/ grid, flex

Для расположения блоков на сайте использованы css-технологии grid и flex. Это позволяет гибко настраивать позиционирование блоков.

/ jquery

Использована библиотека jquery. Благодаря ей ускоряется разработка js-скриптов, а также сильно расширяются возможности скриптов без необходимости собственных доработок.

/ swiper

Для создания слайдеров на сайте используется js-библиотека Swiper. Она предоставляет обширные возможности для кастомной настройки вида слайдеров и работы с ними (переключение слайда с помощью перетаскивания, кнопок, нажатия по слайду и т. д).

/ svg

Где было возможно, использованы векторные svg-картинки. Они не теряют качества при изменении размера и позволяют настраивать свои стили с помощью стандартных css-стилей.