Возможность добавлять видео с Ютуба

Question

Опубликовано: 23 мая 2016

Возможность добавлять видео с Ютуба

Добрый день!

Как я понимаю, в связи с обновлением до 7-ки, появилась возможность добавлять видео с Ютуба, на странице товара, но сейчас почему-то не получается.

Не подскажете, что надо сделать? Если сложно и я сам не смогу, сколько будет стоить что-бы допилить эту функцию.

Спасибо!

видео с Ютуба

1

Евгений Блинов +0

Комментарии (4)

Игорь Колмаков +21 18 января 2018 08:56 #

Добрый!
в изображения только одно
в описание Вы можете добавить сколько угодно

1

ответить

Добавить ответ

Александр Тирон · Answer 1

Содержимое файла product_galery.html заменить следующим содержимым:

{if method_exists($product, 'getVideo')}
    <style>
    .video-container {
        text-align: center;
    }
    .video-container iframe {
        max-width: 100%;
    }
    </style>
    {$video = $product->getVideo(['96x96'])}
{/if}

{if isset($product.params.product_galery)}{$product_galery = $product.params.product_galery}{/if}
{if $wa->isMobile()}
    {$gallery_type = 2}
{else}
    {if $product_galery == 'pop_image'}{$gallery_type = 2}{elseif $product_galery == 'combined'}{$gallery_type = 3}{else}{$gallery_type = 1}{/if}
{/if}
{if $gallery_type == 2 || $gallery_type == 3}
<link rel="stylesheet" href="{$wa_theme_url}jquery.fancybox.css?v{$wa_theme_version}" type="text/css" media="screen" />

