Разработка сайта с каталогом для производственной компании

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

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

Клиенту нужен был не классический интернет-магазин с кнопкой «Купить», а рабочий B2B-инструмент для продажи стройматериалов. В этой нише стоимость заказа зависит не только от выбранного товара, но и от длины листа, толщины, покрытия, цвета RAL и дополнительных параметров.
Важно было связать сайт с учетной системой, чтобы каталог, цены и вариации обновлялись автоматически. Ручное наполнение для такого ассортимента быстро приводит к ошибкам: часть позиций может быть недоступна, цена меняется, а менеджеру приходится перепроверять расчет вручную.
Отдельный сценарий — работа с заказом на разных устройствах. Покупатель может подобрать материалы на телефоне прямо на объекте, а затем открыть ту же корзину на компьютере в офисе, проверить смету и отправить заявку.
Поэтому мы спроектировали сайт как B2B-каталог с расчетом, общей корзиной, PDF-сметой и заявкой менеджеру без онлайн-оплаты. Такой формат лучше соответствует процессу продаж в строительной и производственной отрасли.

Сайт разработан на WordPress с кастомной темой и WooCommerce. Мы не ограничились стандартной логикой интернет-магазина: для карточек товара, корзины, расчета цены и обмена с 1С написали отдельные механики под бизнес-процесс клиента.
Ключевой элемент — калькулятор профнастила на Vue.js. Он подбирает доступные вариации по атрибутам, отключает невозможные комбинации, считает цену по длине и количеству, показывает расчет в погонных и квадратных метрах. Если цена по товару не передана, интерфейс корректно показывает формат «по запросу».
Цена позиции пересчитывается на сервере, а не только в браузере. Фактическая длина и параметры сохраняются вместе с товаром в корзине и затем попадают в заказ, чтобы менеджер видел точный состав заявки в админ-панели.
Каталог синхронизируется с 1С через кастомный REST API. Импорт товаров, цен, категорий и вариаций идет батчами, а структура «раздел — группа — подгруппа» разворачивается в категории WooCommerce. Контент-менеджеру не нужно вручную переносить ассортимент из учетной системы.
Для корзины реализовали быстрые AJAX-обновления без перезагрузки страницы, общую корзину по ссылке, экспорт в PDF-смету и B2B-checkout без онлайн-оплаты. Вместо лишних платежных шагов пользователь выбирает тип доставки: с манипулятором, без манипулятора или без доставки.

Ключевые решения
1. Калькулятор профнастила вместо обычной карточки товара
Для стройматериалов, которые продаются метрами, стандартная карточка WooCommerce недостаточна. Мы добавили расчет по длине, ширине, толщине, покрытию, цвету RAL и количеству. Покупатель может собрать несколько позиций одного товара с разными параметрами, а сайт сведет их в общий итог.
2. Интеграция сайта с 1С по REST API
Каталог и цены обновляются из учетной системы. Это снижает риск ручных ошибок и помогает поддерживать актуальность ассортимента, особенно когда у товара много вариаций и статусов.
3. Серверный пересчет цены
Расчет не хранится только на фронтенде. Данные о длине и выбранных параметрах передаются в корзину и заказ, а итоговая стоимость пересчитывается на сервере. Это важно для корректности заявки и работы менеджера.
4. Общая корзина по ссылке
Покупатель может собрать заказ на телефоне, отправить себе ссылку и открыть ту же корзину на другом устройстве. Для B2B-продаж это удобнее, чем начинать подбор заново.
5. PDF-смета для согласования
Корзину можно выгрузить в PDF. Такой файл удобно отправить коллегам, руководителю или снабжению перед финальным оформлением заявки.
6. B2B-checkout без лишней оплаты
Онлайн-оплата была не нужна, потому что доставка и итоговые условия обсуждаются с менеджером. Мы убрали лишние платежные шаги и оставили заявку с понятными параметрами заказа и типом доставки.