Перейти к содержимому


Фото
- - - - -

Быстрый просмотр товара


  • Чтобы отвечать, сперва войдите на форум
55 ответов в теме

#1 DaVinci

DaVinci
  • Фрилансер
  • 672 сообщений
  • Программирование, Верстка
  • Версия CMS:1.x, 2.x
  • Откуда:SimplaDev.ru

Опубликовано 19.08.2014 - 21:49

простая реализация для стандартного шаблона:

 

обновляем файлы

 

index.tpl

 





    {* js-проверка форм *}
    <script src="js/baloon/js/baloon.js" type="text/javascript"></script>
    <link   href="js/baloon/css/baloon.css" rel="stylesheet" type="text/css" />

 

products.tpl





{literal}
<style type="text/css">
    .products .product .image{
        position:relative;
    	height: 200px;
	    line-height: 200px;
        vertical-align: middle;
    }
    .products .product .image img{
        vertical-align:middle;
    }
    .quick_view{
        position:absolute;
        top:100px;
        left:25px;
        width:150px;
        line-height:normal;
        padding:5px;
        border-radius:5px;
        opacity: 0.8;
        background: #EBEBEB;
        cursor:pointer;
        border: 1px solid #8F8F8F;
        display:none;
    }
    #qvw{
        display:none;
        width:680px;
    }

</style>
<script type="text/javascript">
$(function() {

    $('.product').each(function(k,v)
    {
        $('<div class="quick_view">Быстрый просмотр</div>').appendTo($(this).find('.image'));
    });
    $(".product").hover(
      function() {
        $(this).find(".quick_view").show();
      }, function() {
        $(this).find(".quick_view").hide();
      }
    );
    $('.quick_view').live('click',function()
    {
        var get_link = $(this).closest('.image').find('a').attr('href');
        $.get(get_link+'?ajax=1', function(data)
        {
            if(data)
            {
                $('#qvw').remove();
                var new_data = $(data).find('.tqv').html();
                $('<div id="qvw">'+new_data+'</div>').appendTo('body');        
                $.fancybox({'href' : '#qvw'});
            }
        });
    });
    $('#qvw .image a').live('click', function()
    {
        return false;
    });
    $('#qvw .images a').live('click', function()
    {
        var image = $(this).data('product-src');
        $('#qvw  .image img').attr('src',image);
        return false;
    });

});
</script>
{/literal}

product.tpl

 





в качестве примера помещаем в <div class='tqv'></div> то что необходимо отобразить, можно использовать стандартный блок с классом .product




	{if $product->images|count>1}
	<div class="images">
		{* cut удаляет первую фотографию, если нужно начать 2-й - пишем cut:2 и тд *}
        {* если это аякс покажем все кртинки *}
        {if $smarty.get.ajax}
		{foreach $product->images as $i=>$image}
			<a href="{$image->filename|resize:800:600:w}" data-product-src="{$image->filename|resize:300:300}" class="zoom" rel="group"><img src="{$image->filename|resize:95:95}" alt="{$product->name|escape}" /></a>
		{/foreach}
        {else}
		{foreach $product->images|cut as $i=>$image}
			<a href="{$image->filename|resize:800:600:w}" data-product-src="{$image->filename|resize:300:300}" class="zoom" rel="group"><img src="{$image->filename|resize:95:95}" alt="{$product->name|escape}" /></a>
		{/foreach}
        {/if}
	</div>
	{/if}

 

#второе решение

 

версия 1.3.4 fancybox

 

products.tpl

 





{literal}
<style type="text/css">
    .products .product .image{
        position:relative;
    	height: 200px;
	    line-height: 200px;
        vertical-align: middle;
    }
    .products .product .image img{
        vertical-align:middle;
    }
    .quick_view{
        position:absolute;
        top:100px;
        left:25px;
        width:150px;
        line-height:normal;
        padding:5px;
        border-radius:5px;
        opacity: 0.8;
        background: #EBEBEB;
        cursor:pointer;
        border: 1px solid #8F8F8F;
        display:none;
    }
