Інтеграція AR-примірки товарів на 1С-Бітрікс

Інтеграція AR-примірки товарів на 1С-Бітрікс

Одного разу до нас звернувся власник інтернет-магазину окулярів. Мобільний трафік становив 60%, але конверсія на мобільних була вдвічі нижчою, ніж на десктопі — покупці просто не могли уявити, як окуляри сидять на обличчі. Ми запропонували впровадити AR-примірку на базі WebXR. Через місяць після запуску конверсія на мобільних зросла на 25%, а частка повернень знизилася на 30%. Розповім, як повторити цей результат на 1С-Бітрікс: від вибору SDK до інтеграції в картку товару.

AR-примірка вирішує проблему візуалізації — камера смартфона накладає модель товару в реальному часі. Ми регулярно стикаємося із запитами на інтеграцію такого функціоналу в Бітрікс. Правильний вибір постачальника SDK та грамотне зв'язування даних каталогу з 3D-моделями — ключ до швидкого запуску. Реалізуємо під ключ: від аналізу до впровадження. Наша команда — сертифікований партнер 1С-Бітрікс, має 7-річний досвід та виконала понад 50 проектів інтеграції. Ми надаємо гарантію на роботи та підтримку після запуску.

Як вибрати SDK для швидкої інтеграції?

WebXR + Three.js — браузерний, не потребує додатку. Працює в Chrome на Android (iOS — Safari з обмеженнями). 3D-моделі у форматі .glb або .usdz. Підходить для меблів, окулярів, великих предметів. За охопленням пристроїв WebXR кращий за Snap Camera Kit у 10 разів — не потрібне встановлення додаткового ПЗ. Snap Camera Kit / Meta Spark — SDK для створення AR-масок/ефектів. Інтеграція через iframe або нативний додаток. Добре працює для прикрас, окулярів, аксесуарів. Потребує ліцензії та завантаження моделей на сервери Snap. Banuba / Visage Technologies — SDK для примірки окулярів, макіяжу, зачісок. Дає точне накладення за точками обличчя завдяки хендтрекінгу та сітці (mesh). Має REST API для передачі параметрів моделі. Ліцензія оплачується окремо, але точність накладення вища, ніж у WebXR. Fit Analytics / True Fit — спеціалізовані сервіси для одягу з рекомендацією розміру на основі параметрів користувача. Не AR у строгому сенсі, але вирішують те саме завдання зниження повернень.

Архітектура інтеграції з Бітрікс

Суть інтеграції — передати AR-віджету ідентифікатор та параметри товару з каталогу Бітрікс. Схема:

Картка товару (catalog.element) → JavaScript передає product_id та SKU в AR-віджет → Віджет запитує 3D-модель за product_id → /api/ar/model/{product_id} (ендпоінт Бітрікс) → Повертає URL файлу .glb/.usdz з b_file → WebXR/SDK відображає модель через камеру 

Як організувати зберігання 3D-моделей у каталозі?

Для зберігання 3D-моделей створіть властивість інфоблоку:

• Код: AR_MODEL_GLB
• Тип: Файл
• Формат: .glb (для Android/WebXR)

І другу властивість для iOS:

• Код: AR_MODEL_USDZ
• Тип: Файл
• Формат: .usdz

Завантаження — стандартне через адміністративний інтерфейс або масове через скрипт імпорту (CFile::SaveFile()).

API-ендпоінт для AR-віджета

Створіть обробник у Бітрікс:

// /local/api/ar/model.php
require_once $_SERVER['DOCUMENT_ROOT'] . '/bitrix/modules/main/include/prolog_before.php';

$productId = (int)$_GET['product_id'];
if (!$productId) {
    http_response_code(400);
    exit;
}

\Bitrix\Main\Loader::includeModule('iblock');
$element = \CIBlockElement::GetByID($productId)->GetNextElement();
$props = $element->GetProperties(['AR_MODEL_GLB', 'AR_MODEL_USDZ']);

$glbFile = $props['AR_MODEL_GLB']['VALUE'] ? \CFile::GetPath($props['AR_MODEL_GLB']['VALUE']) : null;
$usdzFile = $props['AR_MODEL_USDZ']['VALUE'] ? \CFile::GetPath($props['AR_MODEL_USDZ']['VALUE']) : null;

$ua = $_SERVER['HTTP_USER_AGENT'] ?? '';
$isIos = str_contains($ua, 'iPhone') || str_contains($ua, 'iPad');

header('Content-Type: application/json');
echo json_encode([
    'model_url' => $isIos ? ($usdzFile ?? $glbFile) : ($glbFile ?? $usdzFile),
    'product_id' => $productId,
    'ar_supported' => (bool)$glbFile,
]);

