Jump to content

Recommended Posts

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

 

 

мой код product.tpl 

 

{* Страница товара *}
 
<!-- Хлебные крошки /-->
<div class="row">
    <section class="breadcrumb lower twelve columns">
        {foreach $product->categories as $cat}
        <h2 class="title_page upper">{$cat->name} </h2>
        {/foreach}
        ← <a rel="nofollow" href="javascript:history.back();">Вернуться</a>
        / <a href="./">Главная</a>
        {foreach from=$category->path item=cat}
        → <a href="./catalog/{$cat->url}/">{$cat->name|escape}</a>
        {/foreach}
        {if $brand}
        → <a href="./catalog/{$cat->url}/{$brand->url}/">{$brand->name|escape}</a>
        {/if}
        → <strong>{$product->name|escape}</strong>
    </section>
</div>
<!-- Хлебные крошки #End /-->
 
<div class="row">
    <div class="twelve columns">
        <hr class="line_separe_black bgsprite">
    </div>
</div>
 
<section class="row one_product producteffect">
    
    <div class="five columns">
     
        <!-- Большое фото -->
        {if $product->image}
             <div class="image">
        <a href="{$product->image->filename|resize:800:600:w}" class="zoom" data-rel="group"><img src="{$product->image->filename|resize:300:300}" alt="{$product->product->name|escape}" /></a>
    </div>
        {/if}
        <!-- Большое фото (The End)-->
     
<!-- Дополнительные фото продукта -->
    {if $product->images|count>1}
    <div class="images">
        {* cut удаляет первую фотографию, если нужно начать 2-й - пишем cut:2 и тд *}
        {foreach $product->images|cut as $i=>$image}
            <a href="{$image->filename|resize:800:600:w}" class="zoom" data-rel="group"><img src="{$image->filename|resize:95:95}" alt="{$product->name|escape}" /></a>
        {/foreach}
    </div>
    {/if}
    <!-- Дополнительные фото продукта (The End)-->
        
    </div>
    
    <div class="seven columns">
    
        <div class="row product_about">
            <div class="twelve columns">
                <h1 data-product="{$product->id}">{$product->name|escape}</h1>
            </div>
        </div>
        
        <div class="row product_description">
            <div class="1">
                {if $brand->image}
                <a href="./brands/{$brand->url}/"><img src="{$config->brands_images_dir}{$brand->image}" alt="Все модели {$brand->name|escape}"></a>
                {/if}
            </div>
            <div class="1" style="
    padding: 10px;
">
                <p class="content_prod">{$product->body|strip_tags}</p>
            </div>
        </div>
        
        <div class="row">
            <div class="five columns mobile-two">
                <div class="product_offer">            
                    {if $product->variants|count > 0}
                    <!-- Цена и заказ товара -->
                    <form class="carteffect custom" action="/cart/" method="get">
                    
                        <!-- Цена товара -->
                        <div class="price_prod">
                            <span class="currency_price"><strong>{$product->variant->price|convert}</strong> {$currency->sign|escape}</span>
                            {if $product->variant->compare_price > 0}<sup class="old_price">{$product->variant->compare_price|convert} {$currency->sign|escape}</sup>{/if}
                        </div>
                        <!-- Цена товара  (The End) -->
                        
                        
                        <!-- Выбор варианта товара -->
                        {if $product->variants|count < 2}
                        <div class="hide">
                            <select class="expand" name="variant" id="customDropdown">
                                {foreach $product->variants as $v}
                                <option value="{$v->id}" {if $v->compare_price > 0}compare_price="{$v->compare_price|convert} {$currency->sign|escape}"{/if} price="{$v->price|convert}" {if $v->id == $product->variant->id}selected{/if}>
                                {$v->name}
                                </option>
                                {/foreach}
                            </select>
                        </div>
                        <br/>
                        {else}
                        <div class="size_prod">
                            <label for="customDropdown"><b>Выберите размер</b></label>
                            
                            <select class="expand" name="variant" id="customDropdown">
                                {foreach $product->variants as $v}
                                <option value="{$v->id}" {if $v->compare_price > 0}compare_price="{$v->compare_price|convert} {$currency->sign|escape}"{/if} price="{$v->price|convert}" {if $v->id == $product->variant->id}selected{/if}>
                                {$v->name}
                                </option>
                                {/foreach}
                            </select>
 
                            <div class="gid_size bgsprite"><a href="javascript:;" data-reveal-id="SizeInfo">гид по размерам</a></div>
                        </div>
                        {/if}
                        
 
                        <!-- В корзину -->
                        <input type="submit" class="button radius addbutton expand" value="добавить в корзину" added_text="добавлено">
                        <!-- В корзину (The End) -->
                        
                    </form>
                    <!-- Цена и заказ товара (The End)-->
                    {else}
                    <big>нет в наличии</big>
                    {/if}
                </div>
            </div>
            
            <div class="seven columns mobile-two">
            
        <div class="other_colour">
         <script type="text/javascript" src="//yastatic.net/share/share.js" charset="utf-8"></script><div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none" data-yashareQuickServices="vkontakte,facebook,twitter,odnoklassniki,moimir,lj,gplus"></div>
         </div>
            
                <!-- Характеристики товара -->
                <ul class="more_info_prod circle">
                    <li>Артикул: {$product->variant->sku}</li>
                    {if $product->features}
                    {foreach $product->features as $f}
                    
                    {if $f->name != 'Цена' && $f->name != 'Цена (руб)'}
                    <li>{$f->name}: {$f->value}</li>
                    {/if}
                    {/foreach}
                    {/if}
                </ul>
                
                
            </div>
        </div>
        
    </div>
    
