Jump to content

Смена изображения при выборе варианта


Go to solution Solved by koteyka,

Recommended Posts

Я ни в коем случае не хочу сказать, что мой вариант лучше Вашего. Просто мой намного проще в реализации, только и всего. ;)

Link to post
Share on other sites
  • Replies 54
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

если аналогичное изображение варианта не присутствует в общем списке

изображений и есть необходимость вывести его в карточке товара

необходимо добавить {foreach} по вариантам для того что бы проверить

наличие и вытащить из них изображения (работа для верстальщика

увеличивается, это может повлечь за собой и финансовые растраты)

Это почему? Совершенно не обязательно, чтобы изображение было дублем основного. Достаточно одного основного, которое будет выводиться при открытии товара и всё. Изображения вариантов уже будут подтягиваться скриптом и совсем не обязательно их присутствие в основных.

Edited by koteyka
Link to post
Share on other sites

,

Я ни в коем случае не хочу сказать, что мой вариант лучше Вашего. Просто мой намного проще в реализации, только и всего. ;)

 

koteyka, речь не идет о том что лучше и круче. Оставьте это... Вы выложили рабочий вариант, это похвально.

 

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

Link to post
Share on other sites

прошу вас об одном - откажитесь от этой реализации

Ну не знаю. Две девченки попросили им сделать такое на сайте, я сделал, они довольны. Вот уже пару месяцев работают, проблем нет. Списываются со мной почти каждый день, но по этому вопросу ни каких претензий, хотя сайт они только запустили и проверяют на нем абсолютно всё. Безусловно, если выплывут проблемы, то переделаю на Ваш вариант. :)

Edited by koteyka
Link to post
Share on other sites

Возвращаемся к вопросу об увесистых картинках - для того что бы провести

ресайз и облегчить страницу необходимо загрузить картинку варианта в

общий список (дубль). если этого не сделать страница с товарами может

быть очень тяжелой даже для шустрого интернета. Эта же беда будет и в

корзине где вы выведите картинки вариантов.

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

Link to post
Share on other sites

http://bust.wsmcompany.ua/products/apple-iphone-4s-16gb

 

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

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

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

Link to post
Share on other sites

опять же актуальней вывести первым изображением картинку варианта

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

посмотрите их вес. возможно если в карточке товара это прокатит то в общем списке страница будет тяжелой

Я выше написал, что эти картинки не грузятся при загрузке страницы и не влияют на ее вес. А об общем списке речь и не шла. У меня сделано для товара. Просто я уточнил, что тоже самое можно сделать и в products.tpl, и в main.tpl, но опять же на вес это ни как не отразится.

Edited by koteyka
Link to post
Share on other sites
  • 2 weeks later...

Попробовал сделать смену картинки варианта через:

1) <input  type="radio" data-image="{$v->image|resize:800:600:w}"...>

так видит путь к картинке варианта, но не грузит саму картинку:

...files/products/p001.800х600w.jpg

 

2) <input type="radio" data-image="{$v->filename->image|resize:800:600:w}"...>

В итоге оно правильно находит путь, но вместо названия какая-то беда "%2F":

.../files/products/%2F.800х600w.jpg

 

Мне кажется, что разгадка где-то близко...

Подсветите чего не хватает, что бы картинка варианта отображалась?   :)

 

Вот код:

<input class="radio" name="variant" value="{$v->id}" type="radio" data-image="{$v->filename->image|resize:800:600:w}" {if $product->variant->id==$v->id}checked{/if}{if $product->variants|count<2} style="display:none;"{/if}/>{$v->name}

JS:

$(function(){
    $('.variant input[name=variant]').change(function(){
        $('.image').html($(this).attr('data-image')||'');
        return false;
    }).change;
});

 

 

 

 

Link to post
Share on other sites
data-image="{$v->attachment}"

от куда вы взяли

data-image="{$v->filename->image|resize:800:600:w}"

?