</style>
<script type="text/javascript">
$(function() {

    $('.product').each(function(k,v)
    {
        $('<div class="quick_view"><a id="a_quick_view" rel="group" href="'+$(this).find('a').attr('href')+'">Быстрый просмотр</a></div>').appendTo($(this).find('.image'));
    });

    $(".product").hover(
      function() {
        $(this).find(".quick_view").show();
      }, function() {
        $(this).find(".quick_view").hide();
      }
    );

    $("a#a_quick_view").fancybox(
    {
        autoDimensions:false,
        padding: 40,
        width: 700,
        height: 'auto'
    });
});
</script>
{/literal}

 

style.css

 





.product .image {
	text-align: center;
	width: 300px;
	height: 300px;
	line-height: 300px;
    vertical-align:middle;
    text-align:center;
	background-color: #ffffff;
	border: 1px solid #e0e0e0;
	float: left;
	padding: 5px;
	margin-right: 20px;
}
.product .image img{
	max-width: 300px;
	max-height: 300px;
    vertical-align:middle;
}

в шапке product.tpl 

 

(если необходим отдельный шаблон для быстрого просмотра вписываем его в $wrapper)

 





{if $smarty.server.HTTP_X_REQUESTED_WITH|strtolower == 'xmlhttprequest'}
    {$wrapper = '' scope=parent}
{/if}

в стандартом шаблоне закрываем блоки которые не нужны при отображении





{if $smarty.server.HTTP_X_REQUESTED_WITH|strtolower !== 'xmlhttprequest'}
...
{/if}

 

===================================================

 

Хотите сказать спасибо? Вам сюда  :)

 

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

 

Если вы хотите установить эту доработку но по каким то причинам не можете сделать это самостоятельно я всегда рад помочь на платной основе.

 

скайп: simpladev


Изменено: DaVinci, 25.03.2015 - 11:57


#2 osben

osben
  • Фрилансер
  • 774 сообщений
  • Дизайн, Программирование, Верстка
  • Версия CMS:1.x, 2.x
  • Откуда:UA, RU

Опубликовано 19.08.2014 - 21:58

Если на то пошло, то намеки:

1.fancybox 

2.{$wrapper = '' scope=parent}

 



#3 DaVinci

DaVinci
  • Фрилансер
  • 672 сообщений
  • Программирование, Верстка
  • Версия CMS:1.x, 2.x
  • Откуда:SimplaDev.ru

Опубликовано 19.08.2014 - 22:01

Если на то пошло, то намеки:

1.fancybox 

2.{$wrapper = '' scope=parent}

 

 

лично я не понимаю ваши намеки



#4 osben

osben
  • Фрилансер
  • 774 сообщений
  • Дизайн, Программирование, Верстка
  • Версия CMS:1.x, 2.x
  • Откуда:UA, RU

Опубликовано 19.08.2014 - 22:30

Тогда Вы не программист )))) 


1. Если Вы выкладываете решение в пределах стандартного движка, то могли бы для окошек использовать fancybox, что кажется удобнее и стрелочки можно реализовать (если Вы понимаете о чем я)
2. Ваша погрузка товара грузит всю страницу, можно было сократить контент тем что бы не грузить обвертку, для етого используйте в product.tpl  при запросе аякс {$wrapper='' scope=parent}

П.С. не рекомендую использовать в product.tpl условие {if $smarty.get.ajax} лучше {if $smarty.server.HTTP_X_REQUESTED_WITH|strtolower == 'xmlhttprequest'}



#5 DaVinci

DaVinci
  • Фрилансер
  • 672 сообщений
  • Программирование, Верстка
  • Версия CMS:1.x, 2.x
  • Откуда:SimplaDev.ru

Опубликовано 19.08.2014 - 22:39

Тогда Вы не программист )))) 


1. Если Вы выкладываете решение в пределах стандартного движка, то могли бы для окошек использовать fancybox, что кажется удобнее и стрелочки можно реализовать (если Вы понимаете о чем я)
2. Ваша погрузка товара грузит всю страницу, можно было сократить контент тем что бы не грузить обвертку, для етого используйте в product.tpl  при запросе аякс {$wrapper='' scope=parent}
 

 

мое решение грузить всю страницу, вы можете сделать иначе



#6 Kosjak76

Kosjak76
  • Модератор
  • 3 563 сообщений
  • Программирование
  • Версия CMS:1.x, 2.x
  • Откуда:Харьков, Украина

