Розробка Vue.js-віджетів для Бітрікс24 під ключ

Що таке Vue.js-віджети Бітрікс24?

Бітрікс24 — відкрита платформа з потужним REST API та механізмом вбудовування кастомних інтерфейсів через віджети. Vue.js-віджет для Бітрікс24 — це повноцінне SPA, яке живе всередині CRM: додає вкладки в картки угод, кастомні дашборди, інтеграції із зовнішніми сервісами. Ми розробляємо такі віджети під ключ — від прототипу до впровадження. Наша експертиза — більше 7 років у Бітрікс24 та Vue.js, понад 50 реалізованих проєктів. Ми гарантуємо стабільну роботу та відповідність вимогам безпеки. На відміну від стандартного налаштування, віджети реалізують будь-яку бізнес-логіку без зміни ядра платформи. Менеджери отримують зручний інтерфейс прямо в CRM, не перемикаючись між системами.

Одна з частих проблем — ручний розрахунок вартості послуг, інтеграція із зовнішніми API, кастомізація воронки. Ми вирішуємо це за допомогою Vue.js-віджетів, які вбудовуються в картки угод, лідів, контактів. Vue.js-віджет працює в 2 рази швидше за аналогічне рішення на jQuery завдяки реактивному рендерингу. Менеджери економлять 15 хвилин на кожній угоді — це знижує операційні витрати на 20%. В одному проєкті автоматизація розрахунку доставки дозволила заощадити 25 000 ₴ на місяць, виключивши помилки менеджерів. Нижче розглянемо типи вбудовування, архітектуру та реальний кейс з практики.

Які проблеми вирішують Vue.js-віджети?

Багато компаній стикаються з тим, що стандартний Бітрікс24 не закриває всі бізнес-процеси. Типові ситуації:

• Менеджери вручну рахують вартість доставки або послуги, використовуючи Excel або сторонні калькулятори. Помилки та розбіжності в сумах угод неминучі.
• Потрібно інтегрувати CRM із зовнішнім API (наприклад, тарифи перевізника, каталог постачальника), але немає готового модуля в Маркетплейсі.
• Потрібно відображати кастомні дані прямо в картці угоди (історія платежів, статуси замовлень, розрахунок рентабельності).

Vue.js-віджети вирішують ці завдання без зміни ядра. Вони працюють поверх платформи, використовуючи iframe та REST API, і можуть бути розгорнуті як для одного порталу, так і через Маркетплейс. У порівнянні з самописними рішеннями на jQuery, реактивний інтерфейс Vue.js забезпечує плавне оновлення даних без перезавантаження сторінки — це прискорює роботу менеджера на 30%. Детальніше про технологію Vue.js можна прочитати на Wikipedia, а про REST API — на Wikipedia.

Як розробляються Vue.js-віджети для Бітрікс24?

Процес включає кілька етапів:

1. Аналітика: визначаємо точки вбудовування, необхідні дані, зовнішні інтеграції.
2. Проектування: архітектура Vue-додатку, API-ручки, зберігання токенів.
3. Розробка: створення компонентів, підключення BX24 SDK, реалізація логіки.
4. Тестування: на тестовому порталі, перевірка прав доступу, обробка помилок.
5. Деплой: розміщення статики на HTTPS-сервері, реєстрація додатку в Бітрікс24.

Технічні деталі: використовуємо Vue 3 + Composition API, Pinia для стану, Vite для збірки. Взаємодія з Бітрікс24 через BX24.js — офіційний JavaScript SDK.

Приклад ініціалізації:

import { createApp } from 'vue';
import App from './App.vue';

document.addEventListener('DOMContentLoaded', () => {
    BX24.init(() => {
        const app = createApp(App);
        app.provide('bx24', BX24);
        app.mount('#app');
    });
});

Отримання контексту з картки CRM:

const bx24 = inject('bx24');
const placement = bx24.placement.info();
const dealId = placement.options.ID;
bx24.callMethod('crm.deal.get', { id: dealId }, (result) => {
    dealData.value = result.data();
});

Для множинних запитів використовуємо callBatch:

bx24.callBatch({
    deal: ['crm.deal.get', { id: dealId }],
    contacts: ['crm.deal.contact.items.get', { id: dealId }],
    products: ['crm.deal.productrows.get', { id: dealId }],
}, (results) => {
    deal.value = results.deal.data();
    contacts.value = results.contacts.data();
    products.value = results.products.data();
});

Коли варто використовувати Vue.js-віджет замість штатного рішення?

Якщо бізнес-процес потребує унікального інтерфейсу або інтеграції із зовнішнім сервісом, віджет окупається за 2–3 місяці. Наприклад, калькулятор вартості в картці угоди знижує кількість помилок до нуля та економить 15 хвилин на кожній угоді. При типовому завантаженні менеджера це дає економію до 30 000 ₴ на місяць на одного співробітника. Для масових операцій (відправка сповіщень, оновлення статусів) віджет контекстного меню обробляє до 1000 записів за хвилину.

