Перейти к содержимому


Фото
* * * * - 5 голосов

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


  • Чтобы отвечать, сперва войдите на форум
25 ответов в теме

#1 DaVinci

DaVinci
  • Фрилансер
  • 1 154 сообщений
  • Программирование, Верстка
  • Версия CMS:1.x, 2.x
  • Откуда:SimplaDev.ru

Опубликовано 25.03.2015 - 11:33

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

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

 

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

 

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

 

удобный, интерактивный редактор - Большое количество изображений загружается только в том случае если необходима функциональность - изображение для вариантов. если изображений не много до 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


Изменено: DaVinci, 25.03.2015 - 17:10


#2 Kors

Kors
  • Фрилансер
  • 3 522 сообщений
  • Программирование
  • Версия CMS:1.x, 2.x
  • Откуда:Россия

Опубликовано 25.03.2015 - 12:50

Насколько я понял, чтобы установить картинки для вариантов товара, надо сначала эти картинки загрузить к ТОВАРУ, а лишь потом для каждого варианта выбрать свою из выпадающего списка.
По сравнению с
http://forum.simplac...ыборе-варианта/
1. Налицо для админа ДВОЙНАЯ работа.
2. Админу выбирать картинки из списка по названию - весьма неудобно само по себе по сравнению с выбором картинок в графическом виде. К тому же картинки по смыслу чаще всего должны быть разные у разных вариантов.
3. Админу выбирать картинки из списка по названию - риск ошибок значительно выше.


По сравнению с методом по ссылке вижу два плюса
1. Работа со своим полем, не портится стандартное поле цифрового товара. Но этот плюс, по моему, пригодится менее, чем 1% владельцев магазинов.
2. Работает ресайз - это плюс, конечно, очень большой.


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

#3 Kors

Kors
  • Фрилансер
  • 3 522 сообщений
  • Программирование
  • Версия CMS:1.x, 2.x
  • Откуда:Россия

Опубликовано 25.03.2015 - 14:06

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

#4 DaVinci

DaVinci
  • Фрилансер
  • 1 154 сообщений
  • Программирование, Верстка
  • Версия CMS:1.x, 2.x
  • Откуда:SimplaDev.ru

Опубликовано 25.03.2015 - 14:09

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

 

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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


Изменено: DaVinci, 25.03.2015 - 14:48


#5 Kors

Kors
  • Фрилансер
  • 3 522 сообщений
  • Программирование
  • Версия CMS:1.x, 2.x
  • Откуда:Россия

Опубликовано 25.03.2015 - 14:31

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

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

#6 DaVinci

DaVinci
  • Фрилансер
  • 1 154 сообщений
  • Программирование, Верстка
  • Версия CMS:1.x, 2.x
  • Откуда:SimplaDev.ru

Опубликовано 25.03.2015 - 14:39

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

 

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



#7 Kors

Kors
  • Фрилансер
  • 3 522 сообщений
  • Программирование
  • Версия CMS:1.x, 2.x
  • Откуда:Россия

Опубликовано 25.03.2015 - 14:50

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

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

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

Изменено: Kors, 25.03.2015 - 14:50


#8 DaVinci

DaVinci
  • Фрилансер
  • 1 154 сообщений
  • Программирование, Верстка
  • Версия CMS:1.x, 2.x
  • Откуда:SimplaDev.ru

Опубликовано 25.03.2015 - 14:53

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

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

 

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

 

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

 

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

 

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

 

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


Изменено: DaVinci, 25.03.2015 - 15:13


#9 Kors

Kors
  • Фрилансер
  • 3 522 сообщений
  • Программирование
  • Версия CMS:1.x, 2.x
  • Откуда:Россия

Опубликовано 25.03.2015 - 15:10

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

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

#10 DaVinci

DaVinci
  • Фрилансер
  • 1 154 сообщений
  • Программирование, Верстка
  • Версия CMS:1.x, 2.x
  • Откуда:SimplaDev.ru

Опубликовано 25.03.2015 - 15:24

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

 

 

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


Изменено: DaVinci, 25.03.2015 - 15:29


#11 Maksclub

Maksclub
  • Фрилансер
  • 1 398 сообщений
  • Дизайн, Программирование, Верстка, Заказчик, Пользователь
  • Версия CMS:2.x
  • Откуда:Москва

Опубликовано 25.03.2015 - 21:17

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



#12 DaVinci

DaVinci
  • Фрилансер
  • 1 154 сообщений
  • Программирование, Верстка
  • Версия CMS:1.x, 2.x
  • Откуда:SimplaDev.ru

Опубликовано 28.03.2015 - 23:25

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


Изменено: DaVinci, 28.03.2015 - 23:33


#13 Bask

Bask
  • Пользователь
  • 90 сообщений
  • Пользователь

Опубликовано 30.03.2015 - 21:39

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

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

Спасибо!



#14 Joe

Joe
  • Пользователь
  • 57 сообщений

Опубликовано 17.04.2015 - 15:55

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



#15 Kors

Kors
  • Фрилансер
  • 3 522 сообщений
  • Программирование
  • Версия CMS:1.x, 2.x
  • Откуда:Россия

Опубликовано 17.04.2015 - 16:08

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

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



#16 DaVinci

DaVinci
  • Фрилансер
  • 1 154 сообщений
  • Программирование, Верстка
  • Версия CMS:1.x, 2.x
  • Откуда:SimplaDev.ru

Опубликовано 17.04.2015 - 19:28

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


Изменено: DaVinci, 17.04.2015 - 19:29


#17 DaVinci

DaVinci
  • Фрилансер
  • 1 154 сообщений
  • Программирование, Верстка
  • Версия CMS:1.x, 2.x
  • Откуда:SimplaDev.ru

Опубликовано 17.04.2015 - 19:31

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

 

 

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



#18 Joe

Joe
  • Пользователь
  • 57 сообщений

Опубликовано 18.04.2015 - 15:03

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



#19 kislotnik

kislotnik
  • Пользователь
  • 329 сообщений
  • Заказчик, Пользователь
  • Версия CMS:2.x
  • Откуда:Украина

Опубликовано 03.07.2015 - 10:50

для отображения на сайте все правке в 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



#20 kislotnik

kislotnik
  • Пользователь
  • 329 сообщений
  • Заказчик, Пользователь
  • Версия CMS:2.x
  • Откуда:Украина

Опубликовано 03.07.2015 - 11:13

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

 

стоку

 

$(".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)-->

Изменено: kislotnik, 03.07.2015 - 11:14





0 пользователей читают эту тему

0 пользователей, 0 гостей, 0 скрытых