Как продавать премиальные рейки по всей РФ: создаем Headless-каталог с интерактивным калькулятором раскладки на Next.js

Делимся кейсом разработки интернет-магазина для бренда Acwood (производитель премиальных акустических и реечных панелей на фетровой основе). История о том, как уход от готовых шаблонов в сторону кастомного Headless-стека (Next.js + HostCMS) помог бизнесу автоматизировать сложную доставку крупногабарита и увеличить конверсию в заказы на 35%

Предыстория: Почему стандартные решения не работали

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

1. Сложность выбора товара: Клиенты не понимали, сколько реек им нужно купить под конкретные размеры своих стен (с учетом высоты потолков и технологических зазоров). Из-за этого менеджеры тратили часы на ручные расчеты в переписках.
2. Проблема «тяжелой» логистики: Панели — товар крупногабаритный и тяжелый. Рассчитать доставку нескольких паллет до Владивостока или Мурманска вручную на сайте было невозможно. Клиент видел корзину без цены доставки, пугался неопределенности и уходил.

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

Архитектура: Зачем здесь Headless (Next.js + HostCMS)

Для реализации проекта мы выбрали связку Next.js (фронтенд) и HostCMS (бэкэнд) по принципу Headless-архитектуры:

• Next.js отвечает за то, чтобы сайт «летал». Все переходы между страницами происходят мгновенно, без перезагрузок. Это критически важно для мобильного трафика.
• HostCMS скрыта от пользователя и работает как надежная база данных. В ней менеджеры управляют ценами, остатками на складах и заказами. Общение между фронтом и бэком идет по быстрому REST API.

Решение 1. Интерактивный калькулятор раскладки как лидогенератор

Главная фишка сайта — кастомный калькулятор подбора панелей. Мы спроектировали интерфейс, в котором покупатель:

1. Вводит высоту и ширину своей стены.
2. Выбирает длину панели (60 см или 280 см) и направление монтажа.
3. Система мгновенно выдает чертеж раскладки реек на стене и автоматически рассчитывает точную площадь покрытия и необходимое количество штук.

Больше никаких звонков менеджерам с вопросом «А сколько мне нужно реек на стену 3 на 2.5 метра?». Покупатель видит чертеж, нажимает кнопку «Добавить в корзину» и весь комплект товаров отправляется в заказ.

Решение 2. Борьба с брошенными корзинами и интеграция СДЭК

Чтобы решить проблему скрытой стоимости доставки, мы внедрили полноценный One Step Checkout (оформление заказа на одной странице) с интеграцией API службы доставки СДЭК:

1. Каждому товару в каталоге прописаны точный вес и габариты.
2. При добавлении товаров в корзину система «на лету» складывает их объемные и весовые характеристики.
3. При вводе адреса покупателем сайт отправляет запрос к API СДЭК и мгновенно выводит реальную стоимость доставки до двери или ближайшего пункта выдачи.

Покупатель сразу видит финальную сумму заказа с учетом доставки тяжелого груза и может моментально оплатить её картой или через СБП.

Результаты в цифрах

После запуска новой платформы мы замерили ключевые показатели эффективности бизнеса:

• 95+ баллов по Google PageSpeed: Сайт находится в зеленой зоне производительности на мобильных устройствах. Мгновенный отклик напрямую снизил показатель отказов.
• -35% брошенных корзин: Прозрачный автоматический расчет доставки СДЭК и покупка в один шаг убрали страх «скрытых платежей».
• Рост прямых продаж: Калькулятор раскладки стал самой посещаемой страницей каталога. Более половины всех заказов на сайте оформляются именно через него.

Главный вывод

Для премиального e-commerce стандартные шаблоны и конструкторы часто становятся бутылочным горлышком. Инвестиции в кастомный UX (интерактивные калькуляторы) и современный технологический стек (Headless Next.js) окупаются за счет автоматизации рутины менеджеров и резкого снижения числа брошенных корзин.

Если у вас похожий e-commerce проект и вы хотите ускорить его работу, внедрить кастомный интерактивный калькулятор или настроить бесшовную доставку — приходите к нам в бюро ONBD. Поможем спроектировать и реализовать под ключ.