Опубликовано 19.08.2014 - 22:41

:-) 



#7 osben

osben
  • Фрилансер
  • 774 сообщений
  • Дизайн, Программирование, Верстка
  • Версия CMS:1.x, 2.x
  • Откуда:UA, RU

Опубликовано 19.08.2014 - 22:50

Забей тогда, извини что потревожил.  :mellow:



#8 DaVinci

DaVinci
  • Фрилансер
  • 672 сообщений
  • Программирование, Верстка
  • Версия CMS:1.x, 2.x
  • Откуда:SimplaDev.ru

Опубликовано 19.08.2014 - 22:52

Забей тогда, извини что потревожил.  :mellow:

 

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

 

Мой вариант рабочий, а возможные варианты реализации предмет обсуждения а не решение квестов



#9 artbe

artbe
  • Пользователь
  • 172 сообщений
  • Заказчик
  • Откуда:Россия

Опубликовано 20.08.2014 - 03:22

Спасибо огромное!



#10 Noxter

Noxter

    Simpla Developer

  • Фрилансер
  • 5 680 сообщений
  • Дизайн, Программирование, Верстка
  • Версия CMS:2.x
  • Откуда:Киев

Опубликовано 20.08.2014 - 16:18

Зачем такой геморой если можно использовать к примеру:
$('.item').live('hover', function(e){
e.preventDefault;
var url = $(this).attr(href);
$('.product').load('products/'+url+' .product > *');
});
Класс .product с какого дива вытаскивать информацию и в какой див заполнять ее.

#11 koteyka

koteyka

    Фрилансер

  • Пользователь
  • 1 334 сообщений
  • Программирование
  • Версия CMS:2.x
  • Откуда:Днепропетровск

Опубликовано 22.08.2014 - 13:17

2. Ваша погрузка товара грузит всю страницу, можно было сократить
контент тем что бы не грузить обвертку, для етого используйте в
product.tpl  при запросе аякс {$wrapper='' scope=parent}

А можно чуть подробнее, где это прописать, что бы не грузить всю страницу?



#12 DaVinci

DaVinci
  • Фрилансер
  • 672 сообщений
  • Программирование, Верстка
  • Версия CMS:1.x, 2.x
  • Откуда:SimplaDev.ru

Опубликовано 22.08.2014 - 17:48

А можно чуть подробнее, где это прописать, что бы не грузить всю страницу?

 

вверху шаблона product.tpl



{if $smarty.server.HTTP_X_REQUESTED_WITH|strtolower == 'xmlhttprequest'}
    {$wrapper='product.tpl' scope=parent}
{/if}


#13 osben

osben
  • Фрилансер
  • 774 сообщений
  • Дизайн, Программирование, Верстка
  • Версия CMS:1.x, 2.x
  • Откуда:UA, RU

Опубликовано 22.08.2014 - 19:17

вверху шаблона product.tpl



{if $smarty.server.HTTP_X_REQUESTED_WITH|strtolower == 'xmlhttprequest'}
    {$wrapper='product.tpl' scope=parent}
{/if}

:D  :D  :D  :D  :D 
в product.tpl


{if $smarty.server.HTTP_X_REQUESTED_WITH|strtolower == 'xmlhttprequest'}
{$wrapper='' scope=parent}
{/if}



#14 DaVinci

DaVinci
  • Фрилансер
  • 672 сообщений
  • Программирование, Верстка
  • Версия CMS:1.x, 2.x
  • Откуда:SimplaDev.ru

Опубликовано 22.08.2014 - 20:36

:D  :D  :D  :D  :D 
в product.tpl


{if $smarty.server.HTTP_X_REQUESTED_WITH|strtolower == 'xmlhttprequest'}
{$wrapper='' scope=parent}
{/if}

 

если делить людей на умных и умников то вы по моему мнению относитесь ко второй категории

 

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

 

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



#15 Noxter

Noxter

    Simpla Developer

  • Фрилансер
  • 5 680 сообщений
  • Дизайн, Программирование, Верстка
  • Версия CMS:2.x
  • Откуда:Киев

Опубликовано 22.08.2014 - 20:42

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

