Перейти к содержанию
Официальный форум поддержки Simpla

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


Перейти к решению Решено koteyka,

Рекомендуемые сообщения

Сразу прошу не пинать. Сам придумал, сам реализовал, а знаний в 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

Изменено пользователем koteyka
Ссылка на сообщение
Поделиться на другие сайты
  • Ответов 54
  • Дата создания
  • Последний ответ

Лучшие авторы в теме

Лучшие авторы в теме

Изображения в теме

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

 

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

Изменено пользователем Maksclub
Ссылка на сообщение
Поделиться на другие сайты

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

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

Ссылка на сообщение
Поделиться на другие сайты

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

Ссылка на сообщение
Поделиться на другие сайты

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

Изменено пользователем koteyka
Ссылка на сообщение
Поделиться на другие сайты

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

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

Варианты: 
				<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>
Ссылка на сообщение
Поделиться на другие сайты

В option добавь

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

а в select

onchange="img(this);" 
Ссылка на сообщение
Поделиться на другие сайты
  • 3 недели спустя...

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

Ссылка на сообщение
Поделиться на другие сайты

Костыль действительно славный, то что надо. Но, не работает увеличитель

(fancybox) картинок именно на изменённом изображении и как-бы допилить

ресайз картинок.

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

 

Ссылка на сообщение
Поделиться на другие сайты

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

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

Ссылка на сообщение
Поделиться на другие сайты

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

 

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

Ссылка на сообщение
Поделиться на другие сайты

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

 

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

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

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

 

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

Ссылка на сообщение
Поделиться на другие сайты

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

 

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

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

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

 

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

 

 

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

 

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

Изменено пользователем DaVinci
Ссылка на сообщение
Поделиться на другие сайты

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

 

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

Изменено пользователем DaVinci
Ссылка на сообщение
Поделиться на другие сайты

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

 

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

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

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

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

Ссылка на сообщение
Поделиться на другие сайты

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

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

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

Ссылка на сообщение
Поделиться на другие сайты

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

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

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

 

 

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

Ссылка на сообщение
Поделиться на другие сайты

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

Изменено пользователем DaVinci
Ссылка на сообщение
Поделиться на другие сайты

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

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

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

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

Ссылка на сообщение
Поделиться на другие сайты

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

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

что приходит в письме с заказом - Скачать {$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 основных изображений, как вы заметили, в другой папке просто дубли.

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

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

Изменено пользователем koteyka
Ссылка на сообщение
Поделиться на другие сайты

Присоединяйтесь к обсуждению

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

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

Загрузка...

×
×
  • Создать...