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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

,

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

 

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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;
});

 

 

 

 

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

?

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

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

...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>
Изменено пользователем SELECONICS
Ссылка на сообщение
Поделиться на другие сайты

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

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

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

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

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

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

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

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

ТС наверное не докопировал последний {/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}
Ссылка на сообщение
Поделиться на другие сайты

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

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

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

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

{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}
Изменено пользователем SELECONICS
Ссылка на сообщение
Поделиться на другие сайты

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

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

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

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

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

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

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

 

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

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

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

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

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

Ссылка на сообщение
Поделиться на другие сайты
  • 1 месяц спустя...
  • Решение

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

Сам скрипт

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

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

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

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

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

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

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

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

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

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

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

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

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

Загрузка...

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