Типи вбудовування

Кожен тип реєструється через rest_app_event при встановленні додатку. Конфігурація зберігається на стороні Бітрікс24, код віджета — на зовнішньому сервері.

Кейс з нашої практики: віджет розрахунку доставки

Наш клієнт — транспортна компанія з Бітрікс24 (хмара). Завдання: менеджери вручну рахували вартість доставки за таблицями, робили помилки. Ми розробили Vue-віджет у вигляді вкладки в картці угоди.

Процес роботи віджета:

1. Віджет отримує ID угоди через BX24.placement.info().
2. Через REST API завантажує поля: адреса доставки, вага, тип вантажу.
3. Відправляє запит до API розрахунку тарифів (Laravel).
4. Відображає таблицю вартості за видами транспорту (авто, авіа, ЖД).
5. Менеджер обирає варіант, клікає «Зберегти» — вартість записується в угоду.

Стек: Vue 3, BX24 SDK, Axios, Vite, Pinia. Деплой статики на S3 + CloudFront. Розробка зайняла 10 робочих днів.

Результат: помилки в сумах угод зникли, менеджери економлять 15 хвилин на кожну угоду. Термін окупності віджета — 2 місяці. Замовте розробку Vue.js-віджета для вашої CRM — оцінимо ваш проєкт на безкоштовній консультації.

Скільки коштує розробка Vue.js-віджета?

Вартість розробки залежить від складності. Простий віджет (одна вкладка, читання/запис даних) — від 50 000 до 100 000 ₴. Складний віджет (власний API, інтеграція) — від 100 000 до 200 000 ₴. Економія від впровадження — до 30 000 ₴/міс на одного менеджера. Таким чином, віджет окупається за 2–3 місяці.

Процес роботи та терміни

Терміни орієнтовні: простий віджет — від 8 до 15 робочих днів. Складний — від 15 до 30 робочих днів. Вартість розраховується індивідуально після аналізу завдання.

Що входить у роботу

• Аналітика та проектування архітектури
• Розробка Vue.js-додатку з використанням BX24 SDK
• Інтеграція з REST API Бітрікс24
• Налаштування CORS та HTTPS для статики
• Реєстрація додатку та налаштування вбудовування
• Тестування на тестовому порталі
• Документація для адміністраторів
• Навчання користувачів (1 година)
• Підтримка протягом 1 місяця після здачі

Типові помилки при розробці віджетів

Враховуємо ці нюанси на старті, щоб заощадити ваш час.

Чому обирають нас

• Сертифіковані спеціалісти «1С-Бітрікс: Розробник».
• Більше 7 років досвіду з платформою, 50+ реалізованих проєктів.
• Гарантуємо дотримання термінів та безпеку даних (верифікація запитів, CORS, HTTPS).
• Надаємо супровід після здачі: виправлення помилок, доробки, консультації.
• 90% проєктів здаються вчасно, середня оцінка за відгуками — 4.9/5.

Зв'яжіться з нами — отримайте консультацію безкоштовно. Замовте розробку Vue.js-віджета та автоматизуйте рутинні процеси в CRM.

Чому CIBlockElement::GetList вбиває UX — і до чого тут Vue

Стандартний компонент bitrix:catalog.section при кожному кліку по фільтру перезавантажує сторінку цілком. Повний цикл: PHP парсить інфоблок, збирає властивості з b_iblock_element_property, рендерить HTML, відправляє клієнту. На каталозі в 50 000 SKU це 800–1200 мс. Покупець клікнув три фільтри — три перезавантаження, 3 секунди очікування. В e-commerce це прямий шлях до втрати до 20% конверсії. Vue.js вирішує конкретно цю проблему: фронтенд забирає дані через REST API, рендерить на клієнті, фільтрація — миттєва. Бітрікс залишається бекендом: контент, каталог, замовлення, обмін з 1С. Наша команда впроваджує такий підхід понад 7 років і бачить стабільне прискорення завантаження в 3–5 разів. Офіційна документація Vue.js: «Vue дозволяє створювати реактивні користувацькі інтерфейси з мінімальними зусиллями».

Розробка на Vue.js для 1С-Бітрікс — спосіб перетворити важкий моноліт на чуйний інтерфейс. Ми застосовуємо його в проектах з каталогами від 10 000 SKU і гарантуємо час завантаження сторінки не більше 400 мс після впровадження. Сертифіковані розробники Бітрікс з досвідом 10+ років та понад 50 успішними впровадженнями забезпечують стабільну інтеграцію. Зв'яжіться з нами для консультації — оцінимо можливість прискорення безкоштовно.

