Интернет-магазин дронов DJI AeroFiberPRO: каталог, подбор по задаче и сервис
Мы сделали сайт-каталог официальной техники DJI для AeroFiberPRO — компании, которая продаёт дроны, ремонтирует их в своём сервисе и принимает старые аппараты по Trade-In. Главная сложность такой техники не в цене, а в выборе: под съёмку, тепловизионную инспекцию и поисковые работы нужны разные аппараты, а внутри одной модели — разные комплектации. Мы собрали на Next.js фасетный каталог на 14 комплектаций, подборки по типовым задачам, карточки с таблицей наборов и раздел услуг сервисного центра.
Задача
Дрон за 200–500 тысяч рублей покупают не по фотографии. Перед покупкой человек выясняет, хватит ли времени полёта на облёт объекта, добьёт ли связь до дальнего конца трассы, различит ли тепловизор утечку на трубопроводе. Обычный интернет-магазин с плиткой товаров и кнопкой «в корзину» на таких вопросах не помогает: покупатель уходит искать ответы на форумы и возвращается уже не к вам.
Вторая сложность — комплектации. У одной модели их несколько, и аппарат в них один и тот же: отличаются пульт, число аккумуляторов, зарядный хаб и кейс, а разница в цене доходит до сотни тысяч рублей. Если вывести наборы просто отдельными товарами, посетитель видит пять почти одинаковых названий с разными ценами и не понимает, за что переплачивает. Так теряется и доверие, и заявка.
Третья часть задачи — показать, что компания не перепродаёт коробки. У AeroFiberPRO есть собственный сервисный центр, запчасти под заказ, прошивка и настройка, Trade-In и поставки организациям со счётом и закрывающими документами. Всё это влияет на решение о покупке не меньше характеристик, но обычно прячется в подвале сайта. Нам нужно было вывести сервис на один уровень с каталогом — и уложиться в полтора месяца.
Покупатель приходит не за «Mavic», а за облётом ЛЭП или ночным дежурством. В обычном каталоге он вынужден сам переводить задачу в характеристики: сверять время полёта, дальность связи и наличие тепловизора по таблицам разных моделей.
Пять позиций с почти одинаковыми названиями и разбросом цен до ста тысяч рублей читаются как ошибка каталога. Без наглядного сравнения наборов посетитель не понимает, что именно лежит в коробке и за что он доплачивает.
Ремонт, запчасти, прошивка и Trade-In — сильная сторона компании, но на типовом сайте они спрятаны в подвале. Покупатель дорогой техники хочет заранее знать, кто и на каких условиях будет её обслуживать после падения или залития.
Что делает система
Каталог с фасетным фильтром
Ядро сайта: 14 комплектаций двух серий, которые отбираются по серии, задаче, оснащению, наличию, цене и времени полёта. У каждого значения фильтра стоит счётчик, поэтому посетитель заранее видит, сколько аппаратов останется после выбора, и не попадает в пустую выдачу. Сортировка — по цене, новинкам и наличию: покупатель с бюджетом и покупатель со срочной задачей идут разными путями.
Подборки по типовым задачам
Шесть готовых подборок — аэрофотосъёмка, профессиональная съёмка, мониторинг и инспекция, промышленные задачи, поисково-спасательные работы, техника с тепловизором. Это вход в каталог для тех, кто формулирует потребность делами, а не моделями: человек выбирает свою задачу и сразу получает короткий список подходящих аппаратов вместо всей линейки DJI.
Карточка товара с разбором наборов
Страница аппарата отвечает на вопросы в том порядке, в котором они возникают: галерея, цена и наличие, четыре ключевых параметра крупно, затем комплектации с таблицей «что лежит рядом с дроном», описание, характеристики, состав коробки, доставка, применение, отзывы и вопросы. Якорная навигация сверху позволяет прыгнуть к нужному блоку, не пролистывая длинную страницу.
Заявка вместо корзины
Корзины и онлайн-оплаты на сайте нет намеренно: цену и наличие подтверждает менеджер, а организациям выставляют счёт и готовят договор. Вместо «купить» на карточке — «Купить в 1 клик» и заявка с телефоном, плюс сквозной блок обратного звонка. Это честнее для техники, которую подбирают под задачу, и снимает риск продать не тот набор.
Раздел услуг сервисного центра
Четыре услуги с отдельными страницами: ремонт и диагностика, прошивка и настройка, подбор и поставка запчастей, Trade-In. У обмена расписаны критерии оценки — состояние корпуса, налёт и износ, подвес и камера, комплектность, актуальность модели — и четыре шага сделки от заявки с фотографиями до зачёта суммы. Владелец дорогой техники видит условия до звонка.
Блок для юридических лиц
Организации покупают дроны иначе, чем частные пилоты: им нужны счёт, договор и закрывающие документы, отгрузка со склада в день оплаты, доставка с контролем груза, персональный менеджер и обслуживание парка. Мы вынесли эти условия в отдельный блок и на страницу сотрудничества, чтобы закупщик не выяснял их в переписке, а сразу видел на сайте.
Блог пилота и SEO-разметка
Блог с рубриками «Полезно знать», «Обзоры дронов» и «Сервис» отвечает на вопросы, которые люди задают до покупки: как выбрать аппарат с тепловизором, что брать под мониторинг объектов, как часто обслуживать дрон. Карточки товаров размечены Product, разделы — BreadcrumbList, вопросы — FAQPage, поэтому каталог понятен и поисковикам, и AI-ответам.
Технологический стек
Каталог техники живёт долго и должен открываться мгновенно, поэтому страницы серий, подборок и товаров генерируются заранее и отдаются как статика, а обновления цен и наличия подхватываются пересборкой. Тот же фреймворк даёт нам аккуратные URL вида /catalog/matrice/matrice-4t/, серверную генерацию мета-тегов и структурированных данных — всё, что нужно каталогу, который ищут в поиске, а не только листают.
У каждой комплектации свой набор полей: цена, наличие, время полёта, разрешение тепловизора, состав коробки, задачи, к которым она подходит. Типы описывают эту модель данных один раз, и дальше сборка сама ловит опечатку в характеристике или забытое поле в новом товаре. Для каталога, где ошибка в цифре стоит доверия покупателя, это дешёвая страховка.
Каталог — это плотный интерфейс: фильтры со счётчиками, бейджи «Хит» и «Новинка», таблицы сравнения наборов, характеристики в две колонки. Утилитарные классы позволяют собирать такие блоки быстро и держать единый ритм отступов и типографики на всех страницах, а не поддерживать разъезжающиеся стили в десятке отдельных файлов вёрстки.
Всё, что происходит на странице без перезагрузки, построено на React: пересчёт фасетного фильтра и счётчиков, сортировка выдачи, галерея кадров, переключение комплектаций в карточке, якорная навигация и формы заявок. Компонентная модель позволила один раз собрать эти элементы и переиспользовать их в каталоге, подборках, услугах и блоге без дублирования кода.
Как шла разработка
Разбор ассортимента
ГотовоНачали не с дизайна, а с товарной матрицы: две серии, 14 комплектаций, десятки характеристик и шесть типовых задач применения. Свели всё в одну таблицу и увидели главное — покупателю нужны два входа в каталог: от задачи и от модели. Эта развилка определила всю дальнейшую структуру сайта.
Модель данных и фильтры
ГотовоОписали типами каждую комплектацию и её признаки, а затем собрали фасетный фильтр так, чтобы он считал остатки выдачи до нажатия. Отдельно проверили сценарий «ничего не найдено»: комбинации, которые ведут в пустоту, теперь видны по нулевому счётчику заранее и не расстраивают посетителя после клика.
Карточка товара
ГотовоСобрали страницу аппарата по порядку вопросов покупателя и добавили то, чего обычно нет: таблицу сравнения комплектаций с явной доплатой за каждый набор. Ключевые параметры — время полёта, тепловизор, дальность, скорость — вынесли крупно наверх, а длинные характеристики убрали под якорную навигацию, чтобы страница не пугала объёмом.
Сервис и B2B
ГотовоВывели сервисный центр на уровень каталога: четыре услуги с отдельными страницами, критерии оценки Trade-In и четыре шага обмена. Для организаций описали условия закупки — счёт, договор, закрывающие документы, отгрузка со склада, персональный менеджер. Так сайт стал говорить не только «что купить», но и «что будет после покупки».
Контент и разметка
ГотовоНаполнили каталог и завели блог пилота с тремя рубриками — практические разборы вместо новостей компании. Параллельно разметили карточки Product, разделы BreadcrumbList, вопросы FAQPage и настроили мета-теги по шаблонам, чтобы каждая новая комплектация появлялась в поиске с корректным заголовком и описанием без ручной работы.
Проверка и запуск
ГотовоПеред публикацией прошли каталог насквозь: сверили цены, наличие и характеристики с данными клиента, проверили фильтр на пограничных комбинациях, отсмотрели карточки на смартфонах и убедились, что заявки и обратные звонки доходят до менеджера. Отдельно проверили скорость загрузки страниц с галереями — каталог дорогой техники не должен ждать. От старта до запуска ушло полтора месяца.
Результаты
У компании появился каталог, который работает как консультант. Посетитель заходит от своей задачи — инспекция, съёмка, поисковые работы — и получает короткий список подходящих аппаратов вместо всей линейки DJI. В карточке он видит не пять похожих названий, а один аппарат и наглядную таблицу наборов с явной доплатой за пульт, аккумуляторы и кейс. Вопрос «за что я переплачиваю» снимается до звонка менеджеру.
Сервис перестал быть сноской: ремонт, запчасти, прошивка и Trade-In с прозрачными критериями оценки стоят на сайте рядом с каталогом, а условия для организаций — счёт, договор, закрывающие документы — видны закупщику сразу. Мы уложились в полтора месяца и отдали клиенту статичный быстрый сайт на Next.js с разметкой Product и FAQPage. Для нас это пример каталога сложной техники, где подбор по задаче важнее плитки товаров.
14 комплектаций
двух серий в фасетном каталоге
6 подборок
вход в каталог от задачи, а не от модели
4 услуги
сервис и Trade-In на уровне каталога
1.5 месяца
от разбора ассортимента до запуска
Вопросы о проекте
Это осознанное решение под характер товара. Дрон за несколько сотен тысяч рублей подбирают под задачу: важно, хватит ли времени полёта, добьёт ли связь, нужен ли тепловизор. Менеджер подтверждает цену, наличие и комплектацию, организациям выставляет счёт и готовит договор. Вместо корзины на карточке работает заявка и «Купить в 1 клик» — покупатель не рискует оплатить не тот набор, а компания не получает отказов после отгрузки.
Фильтр собран по признакам, которыми покупатель описывает задачу: серия, тип работ, наличие тепловизора, наличие на складе, цена и время полёта. У каждого значения стоит счётчик, поэтому видно, сколько аппаратов останется после выбора, — пустая выдача перестаёт быть неприятным сюрпризом. Плюс сортировка по цене, новинкам и наличию: человек со срочной задачей и человек с бюджетом идут по каталогу разными маршрутами.
Потому что в наборах один и тот же аппарат, а разница в цене доходит до сотни тысяч рублей — за пульт, аккумуляторы, зарядный хаб и кейс. Если вывести комплектации отдельными товарами, посетитель видит почти одинаковые названия и уходит в сомнениях. Таблица показывает построчно, что лежит рядом с дроном в каждом наборе, и явную доплату к базовой цене. Выбор становится осознанным, а менеджеру не приходится объяснять разницу по телефону.
Мы завели шесть подборок под типовые работы: аэрофотосъёмка, профессиональная съёмка, мониторинг и инспекция, промышленные задачи, поисково-спасательные работы и техника с тепловизором. Каждая — отдельная страница со своим адресом и описанием, а не просто пресет фильтра. Так посетитель попадает на неё из поиска по формулировке своей задачи и сразу видит подходящие аппараты, а не разбирается в различиях линеек DJI самостоятельно.
Для организаций мы описали закупку так, как её видит снабженец: счёт и договор, закрывающие документы, отгрузка со склада в день оплаты, доставка по России с контролем груза, персональный менеджер и обслуживание парка техники. Условия вынесены в отдельный блок на главной и на страницу сотрудничества, поэтому закупщику не нужно выяснять их в переписке — он сравнивает поставщиков сразу по сайту.
Готовые платформы заточены под корзину, оплату и склад — а здесь сделка идёт через менеджера и счёт. Зато критичны скорость, структура URL и разметка: каталог дорогой техники находят через поиск и AI-ответы. Next.js отдаёт страницы как статику, позволяет описать нестандартную логику комплектаций и фасетов и даёт полный контроль над мета-тегами и структурированными данными Product, BreadcrumbList и FAQPage.
Товарные данные лежат в структурированном виде с типами: цена, наличие, характеристики, состав коробки, задачи применения. Правка значений и добавление новой комплектации не требуют вёрстки — страница, фильтры, счётчики, таблица наборов и разметка Product собираются автоматически. Сборка при этом валидирует данные: опечатка в характеристике или забытое поле в новом товаре не доедут до прода незамеченными.
Обсудим похожий проект?
Расскажите о задачах вашего бизнеса — предложим архитектуру и оценим сроки
Телеграмм
Делимся визуально привлекательными фрагментами наших последних веб-проектов.
ВКонтакте
Пишем о интересных технических решениях и вызовах в разработке.
MAX
Демонстрируем дизайнерские элементы наших веб-проектов.
TenChat
Деловые связи, кейсы и экспертные публикации.
Рассылка
© 2025-2026 МАЙПЛ. Все права защищены.