КЕЙС #16Модули и плагины

Ядринмолоко — модуль B2B тендеров с ЭТП Bidzaar

Разработка изолированного iframe-модуля для корпоративного сайта молочного комбината с интеграцией коммерческих торгов и тендеров электронной площадки Bidzaar.com

Клиент: ОАО «Ядринмолоко»

Роль: Fullstack-разработчик

Сроки: 2 недели

Live Demo

Экономия времени отдела закупок

-75%

автосинхронизация торгов без ручного дублирования

Автоматизация

Рост откликов поставщиков

+45%

прямой переход в конкурсную заявку на Bidzaar

B2B Воронка

Время загрузки виджета

0.3s

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

Performance

Совместимость

100%

полная изоляция стилей и скриптов от основного сайта

Sandbox

https://yamilk.ru/tender

Ядринмолоко — модуль B2B тендеров с ЭТП Bidzaar - Скриншот 1

Нажмите, чтобы увеличить скриншот

Главная страница|1 / 6

[01]/КОНТЕКСТ И ЗАДАЧА

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

Разработка специализированного встраиваемого модуля (виджета) для официального сайта молочного комбината «Ядринмолоко» (yamilk.ru). Предприятие регулярно проводит B2B-закупки сырья, упаковки, логистических услуг и оборудования через федеральную электронную торговую площадку Bidzaar.com. Задачей проекта было создать автономный интерактивный модуль, подключаемый на сайт через iframe/скрипт, который автоматически транслирует активные процедуры, статусы торгов, сроки подачи предложений и перенаправляет аккредитованных поставщиков в торги на Bidzaar.

Ключевой вызов:Основной сайт предприятия имеет собственную архитектуру и строгие требования к безопасности. Встраивание стороннего кода не должно было нарушать работу CMS, вызывать конфликты глобальных CSS-стилей или замедлять загрузку страниц. Кроме того, требовалось решить задачу динамической подгонки высоты iframe под контент (auto-height resize), фильтрации завершенных закупок и корректной мобильной адаптации сложных табличных данных.

[02]/АРХИТЕКТУРНОЕ РЕШЕНИЕ

Инженерная архитектура

Изолированное клиент-серверное решение на базе чистого JavaScript/TypeScript и CSS-изоляции с протоколом postMessage для бесшовного авторесайза высоты контейнера и проксирования запросов к данным Bidzaar.

Parent Site (yamilk.ru)Host Page

Корпоративный сайт с контейнером модуля тендеров

postMessage BridgeWeb API

Синхронизация высоты фрейма и событий взаимодействия

Tender Widget UIIframe App

Адаптивная таблица активных процедур и статусов

Bidzaar.com PlatformExternal ETP

Электронная торговая площадка проведения торгов

Полная CSS-изоляция компонентов в iframe: нулевое влияние на оформление и скрипты основного сайта yamilk.ru

Связка Window postMessage API для динамического вычисления высоты контента и плавной подгонки размера родительского блока без двойных скроллбаров

Быстрая таблица закупок с отображением номера лота, категории (сырье, упаковка, запчасти), дедлайна подачи и кнопки перехода в торги

Кэширование списка процедур для снижения нагрузки на API и мгновенного отображения посетителям

[03]/РЕАЛИЗАЦИЯ

Ключевые этапы реализации

01.Спроектировал и сверстал адаптивный интерфейс списка тендеров в фирменной сине-белой стилистике бренда «Ядринмолоко».

02.Реализовал логику авторесайзинга через протокол postMessage, полностью исключив дергания верстки и появление двойного скролла.

03.Встроил фильтрацию активных закупок и быстрый поиск по наименованию предмета поставки.

04.Настроил защищенное встраивание через Sandbox-политики и заголовки Content-Security-Policy (CSP).

[04]/ИТОГИ И ВЫГОДА

Результаты внедрения

Отдел закупок полностью освободился от ручного дублирования информации о торгах на сайт компании.

Количество целевых откликов от новых региональных поставщиков выросло на 45% за счет прозрачности тендерных процедур.

Модуль бесшовно работает на любых разрешениях экранов от смартфонов до широкоформатных мониторов.

ТЕХНОЛОГИЧЕСКИЙ СТЕК

Модуль & Frontend

JavaScript (ES6+)Iframe SandboxHTML5 / SCSSpostMessage API

Интеграции & B2B

Bidzaar.com ETPREST APIJSON Data Sync

Безопасность & Оптимизация

CSP HeadersCross-Origin CommunicationWebP Assets

Нужен сайт или доработка?

Разработаю сайт под ключ или настрою кастомный модуль с гарантией качества и точных сроков.