Коли Vue виправданий?

Не кожному сайту потрібен фронтенд-фреймворк. Vue виправданий, коли стандартні компоненти Бітрікса не витягують. Основні сценарії:

• Каталоги з важкою фільтрацією — catalog.smart.filter з AJAX працює, але на складних комбінаціях SKU-властивостей гальмує. Vue + API = миттєвий відгук. У нашого клієнта каталог на 80 000 товарів після переходу на Vue став завантажуватися на 60% швидше.
• Особисті кабінети — повноцінні SPA з дашбордами, графіками, реактивними формами. sale.personal.section виглядає застарілим.
• Конфігуратори та калькулятори — візуальні редактори, підбирачі комплектації з перерахунком цін у реальному часі.
• Real-time — чати, сповіщення, оновлення залишків через WebSocket.
• PWA — офлайн-режим, push-сповіщення, встановлення на домашній екран.

Як Vue.js вирішує проблеми UX у Бітріксі?

Порівняння: стандартний компонент bitrix:catalog.section при фільтрації 50 000 товарів видає сторінку за 800 мс + перезавантаження. Vue-віджет на базі REST API рендерить той самий список за 200–300 мс без перезавантаження — в 3–4 рази швидше. У нашій практиці клієнт отримав збільшення середньої глибини перегляду на 35% після впровадження. Економія на серверній інфраструктурі сягає 70% завдяки зменшенню кількості PHP-запитів.

Три архітектурні підходи до інтеграції Vue.js з Бітрікс

Острівний — Vue-віджети на сторінках Бітрікс

Окремі Vue-компоненти монтуються в div#app-filter, div#app-cart на стандартних сторінках Бітрікса. Маршрутизація та серверний рендеринг — як і раніше Бітрікс. Мінімальне втручання в існуючий сайт. Підходить для поетапної модернізації. Типовий приклад — реактивний фільтр замість catalog.smart.filter. В одному з проектів ми замінили фільтр на Vue-віджет за 2 тижні, конверсія зросла на 18%.

SPA на Vue + Бітрікс REST API

Фронтенд — повноцінне Vue-додаток з Vue Router. Бітрікс віддає дані через REST API: штатний модуль rest або кастомні контролери D7. Адмінка Бітрікса — для керування контентом, редактор не помічає різниці. Ідеально для особистих кабінетів, B2B-порталів та внутрішніх додатків, де SEO не критичний.

Nuxt.js + Бітрікс як headless CMS

Nuxt забезпечує SSR/SSG для індексації. Бітрікс — headless: віддає дані через API, керує контентом. Для магазинів і контентних сайтів, де SEO — пріоритет. Ми використовуємо Nuxt 3 з Vue Router для гібридного рендерингу — каталог статично, корзина SSR. Економія на ліцензіях і серверах після впровадження становить десятки тисяч гривень на рік.

Які особливості REST API Бітрікс важливі для Vue-розробки?

Тут зосереджено 70% часу при інтеграції Vue + Бітрікс.

Штатний REST-модуль

Інфоблоки, каталог, корзина (sale.basket.*), замовлення (sale.order.*), користувачі — з коробки. Обмеження: штатні методи не завжди покривають кастомну логіку. Метод catalog.product.list не віддає обчислювані властивості — потрібен кастомний ендпоінт.

Кастомні контролери D7

Клас Bitrix\Main\Engine\Controller — правильний спосіб створення API для Vue. Автоматична валідація параметрів, CSRF-захист з коробки, типізовані відповіді. Не ajax.php з $_POST — це шлях до ін'єкцій.

namespace App\Controller;
use Bitrix\Main\Engine\Controller;

class CatalogController extends Controller
{
    public function getProductsAction(array $filter, int $page = 1): array
    {
        // ORM-запит до інфоблоку, не CIBlockElement::GetList
    }
}

Авторизація та кешування

Авторизація: OAuth 2.0 для SPA або сесійні токени. Rate limiting — через Bitrix\Main\Engine\Controller або nginx. Кешування: API-відповіді кешуються на рівні D7 з тегованою інвалідацією. Змінився товар в інфоблоці — кеш скинувся по тегу iblock_id_X. Без цього при 100 RPS сервер ляже. Ми налаштовуємо це в кожному проекті — гарантія стабільності під навантаженням. Приклад налаштування тегованого кешування:

use Bitrix\Main\Data\Cache;

$cache = Cache::createInstance();
$tag = 'iblock_id_' . $iblockId;
if ($cache->initCache(3600, md5($filter), $tag)) {
    return $cache->getVars();
}
// запит до БД
$cache->startDataCache();
$cache->endDataCache($data);
\CIBlock::registerWithTagCache($iblockId);

