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

koteyka · February 27, 2015

Сразу прошу не пинать. Сам придумал, сам реализовал, а знаний в js у меня не так уж и много. Если что, поправьте.

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

Редактируется только один шаблон - product.tpl

В самый низ шаблона

{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}

В блоке вывода вариантов меняем стандартный input на этот

<input onclick="img(this);" data-name="{$product->name}" data-img_bg="{$v->attachment}" data-img_sm="{$v->attachment}" 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}/>

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

Пример работы здесь - http://bust.wsmcompany.ua/products/samsung-s5570-galaxy-mini

Минус в том, что на этих изображениях нет ватермарка. Но думаю, что кто-то поможет допилить.

Собственно, тоже самое можно сделать и в products.tpl, и в main.tpl

Edited February 27, 2015 by koteyka

shooroop · February 28, 2015

я давно такое делал тоже через цифровой твар, если откопаю дполню, с ватермарком

Maksclub · March 1, 2015

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

есть идеи? думали?

Edited March 1, 2015 by Maksclub

koteyka · March 1, 2015

тоже лишние картинки веса не убавляют ))

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

Марченко · March 1, 2015

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

koteyka · March 1, 2015

А чем поможет аякс? Изображение в любом случае подгружается только при выборе варианта. Оно не грузится при загрузке страницы. Не вижу смысла в аяксе.

Edited March 1, 2015 by koteyka

dkoz · March 3, 2015

Происходит замена изображений на сопутствующих товарах

dkoz · March 3, 2015

Нужно заменить

$(".image").html(url);

на

$(el).closest('.product').find(".image").html(url);

chubr · March 5, 2015

Подскажите, пожалуйста, если выбор варианта идет выпадающим списком, какой код будет?

Сейчас вот так:

Варианты: 
				<select name="variant" class="inputbox" style="width: 180px;margin-left: 2px; ">
							{foreach $product->variants as $v}
								<option id="featured_{$v->id}" value="{$v->id}" price="{$v->price|convert}"  {if $product->variant->compare_price > 0}raz1="{floor(abs(($v->compare_price)-{$v->price}))}" raz2="{floor(abs(100-{$v->price}/($v->compare_price)*100))}" compare_price="{$v->compare_price|convert}"{/if} {if $v@first}selected{/if}>
									{if $v->name}{$v->name}{/if}
								</option>
							{/foreach}
				</select>

koteyka · March 5, 2015

В option добавь

data-name="{$product->name}" data-img_bg="{$v->attachment}" data-img_sm="{$v->attachment}"

а в select

onchange="img(this);"

Al_Ary · March 24, 2015

Костыль действительно славный, то что надо. Но, не работает увеличитель (fancybox) картинок именно на изменённом изображении и как-бы допилить ресайз картинок.

koteyka · March 25, 2015

Костыль действительно славный, то что надо. Но, не работает увеличитель
(fancybox) картинок именно на изменённом изображении и как-бы допилить
ресайз картинок.

Работает. Только что проверил. Ищите, где ошиблись.

DaVinci · March 25, 2015

Способ рабочий но это костыль

Edited March 25, 2015 by DaVinci

koteyka · March 25, 2015

Способ рабочий но это костыль

Так ни кто и не заявлял, что это полноценная доработка

Kors · March 25, 2015

Способ рабочий но это костыль

А почему так считаете? Какие недостатки у способа?

DaVinci · March 25, 2015

А почему так считаете? Какие недостатки у способа?

вообще можно залить на сервер картинки и по условию привязать id варианта к названию картинки. Тоже работать будет. Какие у этих костыльных методик недостатки решать каждому по своему.

Kors · March 25, 2015

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

Вопрос был к Вам конкретно: почему считаете этот метод костыльным и какие видите в нем недостатки?

Критиковать надо бы предметно, а не голословно. Если Вы заявляете, что "это костыль", а ни одного недостатка привести не можете, выглядит это несколько странно...

И уклоняться от прямого ответа, переходя на другие вопросы - не слишком хорошо...

Я не вижу в предложенном методе никаких недостатков, потому и спрашиваю у специалиста.

DaVinci · March 25, 2015

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

Вопрос был к Вам конкретно: почему считаете этот метод костыльным и какие видите в нем недостатки?
Критиковать надо бы предметно, а не голословно. Если Вы заявляете, что "это костыль", а ни одного недостатка привести не можете, выглядит это несколько странно...
И уклоняться от прямого ответа, переходя на другие вопросы - не слишком хорошо...

Я не вижу в предложенном методе никаких недостатков, потому и спрашиваю у специалиста.

Мой пост не обязательно воспринимать как критику. Я ведь сказал - методика рабочая.

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

Edited March 25, 2015 by DaVinci

DaVinci · March 25, 2015

koteyka, попробуй поставить вот это решение http://forum.simplacms.ru/topic/9435-изображение-для-варинтов/

может пригодится...

Edited March 25, 2015 by DaVinci

Kors · March 25, 2015

Мой пост не обязательно воспринимать как критику. Я ведь сказал - методика рабочая.

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

Я обсуждаю именно данное решение. Высказал свое мнение - я недостатков не вижу.

Попросил Вас как специалиста сообщить хоть один недостаток.

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

koteyka · March 25, 2015

koteyka, попробуй поставить вот это решение http://forum.simplac...е-для-варинтов/
может пригодится...

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

DaVinci · March 25, 2015

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

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

DaVinci · March 25, 2015

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

я может не до конца разобрался

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

- как производится ресайз картинок?

- что если в верстке мне необходимо использовать ID изображения

- если аналогичное изображение варианта не присутствует в общем списке изображений и есть необходимость вывести его в карточке товара необходимо добавить {foreach} по вариантам для того что бы проверить наличие и вытащить из них изображения (работа для верстальщика увеличивается, это может повлечь за собой и финансовые растраты)

- что приходит в письме с заказом - Скачать {$purchase->variant->attachment} картинка в качетве подарка

- ватемарк уже указали

- зачем хранить дубли изображений товара в отдельной папке? (симпла и без того не экономит место благодаря ресайзу, дубли изображений совсем ни к чему)

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

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

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

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

Edited March 25, 2015 by DaVinci

Kors · March 25, 2015

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

К сожалению, это не так.

Уклониться Вы хотите от ТОЧНОГО ответа.

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

koteyka · March 25, 2015

как производится ресайз картинок?

На ура. Классы изображений те же.

что приходит в письме с заказом - Скачать {$purchase->variant->attachment}

Просто комментируются строки (опять же, всего лишь в шаблоне)

			{if $order->paid && $purchase->variant->attachment}
			<br>
			<a href="{$config->root_url}/order/{$order->url}/{$purchase->variant->attachment}"><font color="green">Скачать {$purchase->variant->attachment}</font></a>
			{/if}

что если в верстке мне необходимо использовать ID изображения

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

зачем хранить дубли изображений товара в отдельной папке?

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

Edited March 25, 2015 by koteyka

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

Recommended Posts

Link to post

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Join the conversation

Announcements