Як підключити WebXR у шаблоні картки товару?

У шаблоні компонента catalog.element (або result_modifier.php) додайте:

// Проверяем поддержку WebXR
if ('xr' in navigator && $arModelUrl) {
  const arButton = document.createElement('a');
  arButton.rel = 'ar';
  arButton.href = $arModelUrl; // URL файла .usdz для iOS Quick Look
  // Для Android/WebXR — используем <model-viewer>
  const modelViewer = document.createElement('model-viewer');
  modelViewer.setAttribute('src', $arModelUrlGlb);
  modelViewer.setAttribute('ar', '');
  modelViewer.setAttribute('ar-modes', 'webxr scene-viewer quick-look');
  modelViewer.setAttribute('camera-controls', '');
  document.getElementById('ar-container').appendChild(modelViewer);
}

Бібліотека @google/model-viewer (підключається через CDN) забезпечує підтримку всіх трьох AR-режимів: WebXR (Chrome Android), Scene Viewer (Android нативний), Quick Look (iOS Safari).

Інтеграція через зовнішні SDK (Banuba, Snap)

Якщо використовуєте сторонній SDK з ліцензією:

// Передаём параметры товара в SDK
window.BANUBA_SDK.init({
  clientToken: 'YOUR_TOKEN',
  onReady: () => {
    window.BANUBA_SDK.tryOn({
      productId: <?= $arResult['ID'] ?>,
      sku: '<?= $arResult['PROPERTIES']['ARTICLE']['VALUE'] ?>',
      category: 'eyewear', // glasses, rings, watches
    });
  }
});

SDK сам запитує модель зі своїх серверів за productId — для цього потрібно попередньо завантажити моделі в їх CDN через їх API або адміністративну панель.

Як виконати масове завантаження 3D-моделей?

Для каталогу 500+ товарів з AR-моделями потрібен скрипт імпорту:

$csv = parseCsv('/import/ar_models.csv'); // product_xml_id, glb_file, usdz_file
foreach ($csv as $row) {
    $element = getElementByXmlId(CATALOG_IBLOCK_ID, $row['product_xml_id']);
    if (!$element) continue;
    $glbId = \CFile::SaveFile(['name' => $row['glb_file'], 'tmp_name' => '/models/' . $row['glb_file'], ...], 'catalog_ar');
    $usdzId = \CFile::SaveFile(['name' => $row['usdz_file'], 'tmp_name' => '/models/' . $row['usdz_file'], ...], 'catalog_ar');
    \CIBlockElement::SetPropertyValues($element['ID'], CATALOG_IBLOCK_ID, $glbId, 'AR_MODEL_GLB');
    \CIBlockElement::SetPropertyValues($element['ID'], CATALOG_IBLOCK_ID, $usdzId, 'AR_MODEL_USDZ');
}

Як відстежувати ефективність AR-примірки?

Підключіть відстеження: скільки користувачів запустили AR-примірку, як це впливає на конверсію.

// При запуске AR-примерки
modelViewer.addEventListener('ar-status', (event) => {
  if (event.detail.status === 'session-started') {
    ym(METRIKA_ID, 'reachGoal', 'ar_try_on_started', {
      product_id: productId,
      category: productCategory,
    });
  }
});

Порівнюйте конверсію сесій з AR-приміркою та без — це основний KPI, який обґрунтовує витрати на підготовку 3D-моделей. За даними Google ARCore, AR-примірка збільшує конверсію на 20–30%. Наприклад, для магазину з 1000 замовлень на місяць і середнім чеком $50, зниження повернень на 30% дає економію $1,500 на місяць. Налаштуємо A/B-тест для вашого магазину та надамо звіт.

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

• Вибір оптимального SDK під ваш тип товарів та бюджет.
• Налаштування зберігання 3D-моделей в інфоблоках.
• Розробка API-ендпоінту для видачі моделей.
• Інтеграція AR-віджета в шаблон картки товару.
• Налаштування аналітики та A/B-тесту.
• Навчання менеджерів завантаженню моделей.
• Документація та код у вашому репозиторії.

Склад робіт та строки

Основна трудомісткість проекту — створення 3D-моделей товарів. Інтеграція коду без підготовки моделей займає 3–5 тижнів. Отримайте консультацію щодо вашого проекту — оцінимо можливість впровадження AR-примірки за один день. Ми — сертифікований партнер 1С-Бітрікс з 7-річним досвідом. Зв'яжіться з нами для обговорення деталей.