Создали B2B-каталог стройматериалов на WordPress и WooCommerce: калькулятор профнастила, синхронизация с 1С, PDF-смета и удобная заявка для отдела продаж.

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

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

Результат: сайт работает как инструмент продаж: покупатель собирает смету по своим размерам, переносит корзину между устройствами и отправляет заявку менеджеру, а каталог и цены обновляются из 1С.

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

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

Корзина B2B-каталога с расчетом позиций и PDF-сметой

Главная страница интернет-каталога профнастила и металлочерепицы

Адаптивный дизайн сайта для заказа стройматериалов с телефона

Разработка сайта на WordPress и WooCommerce с интеграцией 1С

HTML5 SCSS jQuery JavaScript PHP REST API GSAP WooCommerce Vue.js ACF Flexible Content Swiper Fancybox jsPDF html2canvas Prepros Git/GitLab SFTP Яндекс.Карты

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

Карточка товара с калькулятором профнастила по длине и цвету RAL

PDF-смета и оформление заявки в B2B-каталоге стройматериалов

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

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

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

Проект хорошо показывает экспертизу JustBusiness в разработке интернет-каталогов, интеграции сайта с 1С, кастомизации WooCommerce и создании калькуляторов под нестандартные товары.

Сайт разработан на WordPress с кастомной темой и WooCommerce. Мы не ограничились стандартной логикой интернет-магазина: для карточек товара, корзины, расчета цены и обмена с 1С написали отдельные механики под бизнес-процесс клиента.

Калькулятор на Vue.js

Ключевой элемент — калькулятор профнастила на Vue.js. Он подбирает доступные вариации по атрибутам, отключает невозможные комбинации, считает цену по длине и количеству, показывает расчет в погонных и квадратных метрах. Если цена по товару не передана, интерфейс корректно показывает формат «по запросу».

Расчет по параметрам

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

Синхронизация с 1С

Каталог синхронизируется с 1С через кастомный REST API. Импорт товаров, цен, категорий и вариаций идет батчами, а структура «раздел — группа — подгруппа» разворачивается в категории WooCommerce. Контент-менеджеру не нужно вручную переносить ассортимент из учетной системы

Экспорт сметы

Для корзины реализовали быстрые AJAX-обновления без перезагрузки страницы, общую корзину по ссылке, экспорт в PDF-смету и B2B-checkout без онлайн-оплаты. Вместо лишних платежных шагов пользователь выбирает тип доставки: с манипулятором, без манипулятора или без доставки.

Для стройматериалов, которые продаются метрами, стандартная карточка WooCommerce недостаточна. Мы добавили расчет по длине, ширине, толщине, покрытию, цвету RAL и количеству. Покупатель может собрать несколько позиций одного товара с разными параметрами, а сайт сведет их в общий итог.

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

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

Покупатель может собрать заказ на телефоне, отправить себе ссылку и открыть ту же корзину на другом устройстве. Для B2B-продаж это удобнее, чем начинать подбор заново.

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

Онлайн-оплата была не нужна, потому что доставка и итоговые условия обсуждаются с менеджером. Мы убрали лишние платежные шаги и оставили заявку с понятными параметрами заказа и типом доставки.

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

Задача проекта

UI/UX дизайн