Разработка

КЕЙС: Разработка Ajax фильтрации автомобилей для прокатной компании Premier cars

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

Время работы

2 недели

ГОД

2024

Вводные данные

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

Ключевые требования:

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

Общая архитектура решения

Фильтр реализован на связке:

WordPress (PHP) — серверная логика, выборка данных, агрегации, вычисление допустимых значений;
AJAX — асинхронная подгрузка автомобилей и параметров фильтра;
JavaScript — управление состоянием фильтра, динамическое обновление зависимых параметров, работа с URL;
GET-параметры — сохранение состояния фильтра и сортировки без перезагрузки страницы;

В самом фильтре было несколько типов фильтрующих кнопок (кнопки для быстрой фильтрации, кнопки для мультивыбороной фильтрации). Кнопки для быстрой фильтрации работают только 1 раз и фильтруют только по 1 типу (свободные авто, акционные авто, новые авто и тд)

Как устроена механика фильтрации

(01)

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

Все параметры передаются через GET, но применяются одним AJAX-запросом после нажатия кнопки «Применить». JavaScript аккуратно собирает состояние формы, обновляет URL через javascript и отправляет запрос на сервер. Сервер, в свою очередь, формирует запрос с учетом таксономий, мета-полей и сортировки и возвращает уже готовый список автомобилей.

За счет этого достигается сразу несколько эффектов: высокая скорость работы, отсутствие перезагрузок, корректная индексация и понятное поведение фильтра для пользователя.

Логика зависимых параметров

(01)

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

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

Марка автомобиля всегда зависит от выбранного класса. Если класс уже выбран, пользователю показываются только те марки, которые реально присутствуют в этом классе в базе. Если класс не выбран, фильтр не ограничивает пользователя и выводит все марки, существующие на сайте. Эта логика полностью исключает «пустые» результаты и ложные комбинации.

Модель автомобиля зависит сразу от двух параметров — класса и марки. Если пользователь выбрал и то, и другое, фильтр показывает только реальные модели этой связки. Если выбран только один параметр или не выбран ни один, список моделей остается полным. Это позволяет гибко управлять фильтром и не загонять пользователя в тупик.

Диапазоны: год, цена и мощность

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

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

Важно, что при пересчете диапазонов пользовательский ввод не сбрасывается без необходимости. Если введенное значение остается в допустимых пределах, оно сохраняется. Это решает распространенную проблему, когда фильтр «перепрыгивает» и сбрасывает введенные данные, ухудшая пользовательский опыт.

Цвет, привод и тип двигателя

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

Например, если после выбора класса и марки в базе остались только полноприводные автомобили с бензиновым двигателем, пользователь увидит только эти варианты. Такой подход не только упрощает выбор, но и исключает ситуации, когда фильтр возвращает пустой результат из-за невозможной комбинации параметров.

Управление фильтром: сброс и применение

Рядом с фильтром предусмотрены две ключевые кнопки. Кнопка «Сбросить» полностью очищает все параметры, удаляет GET-параметры из URL и загружает исходный список автомобилей автопарка. Это фактически возврат к начальному состоянию страницы.

Кнопка «Применить» собирает текущее состояние фильтра, формирует корректную GET-строку и инициирует AJAX-запрос. Пользователь всегда четко понимает момент применения фильтра и контролирует выборку.

Сортировка

Сортировка реализована как независимый, но полностью совместимый с фильтром механизм. Она может работать как вместе с выбранными параметрами, так и отдельно, если фильтр пуст.

Поддерживается сортировка по марке, классу, цене и году выпуска — в обоих направлениях. Технически сортировка передается через GET-параметры и применяется на уровне WP_Query, не конфликтуя с AJAX-фильтрацией и дополнительными условиями.

Дополнительные режимы: свободные авто, новинки и акции

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

Результат

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