Вы наверное не в ту тему написали. Может вам сюда http://forum.simplacms.ru/topic/9435-%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B4%D0%BB%D1%8F-%D0%B2%D0%B0%D1%80%D0%B8%D0%BD%D1%82%D0%BE%D0%B2/

?

Edited by koteyka
Link to post
Share on other sites

странно, вываливается ошибка 

...on line 162 "{/literal}" unclosed {if} tag ....

а блок вот такой в файле

<div class="product_info">
        {if $product->variants|count > 0}
        <form class="cart" action="/cart">
            <div class="price">
            {if $product->variant->price >0}<span>{$product->variant->price|convert}</span> <i>{$currency->sign|escape}</i>{else}<p class='notsale'><br /><br />Не указана цена<br />Уточните стоимость у менеджера</p>{/if}
            <strike class='compare_price'>{if $product->variant->compare_price > 0}{$product->variant->compare_price|convert}{/if}</strike>
            </div>
            {if $product->variant->price >0}<input type="submit" class="labels product-cart shadow-forbox" value="" title='Купить {$product->name|escape}' data-result-text=""/>{/if}
            <select name="variant" {if $product->variants|count==1  && !$product->variant->name}style='display:none;'{/if}>
            {foreach $product->variants as $v}
            {if $v->price > 0}<option value="{$v->id}" {if $v->compare_price > 0}compare_price="{$v->compare_price|convert}"{/if} price="{$v->price|convert}">{$v->name}</option>{/if}
            {/foreach}
            </select>
        </form>
Edited by SELECONICS
Link to post
Share on other sites

Да, очень очень странно. Особенно если принять во внимание, что в приведенном фрагменте тегов if открывающих - 7, закрывающих - 6.

Link to post
Share on other sites

Особенно если принять во внимание, что в приведенном фрагменте тегов if открывающих - 7, закрывающих - 6.

ТС наверное не докопировал последний {/if}

А вообще, ошибка именно по не закрытому {/if}. Так что ищите, где он не закрыт.

Edited by koteyka
Link to post
Share on other sites

ТС наверное не докопировал последний {/if}

А вообще, ошибка именно по не закрытому {/if}. Так что ищите, где он не закрыт.

 

<div class="product_info">
		{if $product->variants|count > 0}
		<form class="cart" action="/cart">
			<div class="price">
			{if $product->variant->price >0}<span>{$product->variant->price|convert}</span> <i>{$currency->sign|escape}</i>{else}<p class='notsale'><br /><br />Не указана цена<br />Уточните стоимость у менеджера</p>{/if}
			<strike class='compare_price'>{if $product->variant->compare_price > 0}{$product->variant->compare_price|convert}{/if}</strike>
			</div>
			{if $product->variant->price >0}<input type="submit" class="labels product-cart shadow-forbox" value="" title='Купить {$product->name|escape}' data-result-text=""/>{/if}
			<select name="variant" {if $product->variants|count==1  && !$product->variant->name}style='display:none;'{/if}>
			{foreach $product->variants as $v}
			{if $v->price > 0}<option value="{$v->id}" {if $v->compare_price > 0}compare_price="{$v->compare_price|convert}"{/if} price="{$v->price|convert}">{$v->name}</option>{/if}
			{/foreach}
			</select>
		</form>

		{foreach $product->variants as $v}
		{if $v->sku}
			<p class='v-sku'>
			<span>Код товара {$v->sku}</span>{if $v->name}- {$v->name}{if $v->price == 0} (Нет в наличии){/if}{/if}
			</p>
		{/if}
		{/foreach}
		<div class="clear_dot"></div>
		{/if}
Link to post
Share on other sites

Дайте кусок кода в районе 162 строки того файла на который указывает ошибка. Там где у вас {/literal}

Возможно не закрыт не именно if, а не открыт literal или еще что.

Edited by koteyka
Link to post
Share on other sites

да мне кажется проблема не в том месте, а в В блоке вывода вариантов, только после вставки кода в этот блок, все слетает.

