Кейс по разработке фильтра поиска для туристического сайт на основе Clubstrannik.ru Агентство Onpeak

О КОМПАНИИ

Клуб «Странник» занимается организацией активного отдыха (походы, сплавы, покорения горных вершин и многое другое) в самых невероятных и красивых точках мира

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

ЦЕЛИ ПРОЕКТА

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

РЕШЕНИЕ

Обработка фильтра на стороне браузера – это позволяет увеличить скорость фильтрации по группам услуг (туров). Для реализации данной доработки на сайте был использован javascript-фреймворк Vue.js.

ПРОБЛЕМА

РЕАЛИЗАЦИЯ

Функционал фильтрации по турам

В рамках проекта мы полностью переделали функционал фильтрации на сайте, т.е. после каждого изменения фильтра не делался конкретный запрос в базу данных, располагающуюся на сервере, и не происходило изменение всей страницы. Теперь фильтрация происходит на стороне браузера, т.к. сайт отдает полный список всех услуг в формате JSON. Поиск тура происходит по данной таблице, которая отправляется пользователю. После нахождения определенного поля запроса
с помощью Vue.js происходит тимизация необходимого количества туров по тем или иным правилам.

Использование Vue.js дало возможность «на лету» выводить и обновлять список туров при изменении фильтров, а также установить сложные связи между фильтрами для их отключения, если они становятся недоступны для выбора

Страница поиска по сайту

Также с помощью Vue.js создана страница поиска по сайту.
Vue.js позволяет оперативно (почти мгновенно) отображать результаты поиска без перезагрузки страницы, выводить подсказки при наборе поискового запроса.

Vue.js позволяет нам экономить время на написание скриптов
для обновления контента, показа/скрытия элементов и т.п.

Зинаида

Команда проекта нашла самое оптимальное решение для увеличения скорости загрузки сайта при большом объеме данных - использование технологии Vue.js. Благодаря этому мы смогли увеличить лояльность пользователей сайта и уменьшили показатель отказов.

менеджер проекта