Jump to content

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


Recommended Posts

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

 

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

 

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

Edited by DaVinci
Link to post
Share on other sites
  • Replies 66
  • Created
  • Last Reply

Top Posters In This Topic

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


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

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

Link to post
Share on other sites

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

 

1. Если Вы выкладываете решение в пределах стандартного движка, то могли бы для окошек использовать fancybox, что кажется удобнее и стрелочки можно реализовать (если Вы понимаете о чем я)

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

 

 

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

Link to post
Share on other sites

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

 

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

 

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

Link to post
Share on other sites

Зачем такой геморой если можно использовать к примеру:

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

2. Ваша погрузка товара грузит всю страницу, можно было сократить

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

product.tpl  при запросе аякс {$wrapper='' scope=parent}

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

Link to post
Share on other sites

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

 

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



{if $smarty.server.HTTP_X_REQUESTED_WITH|strtolower == 'xmlhttprequest'}
    {$wrapper='product.tpl' scope=parent}
{/if}
Link to post
Share on other sites

 

вверху шаблона 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}

Link to post
Share on other sites

:D  :D  :D  :D  :D 

в product.tpl

 

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

{$wrapper='' scope=parent}

{/if}

 

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

 

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

 

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

Link to post
Share on other sites

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

 

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

А у меня складывается впечатление, что Вы слепы.

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

Вам предоставили правильное решение, а Вы вместо благодарностей грубите.

Опуститесь на землю.

Link to post
Share on other sites
 

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

 

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

 

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

 

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

Link to post
Share on other sites

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

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

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

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

Должно быть так {$wrapper = '' scope=parent}, больше ничего.

Это понятно?

Link to post
Share on other sites

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

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

 

В таком случае манипуляции с кодом нужно проводить в файле 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(); 

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

Link to post
Share on other sites

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

 

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

 

вот это {$wrapper = 'product_quick_view.tpl' scope=parent} именно это (printи делает , надеюсь это понято

 

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

Пробуйте я посмотрю что у Вас выйдет.

Вам уже несколько раз пытаются объяснить, а Вы все никак сути не уловите.

Link to post
Share on other sites

Пробуйте я посмотрю что у Вас выйдет.

 

 

вы серьезно??

 

я же выложил вам код, вы и сами, я в этом уверен видели его не раз. или вы не понимаете прицыпа того как это работает?

Link to post
Share on other sites

вы серьезно??

 

я же выложил вам код, вы и сами, я в этом уверен видели его не раз. или вы не понимаете прицыпа того как это работает?

Похоже на то, что Вы абсолютно не понимаете о чем идет речь и подсказанные ПРАВИЛЬНЫЕ решения Вы воспринимаете во штыки.
Link to post
Share on other sites

 

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

 

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

 

------------------------------------------------

 

если общаться в вашей манере - да  вы что (Osben, Noxter) не знали о том что код {$wrapper = 'product_quick_view.tpl' scope=parent} вывод в браузер нужный шаблон. Так вы не программисты вовсе, куда вам советы давать и с людей деньги брать за доработки!  :D  :D  :D  :D  :D  :D  :D  :D  :D  :D  :D  Noxter: Давайте внесем изменения в ProductView.php ---- ха-ха-ха-ха!!!

 

Думаю вам не приятно читать подобное...

 

------------------------------------------------

 

что на видео вы увидели смешного, не понятного, или не рабочего?

 

Похоже на то, что Вы абсолютно не понимаете о чем идет речь и подсказанные ПРАВИЛЬНЫЕ решения Вы воспринимаете во штыки.

 

Noxter, какое решение на видео не правильное, и в чем заключается суть ПРАВИЛЬНОГО решения? Как бы вы реализовали то что я продемонстрировал на видео?

Link to post
Share on other sites

Если я вставляю в product.tpl код

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

то всплывающее окно пустое и написано undefined

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