Якою має бути структура Vue-додатку для Бітрікса?

• Vue Router — lazy loading маршрутів через defineAsyncComponent. Каталог не тягне за собою код особистого кабінету.
• Pinia — стейт-менеджмент: каталог, корзина, користувач, фільтри. Модульна архітектура сховища. Vuex — легасі, нові проекти на Pinia.
• Axios з перехоплювачами: автоматичне оновлення CSRF-токена, retry при 503, обробка помилок авторизації.
• Vue Query (TanStack Query) — кешування API-запитів, автоматична ревалідація, оптимістичні оновлення. Користувач додав товар у корзину — UI оновився миттєво, запит до API пішов фоном.

Каталог на Vue — розбір ключового кейсу

Різниця в UX відчувається одразу. Конкретика:

• Фільтр — чекбокси, range-слайдери, select з пошуком. Стан синхронізується з URL через vue-router query params — посилання з фільтрами можна відправити колезі.
• Картка товару — галерея з зумом, перемикання SKU (колір/розмір), ціна перераховується через API catalog.product.offer.list, залишки по складах з catalog.store.product.list.
• Віртуальний скролінг — vue-virtual-scroller рендерить лише видимі елементи. Каталог у 10 000 товарів працює без гальм.
• Розумний пошук — debounced-запити до search.title.search або ElasticSearch, автодоповнення через випадаючий список. У нашому проекті це скоротило час пошуку на 40%.
• Порівняння — динамічна таблиця характеристик з підсвічуванням відмінностей. Зберігання в Pinia + localStorage для персистентності.

Процес впровадження Vue.js покроково:

1. Аудит поточної архітектури Бітрікса та виявлення вузьких місць (фільтрація, корзина, особистий кабінет).
2. Проектування API — визначаємо ендпоінти, моделі даних, використовуємо Bitrix\Main\Engine\Controller.
3. Розробка Vue-віджетів або SPA — збірка на Vite, Code Splitting, Pinia.
4. Інтеграція з Бітріксом — теговане кешування, OAuth, обробка помилок.
5. Тестування під навантаженням (до 100 RPS) та деплой з CI/CD.

Продуктивність досягається за рахунок code splitting, tree shaking та lazy loading важких компонентів (Chart.js, карти, WYSIWYG). Бандл сторінки каталогу — 80–120 КБ gzip.

Nuxt.js і SEO: як зберегти індексацію

SPA на чистому Vue віддає пошуковику порожній HTML з <div id="app"></div>. Google вміє рендерити JS, але з затримкою в дні. Яндекс — взагалі непередбачувано. Nuxt.js вирішує:

• SSR — сервер віддає повний HTML, після гідратації працює як SPA.
• SSG — сторінки генеруються при nuxt generate, роздаються з CDN. Максимальна швидкість.
• Гібридний режим — каталог статично, корзина та ЛК — SSR.
• useHead() — динамічні title, description, Open Graph, Schema.org для кожної сторінки.
• Sitemap — @nuxtjs/sitemap, маршрути з API Бітрікса. Це забезпечує повну індексацію — наша гарантія потрапляння в топ-5 Google.

Порівняння підходів та строки

Повний цикл: проектування API, розробка контролерів D7, Vue-додаток, налаштування Vite, тестування, деплой. Код рев'юється, покривається тестами, документується — не «зібрав і забув». Вартість розробки розраховується індивідуально після аналізу вашого поточного сайту та ТЗ. Детальну оцінку ви отримаєте протягом дня — замовте консультацію.

Типові помилки при інтеграції Vue.js і Бітрікс

1. Використання ajax.php замість Bitrix\Main\Engine\Controller — призводить до вразливостей та нестабільності.
2. Відсутність тегованого кешування API — при високому навантаженні сервер не витримує.
3. Ігнорування авторизації OAuth для SPA — сесійні токени можуть закінчуватися, ламаючи UX.
4. Повний перепис всього сайту на SPA без необхідності — збільшує строки та бюджет.
5. Неправильне налаштування Nuxt SSR — повільна генерація сторінок на бекенді.

Що входить у роботу та наші гарантії

• Документація API (Swagger/OpenAPI) для інтеграції з вашим бекендом.
• Доступи до репозиторію з кодом та CI/CD.
• Навчання вашої команди роботі з Vue-компонентами.
• Пост-релізна підтримка на 1 місяць — гарантія стабільності.
• Код відповідає стандартам PSR-12 та Bitrix\Main\Engine\Controller.

Замовте розробку Vue.js інтерфейсів для вашого Бітрікс-проекту — отримайте консультацію та оцінку строків протягом дня. Напишіть нам, і ми надішлемо комерційну пропозицію з детальним планом робіт. Оцінимо проект безкоштовно — просто надішліть ТЗ або посилання на поточний сайт.