Видео на странице товара SS7 Есть решение


SS7 обновился, подскажите что и на что нужно заменить в шаблоне Picco Shop чтоб отображался видео ролик на странице товара

6 ответов
  • Владимир Сергеев
    Разработчик
    Решение
    30 мая 2016 09:39

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

    Затем откройте приложение магазин - витрины - дизайн - Picco Shop - шаблоны - файл product.html

    Найдите там строки:

    {if $theme_settings.productgallery == 'bx'}
        <div class="span6 bx3">
            {if $product.images}
                <h3 class="title-bg align-center margin-b">[`Gallery`]</h3>
                <div class="corner">
                    {$wa->shop->badgeHtml($product.badge)}
                </div>
                <ul class="bxslider3">

    И сразу за <ul class="bxslider3"> вставьте вот этот код:

    {*Вставка видео*}
    {$video = $product->getVideo(['96x96'])}
    {if $video.url}
        <li data-image-id="video" id="video-container" class="video-container" itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
            <div itemprop="embedHTML">
                <iframe src="{$video.url}" style="width:100%; height:315px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            </div>
            <meta itemprop="width" content="{$video.width}">
            <meta itemprop="height" content="{$video.height}">
        </li>
    {/if}
    {* / Вставка видео*}

    Это ещё не всё. Теперь нужно добавить миниатюру видео в пагинацию слайдера.
    Чуть ниже найдите строки:

    <div id="bx-pager">
        {$count=0}

    И сразу за ними вставьте код:

    {* Миниатюры видео *}
    {if $video.url}
            <a id="product-image-video" data-slide-index="{$count++}" href="{$video.url}" href="javascript:()" class="hidden-phone hidden-tablet" data-image-id="video">
                <img src="{$video.images[0]}" style="height: 50px; width: auto;" alt="">
            </a>
    {/if}
    {* / Миниатюры видео *}

    Обратите внимание на height: 50px; По умолчанию миниатюра видео создаётся размером 96x96 px.
    Чтобы она не была больше миниатюр изображений в слайдере, я добавил ей размер 50px в высоту.

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

    $wa->shop->productImgHtml(
    [    'id'=> $product.id, 
        'image_id' => $pager.id, 
        'ext' => $pager.ext
    ],     '75')}

    И замените код на этот (там добавилась одна строка со style):

    {$wa->shop->productImgHtml(
    [    'id'=> $product.id, 
        'image_id' => $pager.id, 
        'ext' => $pager.ext,
        'style' => 'height:50px; width: auto;'
    ],     '75')}

    Обратите внимание, что здесь также размер миниатюр "сжимается" до 50px в высоту.
    Можете потом сменить размеры миниаютр на свои, поменяв в обоих фрагментах кода 50px на своё значение.
    Однако, миниатюры видео на данный момент (на сколько я понимаю) доступны только в одном размере 96x96. Так что больше 96 пикселей делать не рекомендую.

    Если будете делать рамзеры миниатюр изображений больше 75 пикселей, то нужно в последнем фрагменте кода поменять последнюю цифру на необходимое значение.

  • ЭВОМОТУС светлана
    31 мая 2016 19:08

    видео выводится первым, как сделать чтобы сначало были фото потом видео

    • Владимир Сергеев
      Разработчик
      Решение
      31 мая 2016 21:28

      Первый фрагмент кода (само видео) нужно вставить перед:

          {/foreach}
      </ul>

      В контектсте кода – т.е. в том же теге bxslider3


      Второй фрагмент кода (миниатюры видео) точно также перед кодом:

          {/foreach}
      </div><!--bx-pager-->

      После закрающего тега </a>

      • Владимир Сергеев
        Разработчик
        Решение
        1 июня 2016 09:49

        Первый фрагмент кода вставлять сюда:

        Второй фрагмент кода вставлять сюда:

        Остальное менять согласно ответам выше.

  • ЭВОМОТУС светлана
    1 июня 2016 05:26

    спасибо исправили

  • Gadget
    Решение
    31 января 2017 10:49

    Здравствуйте, лупу выключаешь, невозможно воспроизвести видео, подскажите как исправить?

    • Владимир Сергеев
      Разработчик
      Решение
      31 января 2017 11:44

      Здравствуйте!

      Без ссылки сложно понять причину.

      Киньте ссылку на товар с описанной выше проблемой.

    • Владимир Сергеев
      Разработчик
      Решение
      31 января 2017 16:49

      Откройте приложение Сайт - дизайн - Picco Shop - шаблоны - файл style.css
      В конец файла добавьте следующие строки:

      .product ul.bxslider3 iframe {
        position: relative;
        z-index: 10;
      }
  • Юлия
    Решение
    12 января 2017 15:47

    Доброго дня, Владимир.

    У меня похожая ситуация, не выводится видео в карточке товара. Однако не могу воспользоваться данными рекомендациями, поскольку тема Формула Успеха.

    Подскажите пожалуйста, что надо сделать, чтобы отображалось видео в карточке товара .


    • Владимир Сергеев
      Разработчик
      Решение
      12 января 2017 16:06

      Здравствуйте, Юлия!

      В теме Формула Успеха видео можно добавлять через дополнительные параметры.
      Инструкции как это сделать находятся в настройках темы для приложения магазин.

    • Владимир Сергеев
      Разработчик
      Решение
      12 января 2017 16:14

  • Юлия
    Решение
    13 января 2017 15:55

    Владимир, спасибо. Работает!

Добавить ответ
Чтобы добавить комментарий, зарегистрируйтесь или войдите
Мы получаем и обрабатываем персональные данные посетителей нашего сайта в соответствии с официальной политикой.
Если Вы продолжите использовать сайт, мы будем считать, что Вас это устраивает.
Подписывайтесь и получайте скидки!

Узнавайте первым о скидках и специальных предложениях!