Налаштування видеогалереї товара у 1С-Бітрікс
Коли у товара три відеообзори, монтажне відео та розпакування — одного свойства VIDEO_URL вже не хватає. Потрібна галерея: переключення між роликами, превью-мініатюри, синхронізація з фотогалереєю. У Бітріксі немає готового компонента для цього, тому рішення собирається з інфраструктури інфоблоків та користувацького шаблону.
Зберігання кількох відео в інфоблоці
Для множественного відео використовується властивість типу S (рядок) з прапором MULTIPLE = Y. Символьний код — VIDEO_GALLERY. У таблиці b_iblock_element_property кожне відео зберігається окремим рядком з одним IBLOCK_ELEMENT_ID. Отримати всі значення:
$videos = [];
$res = \Bitrix\Iblock\ElementPropertyTable::getList([
'filter' => [
'IBLOCK_ELEMENT_ID' => $elementId,
'CODE' => 'VIDEO_GALLERY',
],
'select' => ['VALUE', 'DESCRIPTION'],
'order' => ['ID' => 'ASC'],
]);
while ($row = $res->fetch()) {
$videos[] = $row;
}
Поле DESCRIPTION використовується як підпис до відео — це стандартне поле для множественних властивостей, редагується прямо в карточці елемента.
Структура галереї: превью + основний плеєр
Класичний паттерн — великий плеєр-слот зверху, ряд мініатюр знизу. При клику на мініатюру основний слот заміняє вміст. Превью беруться з thumbnail API відповідного хостингу.
Шаблон компонента catalog.element, блок галереї:
<?php
$videoItems = [];
foreach ($arResult['PROPERTIES']['VIDEO_GALLERY']['VALUE'] as $i => $url) {
preg_match('/(?:v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/', $url, $m);
if (!empty($m[1])) {
$videoItems[] = [
'id' => $m[1],
'desc' => $arResult['PROPERTIES']['VIDEO_GALLERY']['DESCRIPTION'][$i] ?? '',
'thumb' => "https://img.youtube.com/vi/{$m[1]}/mqdefault.jpg",
];
}
}
?>
<?php if ($videoItems): ?>
<div class="video-gallery" id="videoGallery">
<div class="video-gallery__main" data-active="<?= $videoItems[0]['id'] ?>">
<!-- iframe з'явиться по клику через JS -->
</div>
<div class="video-gallery__thumbs">
<?php foreach ($videoItems as $idx => $v): ?>
<button class="video-gallery__thumb <?= $idx === 0 ? 'is-active' : '' ?>"
data-video-id="<?= $v['id'] ?>"
aria-label="<?= htmlspecialcharsEx($v['desc']) ?>">
<img src="<?= $v['thumb'] ?>" loading="lazy" alt="">
</button>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?>
Поєднання відеогалереї з фотогалереєю
Магазини хочуть єдиної галереї: спочатку фото, потім відео. У компоненті catalog.element фото йдуть з $arResult['MORE_PHOTO'] — масив шляхів до картинок. Відео-мініатюри додаються в кінець того ж контейнера слайдера, але з атрибутом data-type="video". JavaScript обробляє клік: якщо data-type === 'video' — ініціалізує iframe, іншому — показує зображення.
Це дозволяє використовувати один екземпляр Swiper або Splide для обох типів контенту без дублювання логіки.
Кеш та права доступу
Множественне властивість читається в межах кешуємого блока. Проблема виникає при редагуванні: менеджер додав відео в админці, але кеш не сбросился. Обов'язково реєструвати тег:
$this->SetResultCacheKeys(['PROPERTIES']);
$GLOBALS['CACHE_MANAGER']->RegisterTag('iblock_id_' . CATALOG_IBLOCK_ID);
Подія OnAfterIBlockElementUpdate в модулі iblock sbросит тег при збереженні елемента.
Vimeo та інші хостинги
Якщо частина відео на Vimeo, thumbnail грузиться через API https://vimeo.com/api/v2/video/{id}.json. Це синхронний запрос — робити його в шаблоні не можна. Правильний підхід: фоновий агент Бітрікса (CAgent) обходит властивості галереї, запитує thumbnail і зберігає URL в окрему множественну властивість VIDEO_THUMB. Шаблон читає вже готові превю без зовнішніх запросів при рендерінгу.