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

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

Конверсія в категоріях «одяг» та «окуляри» на мобільному трафіку страждає від однієї проблеми: покупець не може уявити, як річ виглядатиме на ньому. AR-примірка вирішує це — камера смартфона накладає модель товару в реальному часі. Інтеграція такого функціоналу в Бітрікс — це не складний проект, якщо правильно вибрати постачальника SDK і зрозуміти, як пов'язати дані каталогу з 3D-моделями.

Вибір SDK для AR-примірки

Існує кілька підходів:

WebXR + Three.js — браузерний, не потребує застосунку. Працює в Chrome на Android (iOS — Safari з обмеженнями). 3D-моделі у форматі .glb або .usdz. Підходить для меблів, окулярів, великих предметів.

Snap Camera Kit / Meta Spark — SDK для створення AR-масок/ефектів. Інтеграція через iframe або нативний застосунок. Добре працює для прикрас, окулярів, аксесуарів.

Banuba / Visage Technologies — SDK для примірки окулярів, макіяжу, зачісок. Потребує ліцензії, дає точне накладення за точками обличчя. Є REST API для передачі параметрів моделі.

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 або адміністративну панель.

Управління моделями: масове завантаження

Для каталогу 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-моделей.

Склад робіт та терміни

Основна трудомісткість проекту — створення 3D-моделей товарів. Якісна модель у .glb коштує 20–80 USD за позицію у спеціалізованих студіях. Інтеграція коду без підготовки моделей займає 3–5 тижнів.