</section>
 
{include file='seealso.tpl'}
 
{include file='sizegid.tpl'}
{* Увеличитель картинок *}
{literal}
<script type="text/javascript" src="js/fancybox/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" href="js/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
 
<script>
$(function() {
    // Раскраска строк характеристик
    $(".features li:even").addClass('even');
 
    // Зум картинок
    $("a.zoom").fancybox({
        prevEffect    : 'fade',
        nextEffect    : 'fade'});
    });
</script>
{/literal}
 
 
Код index
 
<!DOCTYPE html>
 
{*
    Общий вид страницы
    Этот шаблон отвечает за общий вид страниц без центрального блока.
*}
 
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="ru"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="ru"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="ru"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js" lang="ru"> <![endif]-->
<html>
<head>
    <base href="{$config->root_url}/"/>
    <title>{$meta_title|escape}</title>
    
    {* Метатеги *}
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="description" content="{$meta_description|escape}" />
    <meta name="keywords" content="{$meta_keywords|escape}" />
    
    <!-- Set the viewport width to device width for mobile -->
    <meta name="viewport" content="width=device-width" />
    
    <!--[if lt IE 9]>
    <![endif]-->
    
    {* Стили *}
    <link href="design/{$settings->theme|escape}/css/foundation.css" rel="stylesheet" type="text/css" media="screen"/>
    <link href="design/{$settings->theme|escape}/css/main.css" rel="stylesheet" type="text/css" media="screen"/>
    <link href="design/{$settings->theme|escape}/images/favicon.ico" rel="icon" type="image/x-icon"/>
    <link href="design/{$settings->theme|escape}/images/favicon.ico" rel="shortcut icon" type="image/x-icon"/>
    
    <link href="js/baloon/css/baloon.css" rel="stylesheet" type="text/css" media="screen"/>
    
    {* JQuery *}
    <script src="design/{$settings->theme|escape}/js/jquery.js"></script>
 
</head>
<body>
<div id="wrap">
 
    <!-- Шапка (The End)-->
    {include file='header.tpl'}
    <!-- Шапка (The End)-->    
 
    <!-- Вся страница -->
    <div role="main">
        <!-- Основная часть -->
        {$content}
        <!-- Основная часть (The End) -->
    </div>
    <!-- Вся страница (The End)-->
    
    <div id="push"></div>
</div>
 
<!-- Футер -->
{include file='footer.tpl'}
<!-- Футер (The End)--> 
 
<!-- Included JS Files (Compressed) -->
<script src="design/{$settings->theme|escape}/js/foundation.min.js"></script>
<script src="design/{$settings->theme|escape}/js/jquery.zoom.js"></script>
 
 
{* Всплывающие подсказки для администратора *}
{if $smarty.session.admin == 'admin'}
<script src ="js/admintooltip/admintooltip.js" type="text/javascript"></script>
<link href="js/admintooltip/css/admintooltip.css" rel="stylesheet" type="text/css" media="screen"/>
{/if}
 
{* Аяксовая корзина *}
<script src="design/{$settings->theme}/js/jquery-ui.min.js"></script>
<script src="design/{$settings->theme}/js/ajax_cart.js"></script>
 
{* Подключаем js-проверку формы *}
<script src="js/baloon/js/baloon.js" type="text/javascript"></script>
 
{* Автозаполнитель поиска *}
<script src="js/autocomplete/jquery.autocomplete-min.js" type="text/javascript"></script>
 
<script src="design/{$settings->theme|escape}/js/app.js"></script>
 
 
 
</body>
</html>
 
В css 
 
/* @group Товар подробно */
.product .image {
    text-align: center;
    width: 300px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    float: left;
    padding: 5px;
    margin-right: 20px;
}
.product .image img{
    max-width: 300px;
}
.product .images {
    float: left;
    clear: left;
    width: 300px;
    margin-right: 20px;
    margin-bottom: 10px;
    padding-top: 15px;
    padding-bottom: 15px;
}
.product .images img{
    text-align: center;
    width: 50px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    float: left;
    padding: 5px;
    margin: 4px 10px 10px 0px;
}
.product .description{
    float: right;
    width: 330px;
}
 
