Видео на странице товара

Question

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

Видео на странице товара

Для магазина ShopScript 7,0

как и куда вставить код для отображения видео на странице товара?

1

Виктор Л. +0

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

Александр Тирон +23 26 сентября 2016 13:05 #

product.image.html

строку:

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

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

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

строку:

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

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

<div class="image general">

строки:

{if !empty($video.url)}
            <li class="product-image-thumbs">
                <a id="product-image-video" href="{$video.url}" class="thumbActive">
                    <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 $image.url_crop|replace:'96x96':'970x0' == $ImgUrl && empty($product.video_url)} thumbActive{/if}"
                    href="javascript:void(0);"
                    data-zoom-image="{$wa->shop->imgUrl($image, '970x0')}"
                    data-image="{$wa->shop->imgUrl($image, $_img_size)}"
                >
                {$wa->shop->imgHtml($image, '96x96', ['alt' => $image.description|escape])}
                </a>
            </li>
        {/foreach}

строку:

<a id="product-image-video" href="{$video.url}" class="thumbActive">

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

<a id="product-image-video" href="{$video.url}">

строку:

class="gallery-data{if $image.url_crop|replace:'96x96':'970x0' == $ImgUrl && empty($product.video_url)} thumbActive{/if}"

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

class="gallery-data{if $image.url_crop|replace:'96x96':'970x0' == $ImgUrl} thumbActive{/if}"

1

ответить

Игорь Колмаков +30 26 июня 2017 15:04 #

напишите мне на почту и адрес сайта и доступ в админку

1

ответить

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

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

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

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

{if !empty($theme_settings.shopSidebarProduct)}
    {$_img_size = '300x0'}
    {$_count_img = 4}
{else}
    {$_img_size = '500x0'}
    {$_count_img = 5}
    <style type="text/css">
        .image.general{
            min-width:500px;
        }
        .image.general img {
            max-width: 500px;
        }
        #product-gallery .jcarousel-container {
            width: 510px;
        }
        #product-gallery .jcarousel-clip-horizontal {
            width: 450px;
        }
        @media only screen and (max-width: 1000px) and (min-width: 320px) {
            .image.general{
            min-width:300px;
            }
            .image.general img {
                max-width: 300px;
            }
            #product-gallery .jcarousel-container {
                width: 310px;
            }
            #product-gallery .jcarousel-clip-horizontal {
                width: 266px;
            }
        }
    </style>
{/if}
{if isset($product.params.gallery)}{$gallery = $product.params.gallery}{/if}
{if $wa->isMobile()}
    {$gallery_type = 2}
{else}
    {if $gallery == 'popup'}{$gallery_type = 2}{elseif $gallery == 'combi'}{$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?v2.1.5"></script>
<script type="text/javascript" src="{$wa_theme_url}jquery.fancybox-buttons.js?v1.0.5"></script>
{/if}
{if $gallery_type == 1 || $gallery_type == 3}
<script type="text/javascript" src="{$wa_theme_url}jquery.elevateZoom.min.js?v3.0.8"></script>
{/if}
<!-- image gallery -->
<div class="align-center">
    {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}
        <div class="corner bottom left">
            {$wa->shop->badgeHtml($product.badge)}
        </div>
        {*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.image_id].ext}
            {/if}
        {*/fix sku image*}
        {/if}
        {$ImgUrl = $wa->shop->productImgUrl($product, '970x0')}
        {if $product.images}<a href="{$ImgUrl}" target="_blank">{/if}
            {$wa->shop->productImgHtml($product, $_img_size, [ 'itemprop' => 'image', 'id' => 'product-image', 'data-zoom-image' => $ImgUrl, 'alt' => $product.name|escape|cat:' ':strip_tags($product.summary)|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) < $_count_img}<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="thumbActive">
                    <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 $image.url_crop|replace:'96x96':'970x0' == $ImgUrl && empty($product.video_url)} thumbActive{/if}"
                    href="javascript:void(0);"
                    data-zoom-image="{$wa->shop->imgUrl($image, '970x0')}"
                    data-image="{$wa->shop->imgUrl($image, $_img_size)}"
                >
                {$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-caret-right"></i></div>',
        buttonPrevHTML: '<div><i class="icon-caret-left"></i></div>'
    });
    
    {if $gallery_type == 1 || $gallery_type == 3}
    /*zoom*/
        $('#product-image').elevateZoom({
            preloading: 0,
            zoomType: "window",
            cursor: "crosshair",
            /*loadingIcon: "{$wa_static_url}wa-content/img/loading16.gif",*/
            zoomWindowFadeIn: 500,
            zoomWindowFadeOut: 750,   
            gallery : "product-gallery",
            galleryActiveClass: "thumbActive",
            zoomWindowWidth:400,
            borderSize: 1,
            borderColour: '#e5e5e5',
            /* uncoment in use tint
            tint: true,
            tintColour: '#f5f5f5',
            tintOpacity: 0.5,
            */
            lensOpacity: 0.7,
            scrollZoom: true,      
            constrainType: 'width'
        });
        var resize_zoom = null;
        $(window).on('resize.zoom', function(){
            if (resize_zoom) {
                clearTimeout(resize_zoom);
            }
            resize_zoom = setTimeout(function(){
                $('.zoomContainer').remove();
                $('#product-image').data('elevateZoom').refresh(1);
            }, 100);
        });
    {/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('thumbActive')){
                    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('thumbActive');
	$(this).addClass('thumbActive');
	return false;
});

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

