Разработка Headless-интернет-магазина премиальных акустических панелей Acwood

Acwood: Премиальные акустические панели для современных интерьеров

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

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

Стратегия миграции и задачи Headless-разработки

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

• Разработка гибкой визуальной части (фронтенда) на Next.js с мгновенной отрисовкой страниц (SSR/ISR) для обеспечения высочайших показателей Core Web Vitals.
• Проектирование Headless-архитектуры: вынос административной части и базы данных товаров в API HostCMS, при этом пользователь взаимодействует со сверхбыстрым React-интерфейсом.
• Разработка умного калькулятора раскладки для расчёта количества панелей под размеры стен клиента.
• Настройка бесшовной интеграции платежных систем и логистических сервисов для автоматического расчета доставки крупногабаритных грузов.

Реализованные решения: калькулятор раскладки и кастомная корзина

Для проекта Acwood мы разработали кастомные интерфейсные модули, которые превращают сложный выбор строительных материалов в простой и понятный процесс:

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

2. Детальная карточка товара. Премиальный дизайн реечных панелей подчеркивается качественным визуалом, возможностью выбора длины (60 см / 280 см) и цвета основы.

3. Галерея идей для вдохновения. Интегрирован раздел с реализованными проектами в интерьере. Пользователь может вдохновиться готовым решением и перейти к покупке использованных панелей в один клик.

4. Кастомное оформление заказа. Мы реализовали быстрое оформление заказа на одной странице, интегрированное с API службы доставки СДЭК для автоматического расчета веса, объема груза и стоимости доставки до двери или пункта выдачи. Платежи принимаются через надежный интернет-эквайринг.

Современный Headless-стек: Next.js + HostCMS

Использование Headless-подхода позволило нам объединить лучшие качества обеих платформ:

• Интерфейс (Next.js): Обеспечивает мгновенные переходы между страницами каталога, плавные анимации (View Transitions) и идеальное SEO-индексирование благодаря серверному рендерингу (SSR).
• Панель управления (HostCMS): Выступает в роли надежного бэкэнда для хранения каталога, цен, остатков на складах и интеграции с ERP-системами. Обмен данными происходит по защищенному REST API.

Результаты запуска и коммерческая эффективность

Переход на Headless-архитектуру и запуск нового интернет-магазина помогли бренду Acwood выйти на федеральный уровень продаж.

Итоги проекта:

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