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

Как сделать чтобы при заходе в карточку товара открывалась картинка товара, а не видео как сейчас. Видео чтобы открывалось только после клика на вторую(!) миниатюру?!

Шаблон product.html сейчас имеет вид:


<script type="text/javascript" src="{$wa_theme_url}swipebox/js/jquery.swipebox.js"></script>
<div itemscope itemtype="http://schema.org/Product">
    <div class="container" id="product">
        <div class="row-fluid">
            <div class="span6" id="overview">

                {if method_exists($product, 'getVideo')}
                    {$video = $product->getVideo(['96x96'])}
                {else}
                    {$video = null}
                {/if}

                <!-- photo -->
                {if $product.images}
                <div class="product-gallery">
                <div class="row-fluid">
                    {if count($product.images) > 1 || (count($product.images) === 1 && $video.url)}
                        <div class="span2">
                            <!-- Small pic -->
                            {if count($product.images) > 3}<div id="slider-productimage-prev"></div>{/if}
                            <div{if !$wa->isMobile()} class="more-images"{/if} id="product-gallery">

                                {foreach $product.images as $image}
                                <div class="smallimage image{if $image.id == $product.image_id && empty($product.video_url)} selected{/if}">
                                    <a id="product-image-{$image.id}" href="{$wa->shop->imgUrl($image, '970')}" {if $image.description} title="{$image.description}"{/if}>
                                    {$wa->shop->imgHtml($image, '75x75', [ 'alt' => $product.name|escape ])}
                                    </a>
                                </div>
                                {/foreach}
                                
                            {if $video.url}
                                <div class="smallimage image video selected">
                                    <div class="video_product">
                                    <a id="product-image-video" href="{$video.url}">
                                        <img src="">
                                    </a>
                                    </div>
                                </div>
                                {/if}    
                                
                                
                            </div>
                            {if count($product.images) > 3}<div id="slider-productimage-next"></div>{/if}

                        </div>
                        <div class="span10 text-center">
                    {else}
                        <div class="span12 text-center">
                    {/if}

                            {if method_exists($product, 'getVideo')}
                            {$video = $product->getVideo(['75x75'])}
                            {if $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="100%" height="250" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                                </div>
                                <meta itemprop="width" content="{$video.width}">
                                <meta itemprop="height" content="{$video.height}">
                            </div>
                            {/if}
                            {else}
                            {$video = null}
                            {/if}

                        <!-- Big picture -->
                        <div class="image" id="product-core-image" {if $video.url}style="display:none"{/if}>
                            {$wa->shop->badgeHtml($product.badge)}
                            <a class="swipebox" href="{$wa->shop->productImgUrl($product, '970')}">
                                {$wa->shop->productImgHtml($product, '400', [ 'itemprop' => 'image', 'id' => 'product-image', 'alt' => $product.name|escape ])}
                            </a><br>
                           <em>{$product.name}</em>
                        </div>

                        <div id="switching-image" style="display: none;"></div>

                    </div>
                </div>
                </div>
                {else}
                <div class="product-gallery text-center">
                    <img src="{$wa_theme_url}img/no-foto.gif">
                </div>
                {/if}
                
{if $wa->isMobile()}
{else}
{shopZoomerPlugin::display()}
{/if}                
                
                
                
            </div>
            <div class="span6">

                {$sku = $product.skus[$product.sku_id]}
                {if $sku.sku}
                <!-- Articul -->
                <div class="gray">[`Articul`]: {$sku.sku|escape}</div>
                {/if}
                <div class="row-fluid">
                    <div class="span10">
                        <h1>
                            <span itemprop="name">{$product.name|escape}</span>
                        </h1>
                    </div>
                    {if !$wa->isMobile()}
                    <div class="span2">
                        <div class="compare-favorite">
                            {$favorite_p = waRequest::cookie("shop_favorite", '', waRequest::TYPE_STRING)}
                            {assign var=favorite_p_split value=","|explode:$favorite_p}
                            <a href="#" data-product="{$product.id}" title="[`Compare`]" class="btn_tooltips compare-favorite-icon compare-link{if $wa->shop->inComparison($product.id)} active{/if}"><i class="fa fa-sliders"></i></a>
                            <a href="#" data-product="{$product.id}"  title="[`Favorite`]" class="btn_tooltips compare-favorite-icon favorite-link {if in_array($product.id, $favorite_p_split)} active{/if}"><i class="fa fa-heart"></i></a>
                        </div>
                    </div>
                    {/if}
                </div>

                
{shopSpecialofferPlugin::product($product)}                 
                
                <div class="cart priceblock" id="cart-flyer">
                    <form id="cart-form{if $wa->get('cart')}-dialog{/if}" method="post" action="{$wa->getUrl('/frontendCart/add')}">
                        <!-- stock info -->
                        {$product_available = $product.status}
                        {if $product_available || count($product.skus) > 1}
                        <div class="stocks">
                            {function name=in_stock n=0 low=5 critical=2}
                            {if $n > $low or $n === null}
                            <span class="stock-high"><i class="fa fa-circle"></i> [`In stock`]</span>
                            {elseif $n > $critical}
                            <span class="stock-low"><i class="fa fa-circle yellow"></i>{* _w("Only %d left in stock", "Only %d left in stock", $n) *}{_w("Only a few items left")}</span>
                            {elseif $n > 0}
                            <span class="stock-critical"><i class="fa fa-circle red"></i>{_w("Only %d left in stock", "Only %d left in stock", $n)}</span>
                            {else}
                            <span class="stock-none red"><i class="fa fa-circle"></i>{if $wa->shop->settings('ignore_stock_count')}[`Pre-order only`]{else}[`Out of stock`]{/if}</span>
                            {/if}
                            {/function}
                            {foreach $product.skus as $sku}
                            <div {if $sku.id != $product.sku_id}style="display:none"{/if} class="sku-{$sku.id}-stock">
                                {if $sku.stock}
                                {foreach $stocks as $stock_id => $stock}
                                {if isset($sku.stock[$stock_id])}
                                {$stock_count = $sku.stock[$stock_id]}
                                {else}
                                {$stock_count = null}
                                {/if}
                                {$stock.name}: {in_stock n=$stock_count low=$stock.low_count critical=$stock.critical_count}<br>
                                {/foreach}
                                {else}
                                {in_stock n=$sku.count}
                                {/if}
                            </div>
                            {/foreach}
                            {if $product.sku_type}
                            <div class="sku-no-stock">
                                <span class="stock-none red"><i class="fa fa-circle"></i> [`Product with the selected option combination is not available for purchase`]</span>
                            </div>
                            {/if}
                        </div>
                        {/if}
                        <div class="add2cart">
                            <span data-price="{shop_currency($product.price, null, null, 0)}" class="price nowrap">{shop_currency($product.price)}</span>
                            {if $product.compare_price > 0}<s class="compare-at-price"> {shop_currency($product.compare_price)}</s>
                            {/if}
{shopSkidkavprocentahPlugin::inProductCard()}
                        </div>

                        {if $product.sku_type}
                        <!-- SELECTABLE FEATURES selling mode -->
                        {$default_sku_features = $product.sku_features}
                        {$product_available = $product.status}
                        {if $theme_settings.selectable_features_control == 'inline'}
                        <div class="options">
                            {foreach $features_selectable as $f}
                            <div class="inline-select{if $f.type == 'color'} color-fix{/if}">
                                {foreach $f.values as $v_id => $v}
                                {if !isset($default_sku_features[$f.id])}{$default_sku_features[$f.id]=$v_id}{/if}
                                <a data-value="{$v_id}" href="#"{if $v_id == ifset($default_sku_features[$f.id])} class="selected"{/if}{if $f.type == 'color'} style="{$v->style}; margin-bottom: 20px;"{/if}>
                                {if $f.type == 'color'} <i class="icon16 checkmark color_checkmark"></i>{/if}
                                {if $f.type == 'color'} <span class="color_name">{strip_tags($v)}</span>{else}{$v}{/if}
                                </a>
                                {/foreach}
                                <input type="hidden" data-feature-id="{$f.id}" class="sku-feature" name="features[{$f.id}]" value="{ifset($default_sku_features[$f.id])}">
                            </div>
                            {/foreach}
                        </div>
                        {else}
                        <div class="options">
                            {foreach $features_selectable as $f}
                            <label class="name">{$f.name}:</label>
                            <select data-feature-id="{$f.id}" class="sku-feature" name="features[{$f.id}]">
                                {foreach $f.values as $v_id => $v}
                                <option value="{$v_id}" {if $v_id == ifset($default_sku_features[$f.id])}selected{/if}>{$v|strip_tags}</option>
                                {/foreach}
                            </select>
                            {/foreach}
                        </div>
                        {/if}
                        <!-- list all SKUs for Schema.org markup -->
                        {foreach $product.skus as $sku}
                        <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                            {$sku_available =  $product.status && $sku.available && ($wa->shop->settings('ignore_stock_count') || $sku.count === null || $sku.count > 0)}
                            {if $sku.name}<meta itemprop="name" content="{$sku.name|escape}">{/if}
                            <meta itemprop="price" content="{$sku.price}">
                            <meta itemprop="priceCurrency" content="{$product.currency}">
                            {if (!($sku.count === null) && $sku.count <= 0)}
                            <link itemprop="availability" href="http://schema.org/OutOfStock" />
                            {else}
                            <link itemprop="availability" href="http://schema.org/InStock" />
                            {/if}
                        </div>
                        {/foreach}
                        {else}
                        <!-- FLAT SKU LIST selling mode -->
                        {$product_available = false}
                        {if count($product.skus) > 1}
                        {* SKU radio buttons *}
                        <ul class="skus">
                            {foreach $product.skus as $sku}
                            {$sku_available =  $product.status && $sku.available && ($wa->shop->settings('ignore_stock_count') || $sku.count === null || $sku.count > 0)}
                            <li itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                <label class="{if !$sku.available}disabled{/if} radio">
                                <input name="sku_id" type="radio" value="{$sku.id}"{if !$sku.available} disabled="true"{/if}{if !$sku_available}data-disabled="1"{/if}{if $sku.id == $product.sku_id} checked="checked"{/if} data-compare-price="{shop_currency($sku.compare_price, $product.currency, null, 0)}" data-price="{shop_currency($sku.price, $product.currency, null, 0)}"{if $sku.image_id} data-image-id="{$sku.image_id}"{/if}> <span itemprop="name">{$sku.name|escape}</span>
                                {if $sku.sku}<span class="hint">{$sku.sku|escape}</span>{/if}
                                <meta itemprop="price" content="{$sku.price}">
                                <meta itemprop="priceCurrency" content="{$product.currency}">
                                <span class="price tiny nowrap">- {shop_currency_html($sku.price, $product.currency)}</span>
                                {if (!($sku.count === null) && $sku.count <= 0)}
                                <link itemprop="availability" href="http://schema.org/OutOfStock" />
                                {else}
                                <link itemprop="availability" href="http://schema.org/InStock" />
                                {/if}
                                </label>
                            </li>
                            {$product_available = $product_available or $sku_available}
                            {/foreach}
                        </ul>
                        {else}
                        {* in case there is only one SKU, don't display the selector *}
                        <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                            {$sku = $product.skus[$product.sku_id]}
                            {if $sku.name}<meta itemprop="name" content="{$sku.name|escape}">{/if}
                            <meta itemprop="price" content="{$sku.price}">
                            <meta itemprop="priceCurrency" content="{$product.currency}">
                            {if !$sku.available}
                            <link itemprop="availability" href="http://schema.org/Discontinued" />
                            {elseif !$wa->shop->settings('ignore_stock_count') && !($sku.count === null || $sku.count > 0)}
                            <link itemprop="availability" href="http://schema.org/OutOfStock" />
                            {else}
                            <link itemprop="availability" href="http://schema.org/InStock" />
                            {/if}
                            <input name="sku_id" type="hidden" value="{$product.sku_id}">
                            {$product_available = $product.status && $sku.available && ($wa->shop->settings('ignore_stock_count') || $sku.count === null || $sku.count > 0)}
                        </div>
                        {/if}
                        {/if}

                        {if $services}
                        <!-- services -->
                        <div class="services">
                            {foreach $services as $s}
                            <div class="service-{$s.id}">
                                <label class="checkbox">
                                    <input data-price="{shop_currency($s.price, $s.currency, null, 0)}" {if !$product_available}disabled="disabled"{/if} type="checkbox" name="services[]" value="{$s.id}"> {$s.name|escape} {if $s.price && !isset($s.variants)}(+<span class="service-price">{shop_currency($s.price, $s.currency)}</span>){/if}
                                </label>
                                {if isset($s.variants)}
                                <select data-variant-id="{$s.variant_id}" class="service-variants" name="service_variant[{$s.id}]" disabled>
                                    {foreach $s.variants as $v}
                                    <option {if $s.variant_id == $v.id}selected{/if} data-price="{shop_currency($v.price, $s.currency, null, 0)}" value="{$v.id}">{$v.name|escape} (+{shop_currency($v.price, $s.currency)})</option>
                                    {/foreach}
                                </select>
                                {else}
                                <input type="hidden" name="service_variant[{$s.id}]" value="{$s.variant_id}">
                                {/if}
                            </div>
                            {/foreach}
                        </div>
                        {/if}
                        <div class="purchase">
                            <!-- price -->
                            <div class="add2cart cart-group">
                                <ul class="inline">
                                    <li>
                                        <div class="input-prepend input-append select_quantity">
                                            <span class="add-on"><a href="#" class="dec_cart"><i class="fa fa-minus"></i></a></span>
                                            <input type="text" class="form-control quantity qty select_input_cart" name="quantity" value="1" autocomplete="off">
                                            <span class="add-on"><a href="#" class="inc_cart"><i class="fa fa-plus"></i></a></span>
                                        </div>
                                    </li>
                                    <li>
                                        <input type="submit" {if !$product_available}disabled="disabled"{/if} value="{if $wa->shop->cart->total() > 0}[`Add to cart`]{else}[`Buy now`]{/if}">
                                    </li>
                                    
                                    <li>
                                    {shopOneclickPlugin::display($product)}                                        
                                    </li>                                    
                                    
                                    
                                    <li>
                                        <!-- one click plugin -->
                                        <a href="#" class="btn" style="display:none;">[`One click buy`]</a>
                                    </li>
                                </ul>
                                <input type="hidden" name="product_id" value="{$product.id}">
                            </div>
                            <span class="added2cart" style="display: none;">{sprintf('[`%s is now <a href="%s"><strong>in your shopping cart</strong></a>`]', $product.name|escape, $wa->getUrl('shop/frontend/cart'))}</span>
                            <div class="to-cart" style="display: none;">
                                <a href="{$wa->getUrl('shop/frontend/cart')}" class="btn"><i class="fa fa-shopping-cart"></i> [`Go to cart`]</a>
                            </div>
                            <div class="to-back" style="display: none;">
                                <a href="#" class="btn-bordered">[`Continue shopping`]</a>
                            </div>
                        </div>
                    </form>
                    <script>
                        ( function($) {
                            $.getScript("{$wa_theme_url}product.js?v{$wa_theme_version}", function() {
                                if (typeof Product === "function") {
                                    new Product('#cart-form{if $wa->get('cart')}-dialog{/if}', {
                                        currency: {json_encode($currency_info)}
                                    {if count($product.skus) > 1 or $product.sku_type}
                                ,services: {json_encode($sku_services)}
                                    {/if}
                                    {if $product.sku_type}
                                ,features: {json_encode($sku_features_selectable)}
                                    {/if}
                                });
                                }
                            });
                        })(jQuery);
                    </script>
                    <!-- plugin hook: 'frontend_product.cart' -->
                    {* @event frontend_product.%plugin_id%.cart *}
                    {foreach $frontend_product as $_}{$_.cart}{/foreach}
                </div>
                <!-- plugin hook: 'frontend_product.block_aux' -->
                {* @event frontend_product.%plugin_id%.block_aux *}
                {if !empty($frontend_product)}
                <div class="aux">
                    {foreach $frontend_product as $_}{$_.block_aux}{/foreach}
                </div>
                {/if}

                <!-- social -->
                <script type="text/javascript">(function() {
                    if (window.pluso)if (typeof window.pluso.start == "function") return;
                    if (window.ifpluso==undefined) { window.ifpluso = 1;
                        var d = document, s = d.createElement('script'), g = 'getElementsByTagName';
                        s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true;
                        s.src = ('https:' == window.location.protocol ? 'https' : 'http')  + '://share.pluso.ru/pluso-like.js';
                        var h=d[g]('body')[0];
                        h.appendChild(s);
                    }})();</script>
                    <div data-description="{$product.summary|escape}" data-title="{$product.name}" data-url="{$smarty.server.HTTP_HOST}{$smarty.server.REQUEST_URI}" class="pluso" data-background="transparent" data-options="small,round,line,horizontal,counter,theme=04" data-services="vkontakte,odnoklassniki,facebook,twitter,google,moimir,email,print"></div>
<p>                
    <a><img  id="viber" src="/wa-data/public/shop/themes/universal/img/viber.png" alt="" width="60" height="20"></a>
    <script>
    var buttonID = "viber";
    var text = "Поделиться:";
    document.getElementById(buttonID).setAttribute('href', "viber://forward?text=" + encodeURIComponent(text + " " + window.location.href));
    </script>                    
</p>                <!-- categories -->
                {if count($product.categories) > 1}
                <div class="sub">
                    [`Categories`]:
                    {foreach $product.categories as $c}{if $c.status}
                    <a href="{$wa->getUrl('/frontend/category', ['category_url' => $c.full_url])}">{$c.name|escape}</a>
                    {/if}{/foreach}
                </div>
                {/if}
                <!-- tags -->
                {if $product.tags}
                <div class="sub" id="product-tags">
                    [`Tags`]:
                    {foreach $product.tags as $t}
                    <a href="{$wa->getUrl('/frontend/tag', ['tag' => urlencode($t)])}">{$t}</a> 
                    {/foreach}
                </div>
                {/if}
                
{$_b = shopProductbrandsPlugin::productBrand($product.id)}
{if $_b}Коллекции: 
<a href="{$_b.url}">{if $_b.image}<img width="150px" src="{$wa_url}wa-data/public/shop/brands/{$_b.id}/{$_b.id}{$_b.image} ">{else}{$_b.name}{/if}</a>
{/if}    
<br>

<br><br>                
                
{$prev = null}
{$next = null}
{$siblings = $wa->shop->products("category/`$product.category_id`")}
{if count($siblings) > 3}
    {foreach $siblings as $sibling}
        {if $sibling.id == $product.id}
            {$next = $sibling}
        {/if}
        {if !$next && $sibling.id != $product.id}
            {$prev = $sibling}
        {/if}
        {if $next && $sibling.id != $product.id}
            {$next = $sibling}
            {break}
        {/if}
    {/foreach}
    {$last_sibling = end($siblings)}
    {if $last_sibling.id == $product.id}
        {$next = reset($siblings)}
    {/if}
    {if !$prev}
        {$prev = end($siblings)}
    {/if}

{/if}

{if $prev || $next}
    {* шаблон *}
            {if $prev && !$next}
<a href="{$prev.frontend_url}">← {$prev.name}</a>  

            {elseif $next && !$prev}
               
<a href="{$next.frontend_url}">{$next.name} →</a>  
            {else}<a href="{$prev.frontend_url}">← {$prev.name}</a>          

<a href="{$next.frontend_url}">{$next.name} →</a>
            {/if}
              {/if}                    
                
                
            </div>

        </div>
    </div>

    <div class="container">
        <!-- product internal nav -->
        <ul class="tabs">
            <li class="selected" data-link="description"><a href="{$wa->shop->productUrl($product)}"><i class="fa fa-bars"></i> [`Overview`]</a></li>
            {if $product.features}<li data-link="features"><a href="{$wa->shop->productUrl($product)}"><i class="fa fa-server"></i> [`Features`]</a></li>{/if}

            {foreach $product.pages as $page}
            <li data-link="pages-{$page@iteration}"><a href="#">{$page.name|escape}</a></li>
            {/foreach}
            <!-- plugin hook: 'frontend_product.menu' -->
            {* @event frontend_product.%plugin_id%.menu *}
            {foreach $frontend_product as $_}{$_.menu}{/foreach}
            {$crossselling = $product->crossSelling(10)}
            {if $crossselling}<li class="uppselling-scroll"><a href="#"><i class="fa fa-exclamation-circle"></i>[`Related product`]</a></li>{/if}
        </ul>

        <div class="product-nav-block">
            <!-- plugin hook: 'frontend_product.block' -->
            {* @event frontend_product.%plugin_id%.block *}
            {foreach $frontend_product as $_}{$_.block}{/foreach}

            {if $product.description}
            <div id="description-tab" class="description product-tab"  itemprop="description">{$product.description}</div>
            {else}
            <div id="description-tab"  class="description  product-tab" itemprop="description">[`Description for`] <b>{$product.name|escape}</b> [`coming soon`]
            <br><br>
<b>{$product.name|escape} купить в интернет магазине оптом и в розницу! Москва, магазин Белый Барс.</b> 
            </div>
            {/if}

            <!-- product features -->
            {if $product.features}
            <ul class="product-features-scroll product-tab" id="features-tab"  style="display:none;">
                {foreach $product.features as $f_code => $f_value}
                <li class="g-clearfix">
                    <div class="featuresblock">
                        <span><b>{$features[$f_code].name|escape}</b></span>
                    </div>
                    <div class="featuresblock">
                        {if is_array($f_value)}{implode(', ', $f_value)}{else}{$f_value}{/if}
                    </div>
                </li>
                {/foreach}
            </ul>

            {/if}



            <!-- Pages -->
            {if $product.pages}
            {foreach $product.pages as $a}
            <div id="pages-{$a@iteration}-tab" class="product-tab" style="display:none;">
                <h3>{$a.name}</h3>
                <div>{$a.content}</div>
            </div>
            {/foreach}
            {/if}
        </div>

        <!-- RELATED PRODUCTS -->
        {$upselling = $product->upSelling(10)}
        {$crossselling = $product->crossSelling(10)}

        {if $upselling || $crossselling}
        {if $crossselling}
        <div class="related">
            <h3>{sprintf('[`Customers who bought %s also bought`]', $product.name|escape)}</h3>
            <ul class="thumbs product-thumbs">
                {include file="list-thumbs.html" products=$crossselling type="standart"  big="no"}
            </ul>
        </div>
        {/if}

        {if $upselling}
        <div class="related">
            <h3>
                [`See also`]
                {$compare_ids = array_merge(array($product.id), array_keys($upselling))}
                <a href="#" onClick="javascript:window.location='{$wa->getUrl('/frontend/compare', ['id' => implode(',', $compare_ids)])}';return false;">[`Compare all`]</a>
            </h3>
            <ul class="thumbs product-thumbs">
                {include file="list-thumbs.html" products=$upselling }
            </ul>
        </div>
        {/if}
        {/if}
        
        <div class="header-block">
        <h3>Популярные продукты в этой категории
        </h3>
        {shopFnx_relinkPlugin::GetContent ()}
        </div>        
        

        <!-- SEEN PRODUCTS -->
        {$view_p = waRequest::cookie("shop_view", '', waRequest::TYPE_STRING)}
        {$view_arr = explode(',', $view_p)}
        {if $view_arr|count  > 0 && $view_p}
        <div class="header-block">
            <h3>[`Viewed products`]
                {if $view_arr|count  > 5}<span id="slider-product-prev"></span><span id="slider-product-next"></span>{/if}
            </h3>
            {$products_ = $wa->shop->products('id/'|cat:$view_p)}
            {$products = []}
            {foreach $view_arr as $a}
                {$products[] = $products_[$a]}
            {/foreach}
            <div class="fixmargin">
                <ul class="thumbs product-slider-thumbs {if $view_arr|count  > 5 &&  !$wa->isMobile()}product_slider{else}slidefix{/if}">
                    {include file="list-thumbs.html" products=$products}
                </ul>
            </div>
        </div>
        {/if}
    </div>
</div>

Сейчас так:

Нужно так:

1 ответ

  • 1
    Эрик Webasyst 12 марта 2018 10:19 #

    Если вы ещё не нашли ответ на свой вопрос, подробную поддержку по настройке программных продуктов вы также можете получить от партнёров Webasyst.

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

Чтобы добавить комментарий, зарегистрируйтесь или войдите