B2B Коммерция 2026

Интерактивный конфигуратор поставок с генерацией PDF

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

#VanillaJS #TailwindCSS #HTML5 #REST_API #jsPDF
ГЛАВНЫЙ СКРИНШОТ ПРОЕКТА 1920x1080 (16:9)

Проблема клиента

Что нужно было исправить или создать с нуля

У клиента (крупного оптового поставщика) расчет стоимости заказов занимал слишком много времени. Менеджерам приходилось вручную комбинировать товары из разных прайс-листов (Excel), учитывать плавающие скидки за объем и отдельно считать логистику.

Из-за человеческого фактора часто возникали ошибки в расчетах, а процесс выдачи коммерческого предложения (КП) растягивался на несколько часов.

  • 01. Необходим инструмент для самостоятельного расчета дилерами на сайте.
  • 02. Логика должна учитывать несовместимые между собой позиции (ограничения).
  • 03. Итоговый результат должен генерироваться в PDF-файл в фирменном стиле компании.

Мое решение

Процесс разработки и внедрения

Я отказался от использования громоздких готовых плагинов и написал кастомный виджет на чистом JavaScript (Vanilla JS). Это обеспечило мгновенный отклик интерфейса без перезагрузки страниц и независимость от обновлений сторонних CMS.

Интерфейс был спроектирован пошаговым (Wizard), чтобы не перегружать пользователя огромным количеством полей. В качестве стилизации использован Tailwind CSS для быстрой компоновки адаптивной сетки.

ШАГ 1: ВЫБОР
КОМПЛЕКТАЦИИ
ШАГ 2: ГЕНЕРАЦИЯ
PDF ОТЧЕТА

Итоги работы

-80%
времени на подготовку КП
Было 2 часа ➔ стало 5 минут
0 шт
ошибок из-за человеческого фактора
Логика калькулятора блокирует несовместимости
Скрипт был успешно интегрирован на корпоративный сайт клиента за 1 день. Дилеры получили удобный инструмент, а отдел продаж разгрузился от рутины, сфокусировавшись на закрытии сделок.
Следующий шаг

Понравилось решение?

Если вам нужен похожий функционал, калькулятор, парсер или нестандартная веб-система: давайте обсудим вашу задачу.

Смотреть другие кейсы