Вставка видео в карточку товара

[-Inna- 0]

помню обсуждалась тема.

ничего не придумано с тех пор для дополнительной вставки

видео кроме как извращаться с дополнительными полями?

[support 447]

А что должно быть придумано?

Вставляется обычным html-кодом внутрь описания, к примеру.

[-Inna- 0]

визуальный редактор режет код

вывод видео нужен отдельно. после вывода дополнительных картинок

[YuraS 4]

визуальный редактор режет код

странно. у меня не режет. может, потому что он у меня отключен?

[-Inna- 0]

сделать вывод короткого описания наверно будет удобнее всего $info->assign('PRODUCTS_SHORT_DESCRIPTION', stripslashes($product->data['PRODUCTS_SHORT_DESCRIPTION']));

[KoVaLsKy 59]

ммм. немного не понятно. метка краткое описание выводит?

[YuraS 4]

ммм. немного не понятно. метка краткое описание выводит?

похоже, что -Inna- окошком ошибся. это сюда было по всей видимости :bte:

[KoVaLsKy 59]

ага. а то все равно через редактор ж краткое описание :hehe:

[komsit 2]

Тоже озадачился такой проблемой, что нужно в определенном месте на карточке товара вставить видео.

Можно конечно вставить в описание, но выглядит не так удобно.

Вывести в  таб товара - хорошая идея, но судя по вебвизору посетители сайта как правило ленивы и редко открывают табы

Поэтому было принято решение вывести видео под картинками товара.

В моем случае это видеоролик из Youtube

Для этого решил использовать метку 

{$PRODUCTS_EAN} - Штрих-код товара

Это наверно одна из самых неиспользуемых меток в описании товара. (хотя у кого то может быть по другому)

Все очень просто, берете код из ютуба, например

<iframe width="560" height="315" src="https://www.youtube.com/embed/Fh7AbeiGgsM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Вставляете в форму "штрих код товара" (при создании товара во вкладке редактирования "Дополнительно)

Далее в нужном месте вставляете метку в product_info_v1.html

{$PRODUCTS_EAN}

Для более красивого вида оформляем все в необходимые стили

и чтобы не выводилось ничего, если не заполнен "штрихкод товара" прописываем так:

    {if $PRODUCTS_EAN}

<div class="ваш стиль">

<h2> Видеобзор модели </h2>

{$PRODUCTS_EAN} 

</div>
{/if}

 

 

 

[support 447]

1 час назад, komsit сказал:

Тоже озадачился такой проблемой, что нужно в определенном месте на карточке товара вставить видео.

Можно конечно вставить в описание, но выглядит не так удобно.

Вывести в  таб товара - хорошая идея, но судя по вебвизору посетители сайта как правило ленивы и редко открывают табы

Поэтому было принято решение вывести видео под картинками товара.

В моем случае это видеоролик из Youtube

Для этого решил использовать метку 

{$PRODUCTS_EAN} - Штрих-код товара

Это наверно одна из самых неиспользуемых меток в описании товара. (хотя у кого то может быть по другому)

Все очень просто, берете код из ютуба, например

<iframe width="560" height="315" src="https://www.youtube.com/embed/Fh7AbeiGgsM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Вставляете в форму "штрих код товара" (при создании товара во вкладке редактирования "Дополнительно)

Далее в нужном месте вставляете метку в product_info_v1.html

{$PRODUCTS_EAN}

Для более красивого вида оформляем все в необходимые стили

и чтобы не выводилось ничего, если не заполнен "штрихкод товара" прописываем так:

    {if $PRODUCTS_EAN}

<div class="ваш стиль">

<h2> Видеобзор модели </h2>

{$PRODUCTS_EAN} 

</div>
{/if}

 

 

 

Можно ведь ещё проще.

Зачем в значении метки в админке указывать html-код?!

В админке указываете только код видео: Fh7AbeiGgsM

А вот в шаблоне уже вставляйте код:

<iframe width="560" height="315" src="https://www.youtube.com/embed/{$PRODUCTS_EAN}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Так ведь лучше будет и проще.

[komsit 2]

Да, действительно, сам сразу не додумался!

Спасибо!

И можно будет в любой момент подправить размер видео для всех товаров 

width="560" height="315"

Редактируя только product_info_v1.html

[support 447]

9 минут назад, komsit сказал:

Да, действительно, сам сразу не додумался!

Спасибо!

И можно будет в любой момент подправить размер видео для всех товаров 

width="560" height="315"

Редактируя только product_info_v1.html

Конечно. И даже если изменится код у youtube, не придётся править все товары магазина, а только шаблон карточки товара.

т.е. всегда надо разделять логику от разметки, представления.

т.е. упрощать надо там где это возможно.

[komsit 2]

Не будет лишним также добавить Shema разметку для видео.

Яндекс все чаще в выдачу добавляет видео, может и подхватит ваше видео с карточки товара,

поделюсь готовым кодом (если код видео на ютубе это в карточке товара  "Штрих код товара" - В product_info_v1.html метка  {$PRODUCTS_EAN})

вставлять в нужное место для файла product_info_v1.html:

 

{if $PRODUCTS_EAN}
                
 

<div id="video-schema" itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
<div id="video-schema-meta">
<h4> Обзор (Видео) {$PRODUCTS_NAME}</h4>
<meta itemprop="description" content="Видеобзор {$PRODUCTS_NAME}"/>
<link itemprop="url" href="https://youtu.be/{$PRODUCTS_EAN}"/>
<link itemprop="thumbnailUrl" href="http://img.youtube.com/vi/{$PRODUCTS_EAN}/maxresdefault.jpg "/>
<meta itemprop="name" content="Видеобзор {$PRODUCTS_NAME}"/><meta itemprop="isFamilyFriendly" content="true"/>
<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject" >
<meta itemprop="width" content="560"/>
<meta itemprop="height" content="315"/>

</span>
</div>

<div class="video">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/{$PRODUCTS_EAN}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
 </div>
{/if}

 

И чтобы Видео выводилось на ширину всего блока и было "резиновым" (в том числе и для мобильных), добавьте в файл стилей:

.video {position:relative;padding-bottom:56.25%;/*пропорции видео 16:9 */padding-top:25px;height:0;}

.video iframe {position:absolute;top:0;left:0;width:100%;height:100%;}

 

 

Буду рад если кому то  пригодится.

 

 

[IVAN.Z 2]

Отлично, было бы здорово если при создании товара была строчка вместо ean например код видео ютюб, а в карточке товара это было бы в видео модульного окна мол нажал а там видео обзор товара

[support 447]

1 час назад, komsit сказал:

Не будет лишним также добавить Shema разметку для видео.

 

Спасибо за код.

Добавил в FAQ -