Як уникнути конфліктів кешування при інтеграції Vue?

Використовуйте окрему точку монтування та підключайте Vue-збірку через Bitrix\Main\Page\Asset::addJs() тільки на потрібних сторінках. Уникайте глобальних стилів, інкапсулюйте CSS через scoped.

Скільки часу займає розробка одного модального вікна?

Типове вікно з формою – 1-2 дні, система з 3-5 пов'язаних модалей – 3-5 днів, багатокрокова форма з інтеграцією CRM – 5-10 днів. Терміни залежать від складності валідації та дизайну. Вартість розробки одного вікна — від $200.

Чи можна використовувати Vue 3 у старих версіях Бітрікс?

Так, Vue 3 працює на будь-якій версії Бітрікс, оскільки монтується ізольовано. Потрібно лише переконатися в підтримці ES2015+ у цільових браузерах. Для IE11 потрібен поліфіл.

Як обробляти помилки при відправленні форми через AJAX?

У компоненті обробляється відповідь з HTTP-статусом. При помилці показується повідомлення в модалі, форма не закривається. Ми також реалізуємо retry-механізм та логування в JavaScript console.

Як уникнути конфліктів кешування при інтеграції Vue?

Використовуйте окрему точку монтування та підключайте Vue-збірку через Bitrix\Main\Page\Asset::addJs() тільки на потрібних сторінках. Уникайте глобальних стилів, інкапсулюйте CSS через scoped.

Скільки часу займає розробка одного модального вікна?

Типове вікно з формою – 1-2 дні, система з 3-5 пов'язаних модалей – 3-5 днів, багатокрокова форма з інтеграцією CRM – 5-10 днів. Терміни залежать від складності валідації та дизайну. Вартість розробки одного вікна — від $200.

Чи можна використовувати Vue 3 у старих версіях Бітрікс?

Так, Vue 3 працює на будь-якій версії Бітрікс, оскільки монтується ізольовано. Потрібно лише переконатися в підтримці ES2015+ у цільових браузерах. Для IE11 потрібен поліфіл.

Як обробляти помилки при відправленні форми через AJAX?

У компоненті обробляється відповідь з HTTP-статусом. При помилці показується повідомлення в модалі, форма не закривається. Ми також реалізуємо retry-механізм та логування в JavaScript console.

Vue.js модальні вікна для Бітрікс: досвід інтеграції

Q: Як передати дані з Бітрікс у Vue-компонент?

Дані передаються через data-атрибути HTML-елемента або через глобальний об'єкт window.BX_STATE, який формується в result_modifier.php. Пряма PHP-інтерполяція в JS порушує кешування компонента.

Наша компанія займається розробкою, підтримкою та обслуговуванням рішень на Бітрікс та Бітрікс24 будь-якої складності. Від простих односторінкових сайтів до складних інтернет-магазинів, CRM систем з інтеграцією 1С та телефонії. Досвід розробників підтверджено сертифікатами від вендора.

8+Років на ринкудетальніше 900+Реалізованих проектівдетальніше 100+Розробників у штатідетальніше 19+Партнерівдетальніше

Послуги, які ми пропонуємо

Показано 1 з 1Усі 1626 послуг

Vue.js модальні вікна для Бітрікс: досвід інтеграції

Середній

~1-2 тижні

Часті запитання

Наші компетенції:

Безкоштовна консультація

Замовте безкоштовну консультацію, якщо у вас є питання. Профільний спеціаліст вас проконсультує.

Розрахунок вартості

Якщо ви знаєте, що вам потрібно розробити, або у вас вже є готове технічне завдання.

Етапи розробки

Останні роботи

Розробка сайту компанії B2B ADVANCE
1357
Розробка веб-сайту для компанії ФІКСПЕР
943
Розробка на базі Бітрікс, Бітрікс24, 1С для компанії Development of an Online
693
Розробка на базі 1С Підприємство для компанії МИРСАНБЕЛ
829
Розробка сайту на CRM Бітрікс24 для компанії DOLBIMBY
731
Розробка на базі Бітрікс24 для компанії ТЕХНОТОРГКОМПЛЕКС
1074

Показати більше робіт

Ми спеціалізуємося на створенні кастомних модальних вікон на Vue.js для 1С-Бітрікс, включаючи pop-up, реактивні форми, AJAX-запити, багатокрокові форми, з оптимізацією продуктивності та SEO. Ваша форма зворотного зв'язку на Бітрікс відкривається в штатному BX.PopupWindow? При спробі додати багатокрокову логіку або асинхронне підвантаження фотографій ви швидко впираєтесь в обмеження вбудованого рендерингу — DOM перестворюється при кожному відкритті, події не успадковуються, налагодження перетворюється на квест. Розробники часто намагаються розширити BX.PopupWindow через jQuery-маніпуляції з контентом, але це веде до крихкого коду та конфліктів з кешуванням компонентів.

Ми віддаємо перевагу іншому шляху: ізольоване Vue-застосунок, яке монтується в точці виклику та керує всіма станами реактивно. Накопичений досвід — понад 30 проєктів з інтеграцією Vue.js в Бітрікс — від простих форм до складних багатокрокових кошиків. Такий підхід скорочує час розробки на 40% (у 2 рази швидше за jQuery) і спрощує підтримку. Ми гарантуємо якість та надаємо підтримку на всіх етапах. Наш досвід підтверджений сертифікатами Vue.js та Бітрікс.

Як влаштована архітектура модального вікна на Vue.js в Бітрікс