А у меня складывается впечатление, что Вы слепы.
{$wrapper='' scope=parent} предназначено для возможности обернуть нужный шаблон другим, в вашем же решении шаблон product.tpl {$wrapper='product.tpl' scope=parent} оборачивает сам себя.
Вам предоставили правильное решение, а Вы вместо благодарностей грубите.
Опуститесь на землю.

#16 DaVinci

DaVinci
  • Фрилансер
  • 672 сообщений
  • Программирование, Верстка
  • Версия CMS:1.x, 2.x
  • Откуда:SimplaDev.ru

Опубликовано 22.08.2014 - 20:47

 

А у меня складывается впечатление, что Вы слепы.
{$wrapper='' scope=parent} предназначено для возможности обернуть нужный шаблон другим, в вашем же решении шаблон product.tpl {$wrapper='product.tpl' scope=parent} оборачивает сам себя.
Вам предоставили правильное решение, а Вы вместо благодарностей грубите.
Опуститесь на землю.

 

если я использую такой код

 

{$wrapper = 'product_quick_view.tpl' scope=parent}

 

это будет ошибкой?



#17 Noxter

Noxter

    Simpla Developer

  • Фрилансер
  • 5 680 сообщений
  • Дизайн, Программирование, Верстка
  • Версия CMS:2.x
  • Откуда:Киев

Опубликовано 22.08.2014 - 20:55

если я использую такой код
{$wrapper = 'product_quick_view.tpl' scope=parent}
это будет ошибкой?

Да. Чтобы на выходе в модалке мы имели всего лишь шаблон product.tpl без обертки основного сайта то в {$wrapper = 'product_quick_view.tpl' scope=parent} ничего не нужно указывать.
Должно быть так {$wrapper = '' scope=parent}, больше ничего.
Это понятно?

#18 DaVinci

DaVinci
  • Фрилансер
  • 672 сообщений
  • Программирование, Верстка
  • Версия CMS:1.x, 2.x
  • Откуда:SimplaDev.ru

Опубликовано 22.08.2014 - 20:57

немного уточню - если я хочу использовать product_quick_view.tpl  в котором код отличается от product.tpl это можно считать ошибкой?



#19 Noxter

Noxter

    Simpla Developer

  • Фрилансер
  • 5 680 сообщений
  • Дизайн, Программирование, Верстка
  • Версия CMS:2.x
  • Откуда:Киев

Опубликовано 22.08.2014 - 21:02

если я хочу использовать product_quick_view.tpl  в котором код отличается от product.tpl это можно считать ошибкой?

В таком случае манипуляции с кодом нужно проводить в файле view/ProductView.php, смотрите в самом низу файла
return $this->design->fetch('product.tpl');


#20 DaVinci

DaVinci
  • Фрилансер
  • 672 сообщений
  • Программирование, Верстка
  • Версия CMS:1.x, 2.x
  • Откуда:SimplaDev.ru

Опубликовано 22.08.2014 - 21:04

В таком случае манипуляции с кодом нужно проводить в файле view/ProductView.php, смотрите в самом низу файла

return $this->design->fetch('product.tpl');

 

в таком случае на уровне шаблона не надо проводить никаких манипуляций!

 

мы просто отдаем в print нужный нам шаблон (вы это называете ОБЕРТКА)

 

вот это {$wrapper = 'product_quick_view.tpl' scope=parent} отдает нужный шаблон в браузер , надеюсь это понято

 

или вы не согласны?

 

если указан нужный шаблон, не index.tpl

		$wrapper = $this->design->smarty->getTemplateVars('wrapper');
		if(is_null($wrapper))
			$wrapper = 'index.tpl';

		if(!empty($wrapper))
			return $this->body = $this->design->fetch($wrapper);
		else
			return $this->body = $content;

отправляем его в

 

print $view->fetch(); 

не могу не согласиться с тем что отправлять шаблон еще раз на обработку нет смысла, прошу прощения за то что до конца не раскрыл мысль, но ниже я еще раз отметил для чего указал шаблон (повторюсь в сотый раз) - для примера того как использовать на выдаче нужный шаблон.






0 пользователей читают эту тему

0 пользователей, 0 гостей, 0 скрытых