.product .features {
    list-style: none;
    width: 100%;
    display: block;
    clear: both;
    margin-top: 15px;
    margin-bottom: 25px;
    border-bottom: 1px solid #e0e0e0;
}
.product .features li {
    padding: 10px 5px 10px 5px;
    overflow: hidden;
    border-top: 1px solid #e0e0e0;
    background-color: #f0f0f0;
}
.product .features li.even{
    background-color: #e9e9e9;
}
.product .features label {
    font-style: normal;
    display: block;
    width: 30%;
    float: left;
}
.product .features span {
    float: left;
    display: block;
    width: 70%;
}
.product .variants {
    float: left;
    font-size: 12px;
}
.product .variant td{
    padding-bottom: 6px;
    vertical-align: middle;
}
.product .compare_price {
    font-size: 14px;
    text-decoration: line-through;
    white-space: nowrap;
    color: #707070;
}
.product .price { 
    font-size: 14px;
    white-space: nowrap;
}
.product .variant_name {
    float: left;
    margin-right: 10px;
    font-size: 12px;
}
.product .variant_radiobutton {
    margin-right: 5px;
    margin-left: 0px;
}
#back_forward {
    font-size: 14px;
    margin-bottom: 20px;
    clear: both;
}
#back_forward a.prev_page_link{
    margin-right: 20px;
}
/* @end — Товар подробно*/
 
 
.tiny_products {
    list-style: none;
    display: block;
}
.tiny_products .product{
    width: 210px;
    margin-right: 10px;
    margin-bottom: 30px;
    display: -moz-inline-box; 
    display: inline-block; 
    *zoom: 1; 
    *display: inline;
    word-spacing: normal;
    vertical-align: top;
}
.tiny_products .product .image {
    vertical-align: middle;
    text-align: center;
    width: 200px;
    height: 200px;
    line-height: 200px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    padding: 5px;
    margin-bottom: 10px;
}
.tiny_products .product .image img{
    vertical-align: middle;
    max-width: 200px;
}
.tiny_products .product h3 {
    font-size: 14px;
    margin-bottom: 10px;
    font-weight: normal;
}
.tiny_products .product h3.featured{
    background: url(../images/star.png) no-repeat;
    background-position: left middle;
    padding-left: 20px;
}
 
 
 
 
 
.products {
    list-style: none;
    display: block;
}
.products .product{
    width: 100%;
    display: block;
    clear: both;
    overflow: hidden;
}
.products .product .image {
    text-align: center;
    width: 200px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    float: left;
    padding: 5px;
    margin: 4px 0px 20px 0px;
}
.products .product .image img{
    max-width: 200px;
}
.products .product .product_info {
    float: right;
    width: 450px;
    margin-bottom: 40px;
}
.products .product h3 {
    font-size: 20px;
    margin-bottom: 5px;
    font-weight: normal;
}
.products .product h3.featured{
    background: url(../images/star.png) no-repeat;
    background-position: left middle;
    padding-left: 20px;
}
 
.products .product .annotation {
    font-size: 12px;
    color: #505050;
    margin-bottom: 5px;
}

 

Link to post
Share on other sites
  • 3 months later...

та же проблема. Картинка не увеличивается, а открывается в отдельном окне. http://kyxtex.ru/products/lex-gs-600-inox-vstraivaemaya-vytyazhka

 

в самом низу в product.tpl должны быть строки

 

{* Увеличитель картинок *}
{literal}
<script type="text/javascript" src="js/fancybox/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" href="js/fancybox/jquery.fancybox.css" type="text/css" media="screen" />

<script>
$(function() {
	// Раскраска строк характеристик
	$(".features li:even").addClass('even');

	// Зум картинок
	$("a.zoom").fancybox({
		prevEffect	: 'fade',
		nextEffect	: 'fade'});
	});
</script>
{/literal}

у вас они подключены, но файла js/fancybox/jquery.fancybox.css  нет - https://yadi.sk/i/uEcdxVCThZH7i

Link to post
Share on other sites
  • 3 weeks later...

Та же проблема с другим сайтом. Но здесь файлы прописаны как на предыдущем, но картинка открывается в новом окне http://foster-bt.ru Что не так? 

 

Подключены 2 библиотеки jquery

<script src="js/jquery/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
 

Оставьте одну из них

Edited by Rash
Link to post
Share on other sites

Подключены 2 библиотеки jquery

<script src="js/jquery/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
 

Оставьте одну из них

 

убрал, но не решает проблему

Link to post
Share on other sites

Подключены 2 библиотеки jquery

<script src="js/jquery/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
 

Оставьте одну из них

 

Все, получилось. Спасибо Вам!

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...