Інтеграція будується через точку монтування в шаблоні компонента. Замість глобальної ініціалізації застосунку ми монтуємо ізольований екземпляр на конкретний елемент:

// local/templates/main/components/project/modal-form/template.php
<div id="vue-modal-root"
     data-form-id="<?= $arResult['FORM_ID'] ?>"
     data-endpoint="<?= $arResult['AJAX_URL'] ?>">
</div>

<script>
BX.ready(function() {
    const { createApp } = Vue;
    const app = createApp(ModalApp, {
        formId: document.getElementById('vue-modal-root').dataset.formId,
        endpoint: document.getElementById('vue-modal-root').dataset.ajaxEndpoint
    });
    app.mount('#vue-modal-root');
});
</script>

Дані з Бітрікса передаються через data-* атрибути або через глобальний об'єкт window.BX_STATE, який формується в result_modifier.php. Пряма PHP-інтерполяція в JS-коді заборонена — вона порушує кешування компонента. Структура Vue-компонента модального вікна включає:

ModalWrapper.vue — обгортка з оверлеєм, керує z-index, блокуванням скролу, обробкою клавіші Escape
ModalContent.vue — слот для контенту, анімації входу/виходу через Transition
ModalTrigger.vue — кнопка-тригер, емітує подію відкриття через provide/inject або Pinia store

Для керування станом кількох модалей на одній сторінці ми використовуємо useModalStore на Pinia — стек відкритих модалей, щоб закриття верхньої не закривало нижню.

Чому Vue.js краще jQuery для модальних вікон в Бітрікс?

Порівняння ключових параметрів:

Параметр	BX.PopupWindow + jQuery	Vue.js
Реактивний стан	Немає (вручну через DOM)	Є (data, computed)
Валідація форм	Зовнішня бібліотека	VeeValidate або computed
Анімації	CSS-класи вручну	Transition
Кешування компонента	Працює погано	Працює штатно (ізоляція)
Час розробки форми	3-5 днів	1-2 дні (у 2-3 рази швидше)
Продуктивність	Нижча на 30%	Вища на 50%

Ми пройшли шлях від jQuery до Vue на десятках проєктів — різниця в продуктивності та часі підтримки очевидна.

Які типові сценарії ми вирішуємо?

Форма зворотного зв'язку з валідацією. Поля валідуються реактивно через VeeValidate. Після відправлення AJAX-запит на бітріксовий обробник через bitrix:form.result.new. Відповідь обробляється в компоненті — перезавантаження сторінки не відбувається.

Модальний кошик. Користувач додає товар, в модалі показується актуальний стан кошика. Дані отримуємо через REST API Бітрікса: /api/v1/sale/basket/ або кастомний AJAX-контролер на Bitrix\Main\Engine\Controller. Кількість оновлюється реактивно.

Галерея зображень / lightbox. Vue-компонент отримує масив зображень через data-images атрибут або через попередньо завантажений JSON. Використовуємо Swipe-жести через бібліотеку vue-use/useSwipe та клавіатурну навігацію через onKeydown.

Багатокрокові форми. Кроки — окремі Vue-компоненти, стан зберігається в батьківському setup(). Прогрес-бар реагує на поточний крок. Всі дані накопичуються і відправляються єдиним запитом на останньому кроці.

Кейс з нашої практики: модальна форма заявки на промо-сторінці нашого клієнта

Промо-сайт одного з клієнтів: кілька CTA-кнопок на сторінці, кожна відкриває одну й ту саму форму, але з різним utm_source та попередньо заповненим полем «Звідки ви про нас дізналися». Стандартне рішення через BX.PopupWindow вимагало б JS-маніпуляцій з DOM при кожному відкритті. Ми вчинили інакше: одна точка монтування в , Vue-компонент LeadModal приймає props через eventBus. Кнопки диспатчать кастомну подію:

document.querySelectorAll('[data-modal-trigger]').forEach(btn => {
    btn.addEventListener('click', () => {
        window.dispatchEvent(new CustomEvent('open-lead-modal', {
            detail: { source: btn.dataset.source, productId: btn.dataset.productId }
        }));
    });
});

Vue-компонент слухає подію через onMounted:

window.addEventListener('open-lead-modal', (e) => {
    formData.source = e.detail.source;
    formData.productId = e.detail.productId;
    isOpen.value = true;
});

Форма відправляє дані в бітріксовий модуль crm через REST API (crm.lead.add), статус записується в b_user_field. Розробка зайняла 3 дні замість тижня на jQuery-варіанті — економія понад 50%. «Раніше модалка відкривалася із затримкою, тепер — миттєво, і код став набагато чистішим» — відгук клієнта.

Як ми забезпечуємо продуктивність Vue-модалок?

Модальні вікна рендеряться тільки при відкритті — використовуємо v-if, а не v-show, щоб DOM не роздувався. Для важких компонентів (відеоплеєр, карта) застосовуємо defineAsyncComponent:

const HeavyMap = defineAsyncComponent(() => import('./HeavyMap.vue'));

Чанк завантажується тільки тоді, коли користувач відкриває модал. Бітрікс через AssetManager підключає збірку Vue тільки на потрібних сторінках:

\Bitrix\Main\Page\Asset::getInstance()->addJs('/local/dist/modal-bundle.js');

SEO модальні вікна не зачіпають — контент всередині них пошуковики не індексують як основний. Якщо вміст важливий для пошуку, ми дублюємо посилання або структуровані дані в