<script type="text/javascript" src="{$wa_theme_url}jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript" src="{$wa_theme_url}jquery.fancybox-buttons.js?v=1.0.5"></script>
{/if}
{if $gallery_type == 1 || $gallery_type == 3}
<script type="text/javascript" src="{$wa_theme_url}jquery.elevatezoom.js?v=3.0.8"></script>
{/if}
<!-- image gallery -->
<div class="align-center image-wrapper">

    {if !empty($video.url)}
        <div id="video-container" class="video-container" itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
            <div itemprop="embedHTML">
                <iframe src="{$video.url}" width="{$video.width}" height="{$video.height}" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            </div>
            <meta itemprop="width" content="{$video.width}">
            <meta itemprop="height" content="{$video.height}">
        </div>
    {/if}

    <!-- main image -->
    <div class="image general"{if !empty($video.url)} style="display:none"{/if}>
        {if $product.images}
            {*fix sku image*}
            {if $product.skus[$product.sku_id].image_id}
                {$product.image_id = $product.skus[$product.sku_id].image_id}
                {$product.ext = $product.images[$product.skus[$product.sku_id].image_id].ext}
            {/if}
            {*/fix sku image*}
        <div class="corner top right{if !empty($theme_settings.badge_type)} {$theme_settings.badge_type}{/if}">
            {$wa->shop->badgeHtml($product.badge)}
        </div>
        {/if}
        {$ImgUrl = $wa->shop->productImgUrl($product, '970x0')}
        {if $product.images}<a href="{$ImgUrl}" target="_blank">{/if}
            {$wa->shop->productImgHtml($product, '345x0', [ 'itemprop' => 'image', 'id' => 'product-image', 'data-zoom-image' => $ImgUrl, 'alt' => $product.name|escape, 'default' => "`$wa_theme_url`img/dummy200.png" ])}
        {if $product.images}</a>{/if}
    </div>
    
    <!-- gallery -->
    {if count($product.images) > 1 || (count($product.images) === 1 && !empty($video.url))}
    <div class="gallery" id="product-gallery">
    {if count($product.images) < 4}<style type="text/css">.gallery .jcarousel-prev, .gallery .jcarousel-next{ visibility:hidden; }</style>{/if}
        <ul>
        {if !empty($video.url)}
            <li class="product-image-thumbs">
                <a id="product-image-video" href="{$video.url}" class="zoomThumbActive">
                    <img src="{$video.images[0]}" alt="">
                </a>
            </li>
        {/if}
        {foreach $product.images as $image}
            <li class="product-image-thumbs">                    
                <a  id="product-image-{$image.id}"
                    class="gallery-data{if $wa->shop->imgUrl($image, '970x0') == $wa->shop->productImgUrl($product, '970x0') && empty($product.video_url)} zoomThumbActive{/if}"
                    href="{$wa->shop->imgUrl($image, '970')}"
                    data-zoom-image="{$wa->shop->imgUrl($image, '970x0')}"
                    data-image="{$wa->shop->imgUrl($image, '345x0')}"
                >
                {$wa->shop->imgHtml($image, '96x96', ['alt' => $image.description|escape])}
                </a>
            </li>
        {/foreach}
        </ul>
    </div>
    {/if}
    
    <script type="text/javascript">
    $('#product-gallery ul').jcarousel({
          scroll: 1,        
        buttonNextHTML: '<div><i class="icon-angle-right"></i></div>',
        buttonPrevHTML: '<div><i class="icon-angle-left"></i></div>'
    });
    
    {if $gallery_type == 1 || $gallery_type == 3}
    /*zoom*/
        $('#product-image').elevateZoom({
            preloading: 0,
            zoomType: "window",
            cursor: "crosshair",
            zoomWindowFadeIn: 500,
            zoomWindowFadeOut: 750,   
            gallery : "product-gallery",
            galleryActiveClass: "zoomThumbActive",
            zoomWindowWidth:373,
            zoomWindowOffetx: 20,
            zoomWindowOffety: -1,
            borderSize: 1,
            borderColour: '#e5e5e5',
            /* uncoment in use tint
            tint: true,
            tintColour: '#f5f5f5',
            tintOpacity: 0.5,
            */
            lensOpacity: 0.7,
            scrollZoom: true,      
            constrainType: 'width'
        });
    {/if}
    
    {if $gallery_type == 1}
        $('#product-image').bind("click", function(e) { return false; });{*comment this line use open big image a new window*}
    {/if}
    
    {if $gallery_type == 2}
    /*popup*/
        $("#product-image").bind("click", function(e) {
            {if count($product.images) > 1}
            var gallerylist = [];
            $('#product-gallery a').each(function(){
                if($(this).attr('id') == 'product-image-video') {
                    return true;
                }
                if($(this).hasClass('zoomThumbActive')){
                    gallerylist.unshift({
                        href: ''+$(this).data('zoom-image')+'',
                        title: $(this).find('img').attr("title")
                    });
                }else{
                    gallerylist.push({
                        href: ''+$(this).data('zoom-image')+'',
                        title: $(this).find('img').attr("title")
                    });
                }
            });
            $.fancybox(gallerylist, {
            {else}
            $.fancybox({ href: $(this).data('zoom-image'), title: $(this).attr('title') }, {
            {/if}
                prevEffect : 'none',
                nextEffect : 'none',
                loop : false,
                helpers : {
                    title : {
                        type : 'outside'
                    },
                    buttons : {
                        position:'bottom'
                    }
                }
            });
            
            return false;
        });
    {/if}
    
    {if $gallery_type == 3}
    /*combi*/
        $("#product-image").bind("click", function(e) {
            {if count($product.images) > 1}
            var ez = $(this).data('elevateZoom');
            $.fancybox(ez.getGalleryList(), {
            {else}
            $.fancybox({ href: $(this).data('zoom-image'), title: $(this).attr('title') }, {
            {/if}
                prevEffect : 'none',
                nextEffect : 'none',
                loop : false,
                helpers : {
                    title : {
                        type : 'outside'
                    },
                    buttons : {
                        position:'bottom'
                    }
                }
            });
            
            return false;
        });
    {/if}
    </script>
</div>

В файле product.js строки:

// product images
$("#product-gallery a").click(function () {

заменить строками:

// product image video
$('#product-image-video').click(function () {
    $('.image.general').hide();
    $('#video-container').show();
    $('#product-gallery a').removeClass('zoomThumbActive');
    $(this).addClass('zoomThumbActive');
    return false;
});

// product images
$("#product-gallery a").not('#product-image-video').click(function () {
    $('#video-container').hide();
    $('.image.general').show();

Дмитрий Корнев · Answer 2

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

А то открываешь карточку, а там вместо фотки принтера -- видео о том, как менять картридж. (

Игорь Колмаков · Answer 3

в файле product_galery.html

строку:

 <div class="image general"{if !empty($video.url)} style="display:none"{/if}>

заменить строкой

 <div class="image general">

строку:

<div id="video-container" class="video-container" itemprop="video" itemscope itemtype="http://schema.org/<wbr>VideoObject">

строкой

<div id="video-container" class="video-container" itemprop="video" itemscope itemtype="http://schema.org/<wbr>VideoObject" style="display:none;">

а так же удалить строку:

 && empty($product.video_url)

Алексей Таллинский · Answer 4

Алексей Таллинский +0 18 января 2018 08:43 #

Добрый день!

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

1

ответить

			Коломна, ул. Кирова, 60а, офис 7 +7 (995) 656-25-45 kolmakov.igor@gmail.com
Дорогие друзья! К сожалению, Ваш браузер не поддерживает современные технологии используемые на нашем сайте.
Пожалуйста, обновите браузер, скачав его по ссылкам ниже, или обратитесь к системному администратору, обслуживающему Ваш компьютер.
Internet Explorer от Microsoft	Chrome от Google	Safari от Apple	Opera от Opera Software	Firefox от Mozilla

Возможность добавлять видео с Ютуба

Комментарии (4)

Добавить ответ

Услуги

Готовые решения

Разделы сайта

Контакты

Дорогие друзья!