Видео и доп. материалы в карточке товара

Карточка товара продаёт не только фото и ценой. Видеообзор, PDF-инструкция, сертификат или 3D-тур снимают возражения и поднимают конверсию. В 1С-Битрикс всё это добавляется через свойства инфоблока — без сторонних модулей, но с нюансами при выводе в шаблоне.

Зачем нужны видео и доп. материалы

Дополнительный контент в карточке решает конкретные задачи: покажите товар в действии, дайте инструкцию по установке, подтвердите качество документами. Это уменьшает число вопросов в поддержку и возвраты, а видео ещё и удерживает пользователя на странице — плюс к поведенческим факторам.

Чаще всего в карточку добавляют:

• Видеообзоры — ссылки на YouTube/RuTube/VK или загруженные mp4-файлы;
• PDF-документы — паспорта, инструкции, гарантийные талоны;
• Сертификаты и декларации — как изображения или файлы;
• Схемы, чертежи, спецификации — для сложной техники и мебели;
• 3D-модели и виртуальные туры — через embed-код или iframe.

Технически всё это — значения свойств инфоблока каталога, которые вы выводите в нужном месте шаблона bitrix:catalog.element.

Какие типы свойств выбрать

Тип свойства определяет, как контент хранится и выводится. Идём в Контент → Каталог → Инфоблоки → Товары → Свойства и создаём поля под каждый вид материала. Ориентир по выбору:

Видео по ссылке: хранение и вывод

Самый частый сценарий — видео на внешнем хостинге. Заводим строковое свойство, например с кодом VIDEO_URL, и в карточке товара вставляем полный адрес ролика. В шаблоне из ссылки собираем адаптивный embed.

Важно не вставлять «сырое» видео тегом <video> для внешних хостингов — нужен именно iframe плеера. Для YouTube преобразуйте watch?v=ID в embed/ID, для RuTube и VK используйте их формат embed-ссылки. Пример вывода в result_modifier.php или шаблоне:

• получаете значение свойства из $arResult['DISPLAY_PROPERTIES']['VIDEO_URL']['VALUE'];
• парсите ID ролика регулярным выражением;
• оборачиваете в <div class="video-embed"><iframe …></iframe></div> с CSS-обёрткой 16:9.

PDF, сертификаты и другие файлы

Для документов создаём множественное свойство типа Файл — например DOCS. Битрикс сохранит файлы в /upload/ и вернёт их ID. В шаблоне из ID получаем путь и имя функцией CFile::GetFileArray($fileId) и выводим список ссылок с иконкой и размером.

Практические детали, которые экономят время:

1. Задайте свойству понятное «Название» и код — по коду вы будете обращаться в шаблоне;
2. Для картинок-сертификатов включите ресайз через CFile::ResizeImageGet(), чтобы не грузить оригиналы;
3. PDF отдавайте ссылкой с атрибутом download или открытием в новой вкладке;
4. Добавьте в $arSelect компонента PROPERTY_DOCS, иначе свойство не попадёт в $arResult.

Если документы приходят из 1С, свойство под них должно существовать в инфоблоке заранее и соответствовать по символьному коду выгрузке — иначе обмен создаст дубликаты полей.

Вывод в шаблоне карточки

Медиаблоки логично выносить в отдельные вкладки или аккордеон карточки: «Описание», «Видео», «Документы», «Характеристики». Компонент комплексный (bitrix:catalog.element) — правьте шаблон элемента, копируя его из bitrix в /local/templates/{шаблон}/components/bitrix/catalog.element/{ваш_шаблон}/.

Чтобы свойства дошли до шаблона:

• убедитесь, что они перечислены в параметре PROPERTY_CODE комплексного компонента каталога;
• для отдельного вывода используйте $arResult['DISPLAY_PROPERTIES'] (учитывает настройки показа) или $arResult['PROPERTIES'] (сырые значения);
• сложную логику сборки embed выносите в result_modifier.php, а не в template.php — так шаблон остаётся читаемым.

Медиа и торговые предложения

Отдельный вопрос — где хранить материалы, когда у товара есть SKU (цвет, размер). Общее видео и паспорт логично держать на уровне товара, а специфичные фото/сертификаты — на уровне торговых предложений. Тогда при переключении варианта карточка подменяет и медиа.

Для этого свойство под материал заводится в инфоблоке торговых предложений, а в JS-логике смены оффера (свойство JS_OFFERS) обновляется соответствующий блок. Учтите: чем больше файлов на каждом SKU, тем тяжелее выборка — не тяните лишние свойства офферов в листинг, только в карточку.

Итог

Видео и дополнительные материалы в 1С-Битрикс — это свойства инфоблока: строка под ссылку на ролик, множественный «Файл» под документы и сертификаты, HTML-поле под embed-код. Главное — правильно выбрать тип, добавить свойства в PROPERTY_CODE компонента, собрать адаптивный вывод в шаблоне и не грузить тяжёлые плееры до клика, чтобы не проседала скорость.

Если нужно аккуратно встроить медиа в существующий шаблон, настроить lazy-load плееров или связать материалы с выгрузкой из 1С без дублей — мы в B2Bsite делаем это в рамках разработки и поддержки магазинов на Битрикс, с оглядкой на производительность каталога.