{literal}
<script>
$(function() {
	// Раскраска строк характеристик
	$(".features11 li:even").addClass('even');
	// Зум картинок

});
</script>
<script>
$(function() {
	$("#features li:even").addClass('even');

	$("a.zoom").fancybox({ 'hideOnContentClick' : true });

	$('select[name=variant]').change(function() {
		price = $(this).find('option:selected').attr('price');
		compare_price = '';
		if(typeof $(this).find('option:selected').attr('compare_price') == 'string')
			compare_price = $(this).find('option:selected').attr('compare_price');
		$(this).find('option:selected').attr('compare_price');
		$(this).closest('form').find('span').html(price);
		$(this).closest('form').find('strike').html(compare_price);
		return false;
	});
});
</script>
<script type="text/javascript">
    function img(el) {
     	var img_sm = $(el).attr('data-img_sm');
     	var img_bg = $(el).attr('data-img_bg');
     	var name = $(el).attr('data-name');

     if(img_sm !=''){
     	var url = '<a href="http://www.111/files/downloads/' + img_bg + '" class="zoom" rel="group"><img src="http://111/files/downloads/' + img_sm + '" height="330" alt="' + name + '" /></a>';
      	$(".image").html(url);
     }
    };
</script>
{/literal}
Edited by SELECONICS
Link to post
Share on other sites

да мне кажется проблема не в том месте, а в В блоке вывода вариантов, только после вставки кода в этот блок, все слетает.

Зависит от того, ЧТО вставляете, В КАКУЮ ПОЗИЦИЮ вставляете и прочего.

Если, например, вставляете текст из поста #39 (код Smarty) внутрь фрагмента поста #42 (код JS), то это действие аналогично тому, что заливать в бензобак молоко вместо бензина.

Или, если угодно, это как варить суп на бензине, а не на молоке...

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

Подскажите пожалуйста, не очень понял. Как подругражть то нужные картинки? Я добавил товару варианты. назание и цену. добавил цифровой товар картинку и прописал в

{literal}
<script type="text/javascript">
function img(el) {
    var img_sm = $(el).attr('data-img_sm');
    var img_bg = $(el).attr('data-img_bg');
    var name = $(el).attr('data-name');

if(img_sm !=''){
    var url = '<a href="http://ваш сайт/files/downloads/' + img_bg + '" class="zoom" rel="group"><img src="http://ваш сайт/files/downloads/' + img_sm + '" height="330" alt="' + name + '" /></a>';
    $(".image").html(url);
}    
};
</script>
{/
literal}

 

вместо "вашсайт" - свой. а чво куда ещё грузить то?)

Link to post
Share on other sites

Как и куда подгружать то картинки? А то у меня при выборе варианта - пытается загрузить картинки, но только пустые файлы с ошибкой, потому что картинок нет

Link to post
Share on other sites

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

Link to post
Share on other sites
  • 1 month later...
  • Solution

Немного подправил эту доработку. Теперь у картинок работает ресайз и если какому-то варианту не будет задано изображение, то при выборе этого варианта скрипт просто не будет срабатывать.

Сам скрипт

{literal}
<script type="text/javascript">
    function img(el) {
     	var img_sm = $(el).attr('data-img_sm');
     	var img_bg = $(el).attr('data-img_bg');
     	var name = $(el).attr('data-name');

     if(img_sm !=''){
     	var url = '<a href="' + img_bg + '" class="zoom" rel="group"><img src="' + img_sm + '" alt="' + name + '" /></a>';
      	$(".image").html(url);    
     }	
    };
</script>     
{/literal}

Строка в вариантах (input)

<input {if $v->attachment}onclick="img(this);"{/if} data-name="{$product->name}" data-img_bg="{$v->attachment|resize:800:600:w}" data-img_sm="{$v->attachment|resize:300:300}" id="product_{$v->id}" name="variant" value="{$v->id}" type="radio" class="variant_radiobutton" {if $product->variant->id==$v->id}checked{/if} {if $product->variants|count<2}style="display:none;"{/if}/>
Link to post
Share on other sites

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

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