Павел Гурьев · Answer 2

Павел Гурьев +0 24 сентября 2016 01:11 #

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

1

ответить

score 1 · Answer 3

Здравствуйте. Сделал вроде как все по инструкции. Однако что-то не так. У меня в карточке товара теперь появляются две миниатюры одного и того же видео. В начале и в конце. Между миниатюрами фотографий. Причем последняя миниатюра видео не кликабельная, хотя подсвечивается рамкой как дефолтная. Как сделать чтобы миниатюра видео была одна?

https://747.kz/priglasitelnyy-na-yz-zatu-lunnyy-svet/

Сам код

<h4>product.image.html </h4>

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

{if !empty($theme_settings.shopSidebarProduct)}
{$_img_size = '300x0'}
{$_count_img = 4}
{else}
{$_img_size = '500x0'}
{$_count_img = 5}
<style type="text/css">
.image.general{
min-width:500px;
}
.image.general img {
max-width: 500px;
}
#product-gallery .jcarousel-container {
width: 510px;
}
#product-gallery .jcarousel-clip-horizontal {
width: 450px;
}
@media only screen and (max-width: 1000px) and (min-width: 320px) {
.image.general{
min-width:300px;
}
.image.general img {
max-width: 300px;
}
#product-gallery .jcarousel-container {
width: 310px;
}
#product-gallery .jcarousel-clip-horizontal {
width: 266px;
}
}
</style>
{/if}
{if isset($product.params.gallery)}{$gallery = $product.params.gallery}{/if}
{if $wa->isMobile()}
{$gallery_type = 2}
{else}
{if $gallery == 'popup'}{$gallery_type = 2}{elseif $gallery == 'combi'}{$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?v2.1.5"></script>
<script type="text/javascript" src="{$wa_theme_url}jquery.fancybox-buttons.js?v1.0.5"></script>
{/if}
{if $gallery_type == 1 || $gallery_type == 3}
<script type="text/javascript" src="{$wa_theme_url}jquery.elevateZoom.min.js?v3.0.8"></script>
{/if}

<div class="align-center">
{if !empty($video.url)}

<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}


<div class="image general">
{if $product.images}
<div class="corner bottom left">
{$wa->shop->badgeHtml($product.badge)}
</div>
{*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.image_id].ext}
{/if}
{*/fix sku image*}
{/if}
{$ImgUrl = $wa->shop->productImgUrl($product, '970x0')}
{if $product.images}<a href="{$ImgUrl}" target="_blank">{/if}
{$wa->shop->productImgHtml($product, $_img_size, [ 'itemprop' => 'image', 'id' => 'product-image', 'data-zoom-image' => $ImgUrl, 'alt' => $product.name|escape|cat:' ':strip_tags($product.summary)|escape, 'default' => "`$wa_theme_url`img/dummy200.png" ])}
{if $product.images}</a>{/if}
</div>


{if count($product.images) > 1 || (count($product.images) === 1 && !empty($video.url))}
<div class="gallery" id="product-gallery">
{if count($product.images) < $_count_img}<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}">
<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 $image.url_crop|replace:'96x96':'970x0' == $ImgUrl} thumbActive{/if}"
href="javascript:void(0);"
data-zoom-image="{$wa->shop->imgUrl($image, '970x0')}"
data-image="{$wa->shop->imgUrl($image, $_img_size)}"
>
{$wa->shop->imgHtml($image, '96x96', ['alt' => $image.description|escape])}
</a>
</li>
{/foreach}
{if !empty($video.url)}
<li class="product-image-thumbs">
<a id="product-image-video" href="{$video.url}" class="thumbActive">
<img src="{$video.images[0]}" alt="">
</a>
</li>
{/if}
</ul>
</div>
{/if}

<script type="text/javascript">
$('#product-gallery ul').jcarousel({
scroll: 1,
buttonNextHTML: '<div><i class="icon-caret-right"></i></div>',
buttonPrevHTML: '<div><i class="icon-caret-left"></i></div>'
});

{if $gallery_type == 1 || $gallery_type == 3}
/*zoom*/
$('#product-image').elevateZoom({
preloading: 0,
zoomType: "window",
cursor: "crosshair",
/*loadingIcon: "{$wa_static_url}wa-content/img/loading16.gif",*/
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 750,
gallery : "product-gallery",
galleryActiveClass: "thumbActive",
zoomWindowWidth:400,
borderSize: 1,
borderColour: '#e5e5e5',
/* uncoment in use tint
tint: true,
tintColour: '#f5f5f5',
tintOpacity: 0.5,
*/
lensOpacity: 0.7,
scrollZoom: true,
constrainType: 'width'
});
var resize_zoom = null;
$(window).on('resize.zoom', function(){
if (resize_zoom) {
clearTimeout(resize_zoom);
}
resize_zoom = setTimeout(function(){
$('.zoomContainer').remove();
$('#product-image').data('elevateZoom').refresh(1);
}, 100);
});
{/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('thumbActive')){
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>

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

Видео на странице товара

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

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

Услуги

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

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

Контакты

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