Золотой сертифицированный партнер ООО «1С-Битрикс»
Эти маленькие «печеньки» (файлы cookie) помогают сайту запомнить ваши настройки, например, язык или выбранные параметры. Так, при каждом новом посещении вы будете чувствовать себя как дома. Примите их, чтобы сделать сайт своим!
OK

Динамические разделы в карточке сделки Битрикс24 через JS

Оптимизация планирования посменных дежурств и обработки входящих заявок для агентства элитной недвижимости с помощью бизнес-процессов Битрикс24

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

Администраторы Битрикс24 в B2B-компаниях сталкиваются с проблемой перегруженных карточек сделок. Особенно остро это проявляется в проектных продажах и госзаказах, где менеджеры работают с десятками полей и разделов. Александр Федяков реализовал решение, которое динамически скрывает раздел «Продукция конкурента» в зависимости от значения поля «Да/Нет» — без привлечения разработчиков и за 30 минут работы с AI-помощником.

Проблема: перегруженная карточка сделки

В компаниях, работающих с госзаказами и проектными продажами, карточка сделки содержит множество специфических данных. Один из таких блоков — информация о продукции конкурентов, которая запроектирована в тендере или спецификации.

Проблема возникала в двух случаях:

  •  Когда в проекте нет запроектированной продукции конкурентов — раздел занимает место и отвлекает менеджера
  •  Когда продукция конкурента есть — раздел критически важен для подготовки коммерческого предложения

Стандартные инструменты Битрикс24 не позволяют условно показывать разделы в зависимости от значения полей. Александр поставил задачу: сделать карточку адаптивной, чтобы раздел появлялся только при необходимости.

Исследование возможности через консоль браузера

Первый этап — проверка технической реализуемости. Александр не был уверен, что можно управлять видимостью разделов через JavaScript. Он начал с простого эксперимента прямо в браузере.

Процесс исследования:

  1. Открыл карточку сделки в Битрикс24
  2. Через Инспектор элементов (F12) изучил DOM-структуру страницы
  3. Нашел класс раздела «Продукция конкурента»
  4. Прямо в консоли браузера прописал CSS-правило `display: none` для этого класса
  5. Убедился, что раздел скрывается без побочных эффектов

«Я исследовал страничку. Получил класс и просто прямо в Браузере прописал там дисплей»

Этот подход позволил за 5-10 минут подтвердить: техническое решение возможно, можно переходить к написанию кода.

Генерация кода через Gemini AI

После подтверждения концепции Александр обратился к AI-помощнику Gemini. Задача формулировалась максимально конкретно.

Входные данные для AI:

  • ID поля «Продукция конкурента запроектирована» (поле типа Да/Нет)
  • Класс раздела, который нужно скрывать
  • Логика: если поле = «Нет», раздел скрыт; если «Да» — показан

Процесс работы с AI:

  1. Александр передал в Gemini структуру DOM и требования
  2. AI сгенерировал JavaScript-код
  3. Код проверили в **консоли браузера** на реальной карточке сделки
  4. После подтверждения работоспособности код перенесли в файловую структуру Битрикс24

Время от запроса к AI до рабочего решения — около 30 минут.

«Просто пошел в Гемини, говорю, слушай вот поле. Вот его ID, вот сектор, который мне нужно скрыть, вот его ID. Давай, пожалуйста»

Техническая реализация: JS-скрипт в папке /local/

Готовый код разместили в директории **/local/** на сервере Битрикс24. Это стандартное место для кастомных скриптов, которые не затираются при обновлениях системы.

Ключевые компоненты кода:

  •  Слушатель события — отслеживает изменение значения поля с ID конкурентной продукции
  •  Условная логика — проверяет значение: «Да» или «Нет»
  •  Управление классом — добавляет или убирает CSS-класс `display: none` у раздела

Параметры, которые настраиваются:

  •  Код поля (ID кастомного поля типа Да/Нет)
  •  Класс раздела (берется из DOM-структуры карточки)

Скрипт работает в реальном времени: менеджер меняет значение поля в карточке → раздел мгновенно появляется или скрывается без перезагрузки страницы.

Масштабирование решения на другие поля

Александр отметил, что подход можно применить к любым полям и разделам карточки сделки.

Сценарии масштабирования:

1. Множественные условия

  • Скрывать раздел «Логистика» если поле «Самовывоз» = «Да»
  • Показывать блок «Монтаж» только при выборе определенных категорий товаров

2. Сложные условия

  • Комбинация нескольких полей: показывать раздел только если поле А = «Да» И поле Б = значение X
  • Зависимость от стадии сделки: разные разделы на разных этапах воронки

3. Другие типы полей

  • Текущая реализация работает с полем **Да/Нет**
  • Логику можно адаптировать под списки, числовые поля, строковые значения

«По большому счету можно масштабировать эту историю на какие-то другие поля»

Преимущество подхода — не требуется разработчик для каждого нового условия. Администратор Битрикс24 с базовыми знаниями JS может дублировать решение за 15-20 минут.

Практическое применение в гос заказах

Решение особенно актуально для компаний, участвующих в тендерах и работающих с проектной документацией.

Типичный сценарий использования:

Этап 1: Анализ тендерной документации  

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

Этап 2: Заполнение карточки сделки

  •  Если в спецификации запроектирована продукция конкурента → менеджер ставит «Да» в соответствующем поле
  •  Раздел «Продукция конкурента» автоматически появляется
  •  Менеджер заполняет: модели, артикулы, технические характеристики конкурентных позиций

Этап 3: Работа со сделками без конкурентов

— Если спецификация открытая или компания — единственный поставщик → поле остается в значении «Нет»
— Раздел скрыт, карточка не перегружена лишней информацией

Результат для отдела продаж:

  •  Менеджеры видят только релевантную информацию
  •  Карточки сделок стандартизированы, но адаптивны
  •  Снижается риск ошибок при заполнении (нет путаницы с пустыми разделами)

Преимущества подхода без разработчиков

Решение Александра демонстрирует новый подход к кастомизации Битрикс24: администратор + AI вместо штатного программиста.

Ключевые преимущества:

  1. Скорость реализации  

От идеи до внедрения — 30 минут. Стандартная разработка через подрядчика заняла бы 3−5 дней (ТЗ → разработка → тестирование → внедрение).

2. Нулевая стоимость  

Не требуется бюджет на разработку. Не нужен доступ к коммерческим API или платным модулям.

3. Гибкость изменений  

Администратор может самостоятельно адаптировать логику. Не нужно ждать разработчика для правок.

4. Прозрачность решения  

Код понятен, лежит в /local/, легко модифицируется. Нет зависимости от внешних подрядчиков.

5. Воспроизводимость  

Методика применима к любым компаниям на Битрикс24. Не требует специфических настроек портала или прав доступа.

Этот кейс показывает, как AI-инструменты меняют роль администратора Битрикс24: из настройщика готовых функций — в создателя кастомных решений.
Заключение
Динамическое управление видимостью разделов в карточке сделки решает проблему перегруженного интерфейса без потери функциональности. Александр Федяков продемонстрировал, что администратор Битрикс24 с помощью AI может реализовать кастомизацию уровня разработки за 30 минут.

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

Компании получают гибкий инструмент без затрат на разработку и зависимости от подрядчиков.
Made on
Tilda