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

DaVinci · March 25, 2015

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

- одно дополнительное поле в таблице вариантов

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

загрузка и хранение изображения в стандарте

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

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

задача - отобразить изображение варианта выполняется на все 100%

Минимальные правки - для реализации редактора одна правка в базе, 2 правки в запросах к вариантам все отельное в шаблоне не прикасаясь к коду PHP

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

Обзор установки

Все что понадобится





ALTER TABLE `s_variants` ADD `image` VARCHAR( 255 ) NULL AFTER `attachment

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

, v.image

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

    // Выбор изображения для варианта
    $('select[name*=variant][name*=image]').live('change', function()
    {
        var select = $(this);
        var selected_image = $(this).closest('li').find('.selected_image');
        var image  = $(this).find('option:selected').data('small');
        if(image)
        {
            $(selected_image).html('<img src="'+ image +'" alt="" />').show();
            $(select).hide();
        }
    });
    $('.selected_image img').live('click', function()
    {
            $(this).hide();
            $(this).closest('li').find('select[name*=variant][name*=image]').show();
    });

	// Удаление изображений
	$(".images a.delete").live('click', function() {
		 $(this).closest("li").fadeOut(200, function() { $(this).remove(); });
         variants_images   = $('option.'+$(this).closest('li').attr('id'));
         variants_selected = $('option.'+$(this).closest('li').attr('id')+':selected');

         if($(variants_selected).length)
         {
            $(variants_selected).closest('select').show();
            $(variants_selected).closest('li').find('.selected_image').html('').hide();
         }
         $(variants_images).remove();
         if($('.images li').length==1){
            $('select[name*=variant][name*=image]').remove();
         }
		 return false;
	});

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

 	<!-- Варианты товара -->
	<div id="variants_block" {assign var=first_variant value=$product_variants|@first}{if $product_variants|@count <= 1 && !$first_variant->name}class=single_variant{/if}>
		<ul id="header">
			<li class="variant_move"></li>
			<li class="variant_name">Название варианта</li>
			<li class="variant_sku">Артикул</li>
			<li class="variant_price">Цена, {$currency->sign}</li>
			<li class="variant_discount">Старая, {$currency->sign}</li>
			<li class="variant_amount">Кол-во</li>
			<li class="variant_price"></li>
		</ul>
		<div id="variants">
		{foreach from=$product_variants item=variant}
		<ul>
			<li class="variant_move"><div class="move_zone"></div></li>
			<li class="variant_name">      <input name="variants[id][]"            type="hidden" value="{$variant->id|escape}" /><input name="variants[name][]" type="" value="{$variant->name|escape}" /> <a class="del_variant" href=""><img src="design/images/cross-circle-frame.png" alt="" /></a></li>
			<li class="variant_sku">       <input name="variants[sku][]"           type="text"   value="{$variant->sku|escape}" /></li>
			<li class="variant_price">     <input name="variants[price][]"         type="text"   value="{$variant->price|escape}" /></li>
			<li class="variant_discount">  <input name="variants[compare_price][]" type="text"   value="{$variant->compare_price|escape}" /></li>
			<li class="variant_amount" style='width:70px;'>    <input name="variants[stock][]"         type="text"   value="{if $variant->infinity || $variant->stock == ''}?{else}{$variant->stock|escape}{/if}" />{$settings->units}</li>
            {if $product_images}
            <li class="variant_price">
            <select name="variants[image][]" style='width:100px; {if $variant->image}display:none{/if}'>
            <option value=''> --- Выбрать --- </option>
            {foreach $product_images as $img}
                <option value='{$img->filename}' class="img_{$img->id}" data-small='{$img->filename|resize:30:30}' {if $img->filename == $variant->image}selected{/if}>{$img->filename}</option>
            {/foreach}
            </select>
            <div class='selected_image' {if !$variant->image}style='display:none'{/if}><img src="{$variant->image|resize:30:30}" alt="" /></div>
            </li>
            {/if}
            {*
			<li class="variant_download">

				{if $variant->attachment}
					<span class=attachment_name>{$variant->attachment|truncate:25:'...':false:true}</span>
					<a href='#' class=remove_attachment><img src='design/images/bullet_delete.png'  title="Удалить цифровой товар"></a>
					<a href='#' class=add_attachment style='display:none;'><img src="design/images/cd_add.png" title="Добавить цифровой товар" /></a>
				{else}
					<a href='#' class=add_attachment><img src="design/images/cd_add.png"  title="Добавить цифровой товар" /></a>
				{/if}
				<div class=browse_attachment style='display:none;'>
					<input type=file name=attachment[]>
					<input type=hidden name=delete_attachment[]>
				</div>

			</li>
            *}
		</ul>
		{/foreach}
		</div>
		<ul id=new_variant style='display:none;'>
			<li class="variant_move"><div class="move_zone"></div></li>
			<li class="variant_name"><input name="variants[id][]" type="hidden" value="" /><input name="variants[name][]" type="" value="" /><a class="del_variant" href=""><img src="design/images/cross-circle-frame.png" alt="" /></a></li>
			<li class="variant_sku"><input name="variants[sku][]" type="" value="" /></li>
			<li class="variant_price"><input  name="variants[price][]" type="" value="" /></li>
			<li class="variant_discount"><input name="variants[compare_price][]" type="" value="" /></li>
			<li class="variant_amount" style='width:70px;'><input name="variants[stock][]" type="" value="?" />{$settings->units}</li>
            {if $product_images}
            <li class="variant_price">
            <select name="variants[image][]" style='width:100px;'>
            <option value=''> --- Выбрать --- </option>
            {foreach $product_images as $img}
                <option value='{$img->filename}' data-small='{$img->filename|resize:30:30}'>{$img->filename}</option>
            {/foreach}
            </select>
            <div class='selected_image'></div>
            </li>
            {/if}
            {*
			<li class="variant_download">
				<a href='#' class=add_attachment><img src="design/images/cd_add.png" alt="" /></a>
				<div class=browse_attachment style='display:none;'>
					<input type=file name=attachment[]>
					<input type=hidden name=delete_attachment[]>
				</div>
			</li>
            *}
		</ul>

		<input class="button_green button_save" type="submit" name="" value="Сохранить" />
		<span class="add" id="add_variant"><i class="dash_link">Добавить вариант</i></span>
 	</div>
	<!-- Варианты товара (The End)-->

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

<li id='img_{$image->id}'>

Хотите сказать спасибо? Вам сюда

по вопросам: доработка, установки стучите в личку или скайп.

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

скайп: simpladev

Edited March 25, 2015 by DaVinci

Kors · March 25, 2015

Насколько я понял, чтобы установить картинки для вариантов товара, надо сначала эти картинки загрузить к ТОВАРУ, а лишь потом для каждого варианта выбрать свою из выпадающего списка.

По сравнению с

http://forum.simplacms.ru/topic/9274-%D1%81%D0%BC%D0%B5%D0%BD%D0%B0-%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F-%D0%BF%D1%80%D0%B8-%D0%B2%D1%8B%D0%B1%D0%BE%D1%80%D0%B5-%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D0%B0/

1. Налицо для админа ДВОЙНАЯ работа.

2. Админу выбирать картинки из списка по названию - весьма неудобно само по себе по сравнению с выбором картинок в графическом виде. К тому же картинки по смыслу чаще всего должны быть разные у разных вариантов.

3. Админу выбирать картинки из списка по названию - риск ошибок значительно выше.

По сравнению с методом по ссылке вижу два плюса

1. Работа со своим полем, не портится стандартное поле цифрового товара. Но этот плюс, по моему, пригодится менее, чем 1% владельцев магазинов.

2. Работает ресайз - это плюс, конечно, очень большой.

И еще хотел спросить мнение у народа. Нравится ли кому инструкция через видео, где показывается в основном текстовый редактор?

По мне, так это страшно неудобно по сравнению со стандартным текстом вида "в файле таком после строк таких вставить строки такие".

Kors · March 25, 2015

Вот еще недостаток:

4. В заголовке темы сказано "Изображение для варинтов", но в действительности это изображения ТОВАРА, они лишь цепляются к вариантам. Это не самостоятельные изображения для вариантов. Отсюда недостаток: чтобы прицепить изображение к варианту, надо его включить в список изображений товара, и оно будет, в частности, ПРИНУДИТЕЛЬНО выводиться в карточке товара в списке изображений товара. А если хочется, чтобы изображение проявлялось только у варианта, то такого удовольствия доработка не предоставляет. Тут работает все только через список изображений товара.

DaVinci · March 25, 2015

Вот еще недостаток:
4. В заголовке темы сказано "Изображение для варинтов", но в действительности это изображения ТОВАРА, они лишь цепляются к вариантам. Это не самостоятельные изображения для вариантов. Отсюда недостаток: чтобы прицепить изображение к варианту, надо его включить в список изображений товара, и оно будет, в частности, ПРИНУДИТЕЛЬНО выводиться в карточке товара в списке изображений товара. А если хочется, чтобы изображение проявлялось только у варианта, то такого удовольствия доработка не предоставляет. Тут работает все только через список изображений товара.

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

загрузка и хранение изображения в стандарте

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

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

задача - отобразить изображение варианта выполняется на все 100%

Минимальные правки - для реализации редактора одна правка в базе, 2 правки в запросах к вариантам все отельное в шаблоне не прикасаясь к коду PHP

для всех остальных манипуляций в дизайне сайта решение справляется на 100%

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

Edited March 25, 2015 by DaVinci

Kors · March 25, 2015

а можно просто исключить изображение варианта из общего списка при выводе.

Можно, конечно.

Только сомневаюсь, что будет легко это сделать только в шаблоне.

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

DaVinci · March 25, 2015

Можно, конечно.
Только сомневаюсь, что будет легко это сделать только в шаблоне.
Если знаете, как это легко и быстро сделать, пишите (мне кажется, что придется поработать в PHP, а это уже принципиальное усложнение!)...

это делается именно в шаблоне, желательно. Но есть мастера которые ковыряют php ради такого пустяка.

Kors · March 25, 2015

это делается именно в шаблоне

Фраза довольно бессмысленная. Разных пользователей системы много и, естественно, делают они по-разному. Кто любит попа, а кто попадью.

Если для Вас легко это сделать в шаблоне, то напишите КОНКРЕТНО немножко кода по вопросу. Так сказать, покажите мастер-класс вместо пустой болтовни...

Edited March 25, 2015 by Kors

DaVinci · March 25, 2015

Фраза довольно бессмысленная. Разных пользователей системы много и, естественно, делают они по-разному. Кто любит попа, а кто попадью.

Если для Вас легко это сделать в шаблоне, то напишите КОНКРЕТНО немножко кода по вопросу. Так сказать, покажите мастер-класс вместо пустой болтовни...

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

Kors - мне кажется, что придется поработать в PHP

Это ваши слова? А наглядного, понятного примера от вас почему то нет. Говорите одно поступаете иначе.

Korst, тема открыта, если у вас есть конкретные предложения, дополнения то от вас будет больше смысла если вы свои мысли будете излагать в КОНКРЕТНЫХ примерах. Свой пример я выложи в первом посте, на данный момент только от вас исходит пустая болтовня.

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

Edited March 25, 2015 by DaVinci

Kors · March 25, 2015

Kors - мне кажется, что придется поработать в PHP
Это ваши слова? А наглядного, понятного примера от вас почему то нет. Говорите одно поступаете иначе.

Вы хотите, чтобы я Вам для примера расписал сложную доработку?

Зачем же мне это делать - тратить МНОГО усилий, чтобы получить НЕРАЦИОНАЛЬНУЮ разработку?

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

Я вот так не умею, потому прошу Вас показать легкий рациональный пример - возможно, пользу это принесет многим.

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

DaVinci · March 25, 2015

Вы хотите, чтобы я Вам для примера расписал сложную доработку?
Зачем же мне это делать - тратить МНОГО усилий, чтобы получить НЕРАЦИОНАЛЬНУЮ разработку?
Даже если бы я это сделал, Вам от этого пользы немного, так как Вы умеете это делать просто в шаблоне.
Я вот так не умею, потому прошу Вас показать легкий рациональный пример - возможно, пользу это принесет многим.
Хотелось бы, чтоб Вы думали не о закулисных интригах, а о предмете беседы...

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

Edited March 25, 2015 by DaVinci

Maksclub · March 25, 2015

Спасибо больщое за готовое решение!

DaVinci · March 28, 2015

кто поставил, отпишитесь - полезное дополнение, нет?)

Edited March 28, 2015 by DaVinci

Bask · March 30, 2015

кто поставил, отпишитесь - полезное дополнение, нет?)

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

Спасибо!

Joe · April 17, 2015

Картинки не меняются при выборе варианта. Смысл тогда? Или я чего не так сделал? Всё по инструкции. Добавил поле в таблицу вариантов. Добавил , v.image в апи/варианты. потом правил продукт.тпл в симла/диз/хтмл. всё по фэншую. в админке добавляются картинки к варианту цен, а на обычной странице - ничерта. более того - все поля с бесконечным товаром слетели в 0 и весь магазин теперь с "нет в наличии"

Kors · April 17, 2015

Картинки не меняются при выборе варианта.

Так это и не было обещано автором...

В посте #13 вопрос поднимался полмесяца назад, автор никак не среагировал...

DaVinci · April 17, 2015

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

Edited April 17, 2015 by DaVinci

DaVinci · April 17, 2015

более того - все поля с бесконечным товаром слетели в 0 и весь магазин теперь с "нет в наличии"

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

Joe · April 18, 2015

а для самого обычного дефолта есть смена картинок? Иначе зачем видеть варианты в админке, если не видно на сайте?

kislotnik · July 3, 2015

для отображения на сайте все правке в product.tpl вашего шаблона

меняйм

<!-- Большое фото -->	{if $product->image}	<div class="image">		<a href="{$product->image->filename|resize:800:600:w}" class="zoom" rel="group"><img src="{$product->image->filename|resize:300:300}" alt="{$product->product->name|escape}" /></a>	</div>	{/if}	<!-- Большое фото (The End)-->

на

<!-- Большое фото --> {if $product->image}    {$image = $product->image->filename}    {if $product->variant->image}{$image = $product->variant->image}{/if} <div class="image">  <a href="{$image|resize:800:600:w}" class="zoom" rel="group"><img src="{$image|resize:300:300}" alt="{$product->product->name|escape}" /></a> </div> {/if} <!-- Большое фото (The End)-->

за код спасибо автору дополенения DaVinci

далее в этом же файле

меняем

<input 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}/>

на

<input {if $v->image}onclick="img(this);"{/if} data-name="{$product->name}" data-img_bg="{$v->image|resize:800:600:w}" data-img_sm="{$v->image|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}/>

и в конец файла

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

за скрипт и input спасибо автору этой темы только немного переделан input

kislotnik · July 3, 2015

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

стоку

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

поменять на

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

и в коде

<!-- Большое фото --> {if $product->image}    {$image = $product->image->filename}    {if $product->variant->image}{$image = $product->variant->image}{/if} <div class="image">  <a href="{$image|resize:800:600:w}" class="zoom" rel="group"><img src="{$image|resize:300:300}" alt="{$product->product->name|escape}" /></a> </div> {/if} <!-- Большое фото (The End)-->

добавим дополнительный класс imvariant

в итоге должно получится так

<!-- Большое фото --> {if $product->image}    {$image = $product->image->filename}    {if $product->variant->image}{$image = $product->variant->image}{/if} <div class="image imvariant">  <a href="{$image|resize:800:600:w}" class="zoom" rel="group"><img src="{$image|resize:300:300}" alt="{$product->product->name|escape}" /></a> </div> {/if} <!-- Большое фото (The End)-->

Edited July 3, 2015 by kislotnik

Spartanec · August 2, 2015

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

Да сам пример не затрагивает никаких изменений, но если вы обратите внимание, в первом Вашем посте, в строке отвечающей за колличество товара, вместо символа бесконечности стоит вопросительный знак и в этом и есть проблема описанная Joe.

вот в этой строке:

<li class="variant_amount" style='width:70px;'> <input name="variants[stock][]" type="text" value="{if $variant->infinity || $variant->stock == ''}?{else}{$variant->stock|escape}{/if}" />{$settings->units}</li>

Думаю Joe, не заметил и просто копи-пастил.

Для копипаста вот строка "правильная" по сути там только 1 символ отличается (не для Автора, для копипастеров )

<li class="variant_amount" style='width:70px;'> <input name="variants[stock][]" type="text" value="{if $variant->infinity || $variant->stock == ''}∞{else}{$variant->stock|escape}{/if}" />{$settings->units}</li>

И при добавлении нового варианта та же беда, стоит value="?" вместо value="∞"

Вот строка:

<li class="variant_amount" style='width:70px;'><input name="variants[stock][]" type="" value="∞" />{$settings->units}</li>

В остальном, Благодарствую за труд, все работает!

Edited August 2, 2015 by Spartanec

Spartanec · August 3, 2015

для отображения на сайте все правке в product.tpl вашего шаблона

меняйм

далее в этом же файле

меняем

<input 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}/>

на

<input {if $v->image}onclick="img(this);"{/if} data-name="{$product->name}" data-img_bg="{$v->image|resize:800:600:w}" data-img_sm="{$v->image|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}/>

и в конец файла

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

за скрипт и input спасибо автору этой темы только немного переделан input

Подскажите, как вывести смену картинки если вместо инпут используется селект, у меня много вариантов у товара, потому инпут не вариант....

Мучаюсь уже сутки, чето у меня ниче не выходит.

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

Благодарю заранее!

Edited August 3, 2015 by Spartanec

Spartanec · August 5, 2015

Подмогните плз, совсем не получается ниче (((

Noxter · August 6, 2015

Подмогните плз, совсем не получается ниче (((

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

Spartanec · August 6, 2015

Дело в том, что у Вас нет нужных навыков

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

Есть вещи которые я умею делать, а есть те с которыми даже не сталкивался, как например выше описанная потребность.

Как бЭ работают же мои 4 магазина, которые сам настраивал, пределывал, дописывал и тд...

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

А по поводу

обратитесь к специалисту который решит Ваш вопрос

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

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

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

Recommended Posts

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

Link to post

Share on other sites

Join the conversation