avatar

Свое фото для варианта товара

Опубликовал в блог Дополнения и модули для Simpla CMS
0


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

Приступим, делаем запрос в бд:
ALTER TABLE `s_variants` ADD `images_ids` VARCHAR( 150 ) NOT NULL AFTER `name`;

далее в api/Variants.php ищем код (в 2 местах)
v.name,

добавляем после него
v.images_ids,

открываем simpla/design/html/product.tpl ищем
<li class="variant_name">Название варианта</li>

меняем на
<li class="variant_name">Вариант</li>    
<li class="variant_images"></li>

перед строкой
<li class="variant_sku">   	<input name="variants[sku][]"       	type="text"   value="{$variant->sku|escape}" /></li>

добавляем
<li class="variant_images"><a href='#' class="add_color"><img src="design/images/picture{if !$variant->images_ids}_empty{/if}.png" title="Привязать изображение" /></a> <input name="variants[images_ids][]" type="hidden" value="{$variant->images_ids|escape}" /></li>

далее по коду комментируем блок с цифровыми файлами за ненадобностью, так как у нас другой тип товара (если он нужен — оставьте).
//<li class="variant_download">...</li>

продолжим, перед строкой
<li class="variant_sku"><input name="variants[sku][]" type="" value="" /></li>

добавим
<li class="variant_images"><a href='#' class="add_color"><img src="design/images/picture{if !$variant->images_ids}_empty{/if}.png" title="Привязать изображение" /></a> <input name="variants[images_ids][]" type="hidden" value="{$variant->images_ids|escape}" /></li>

аналогично вышеприведенному коду комментируем “цифровой товар”
//<li class="variant_download">...</li>

добавляем после
<!-- Варианты товара (The End)-->

div вывода всплывающего блока картинок
<div id="popup_images"></div>

далее перед строкой
// Загрузить файл к варианту

добавляем

  var color_variant, ids;
    
	$('#variants_block a.add_color').live('click', function() {
    	offset = $(this).offset();
  	 
    	color_variant = $(this);
  	ids = $(color_variant).closest('li').find('input[type=hidden]').val().split(',');
 
    	$('#popup_images').html('');
    	$('#column_right .images ul').clone().appendTo('#popup_images');
  	$('#popup_images input[type=hidden]').each(function(){  
    	id = $(this).val()+'';   	 
    	if($.inArray(id, ids) >= 0) $('<input type="checkbox" value="' + $(this).val() + '" checked="checked" />').insertAfter(this);
    	else $('<input type="checkbox" value="' + $(this).val() + '" />').insertAfter(this);
    	$(this).remove();
  	});
  	 
    	$('#popup_images li').each(function() { $(this).find('a').remove(); });
  	$('#popup_images ul').append('<a href="#" class="apply">Применить</a>');
  	 
    	$('#popup_images').css('top', (offset.top+28)+'px').css('left', (offset.left+0) + 'px').toggle();
    	return false;    
	});
    
	$('#popup_images a.apply').live('click', function() {
    	ids = []; 	 
  	$('#popup_images :checkbox:checked').each(function(){ ids.push($(this).val()); });
    	$(color_variant).closest('li').find('input[type=hidden]').val(ids.join(','));
    	if(ids.length > 0) $(color_variant).closest('li').find('img').attr('src', 'design/images/picture.png');
    	else $(color_variant).closest('li').find('img').attr('src', 'design/images/picture_empty.png');
    	$('#popup_images').toggle();
    	return false;  
	});

	function changeVarName(obj) {
    	parent = $(obj).closest('ul');
    	color = parent.find('.variant_color input').val();   
    	size = parent.find('.variant_size input').val();
    	parent.find('.variant_name input').val(color + ' ' + size);
	}

добавим стили в simpla/design/css/style.css
#variants_block li.variant_images { width: 30px; }
#variants_block li.variant_images a.add_color { position: relative; top: 5px; }
#popup_images li { border: 1px solid #d0d0d0; width: 100px; height: 100px; margin-right: 7px; margin-bottom: 7px; background-color: #fff; display: -moz-inline-box; display: inline-block; *zoom: 1; *display: inline; word-spacing: normal; line-height: 100px; vertical-align: top; text-align: center; overflow: hidden; position: relative; }
#popup_images a { display: block; clear: both; margin: 0 7px 7px; }
#popup_images li img { vertical-align: middle; max-width: 100px; }
#popup_images li input { position: absolute; left: 8px; top: 8px; }
#popup_images { display: none; padding: 6px 0 0 6px; max-width: 437px; background: #f7f7f7; position: absolute; box-shadow: 0 0 14px #999; }
#popup_images:before { content:''; display: block; width:0; height:0; position: absolute; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #f7f7f7; left: 2px; top:-6px; }
#popup_images li { cursor: pointer; }
#popup_images li.active { border: 1px solid #2a2a2a; }
#popup_images li:hover { border: 1px solid #4d4d4d; }

далее открываем файл 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}
    <div class="image" id="big_image">
        <img src="{$product->image->filename|resize:300:300}" alt="{$product->product->name|escape}" />
    </div>
    {/if}
    <!-- Большое фото (The End)-->

далее ищем
<!-- Описание товара -->
	<div class="description">
	
		{$product->body}
		
		{if $product->variants|count > 0}
		<!-- Выбор варианта товара -->
		<form class="variants" action="/cart">
			<table>
			{foreach $product->variants as $v}
			<tr class="variant">
				<td>
					<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}/>
				</td>
				<td>
					{if $v->name}<label class="variant_name" for="product_{$v->id}">{$v->name}</label>{/if}
				</td>
				<td>
					{if $v->compare_price > 0}<span class="compare_price">{$v->compare_price|convert}</span>{/if}
					<span class="price">{$v->price|convert} <span class="currency">{$currency->sign|escape}</span></span>
				</td>
			</tr>
			{/foreach}
			</table>
			<input type="submit" class="button" value="в корзину" data-result-text="добавлено"/>
		</form>
		<!-- Выбор варианта товара (The End) -->
		{else}
			Нет в наличии
		{/if}
			
	</div>
	<!-- Описание товара (The End)-->

меняем на
<!-- Описание товара -->
	<div class="description">
	{$product->body}
    {if $product->variants|count > 0}
    <!-- Выбор варианта товара -->
    <form class="variants" action="/cart">
      <table>
        <tr{if $product->variants|count < 2} style="display:none;"{/if}>            
            <td id="variants">
                Варианты:
                {foreach $product->variants as $v}<label{if $v@first} class="active"{/if}><input type="radio" name="variant" value="{$v->id}"{if $v@first} checked{/if} />{$v->name}</label>{/foreach} 
            </td>
        </tr>        
        <tr>
            <td><input type="submit" class="button" value="в корзину" data-result-text="добавлено"/></td>
        </tr>
        <tr> 
            <td>
              <span class="compare_price">{$v->compare_price|convert}</span>
              <span class="price">{$v->price|convert}</span> <span class="currency">{$currency->sign|escape}</span></span>            
            </td>
        </tr>
      </table>
      
    </form>
    <!-- Выбор варианта товара (The End) -->
    
    
    <script>

    var variants = {
        {foreach $product->variants as $v} '{$v->id}': {literal}{{/literal}'images_ids':[{$v->images_ids}], 'name':'{$v->name}', 'price':'{$v->price}', 'compare_price':'{$v->compare_price}'{literal}}{/literal},
        {/foreach}   
    };

    {literal}

    function changeVariant(){
        var variant = $('input[name=variant]:checked'),
            val = variants[variant.val()],
            images_ids = val['images_ids'],
            image_id = images_ids[0],
            arr = [];
        console.log(images_ids);    
        $('.images a').hide();
        if(image_id != '' && $('#image' + image_id) !== 'undefined') {
            $('#big_image img').attr('src', $('#image'+image_id).attr('rel'));
            $.each(images_ids, function(id, val) { $('#image' + val).show(); });
        }
            
        $('#variants label').removeClass('active');   
        variant.parent().addClass('active');            

        $('.compare_price').text(val['compare_price']);   
        $('.price').text(val['price']);   
    }

    $(function() {
        $('input[name=variant]').live('change', function(){ changeVariant(); });
        changeVariant();
    });
    {/literal}
    </script>
    
    
    
    {else}
    Нет в наличии
    {/if}
			
	</div>
	<!-- Описание товара (The End)-->

ищем
<!-- Дополнительные фото продукта -->
	{if $product->images|count>1}
	<div class="images">
		{* cut удаляет первую фотографию, если нужно начать 2-й - пишем cut:2 и тд *}
		{foreach $product->images|cut as $i=>$image}
			<a href="{$image->filename|resize:800:600:w}" class="zoom" rel="group"><img src="{$image->filename|resize:95:95}" alt="{$product->name|escape}" /></a>
		{/foreach}
	</div>
	{/if}
	<!-- Дополнительные фото продукта (The End)-->

меняем на
<!-- Дополнительные фото продукта -->
    {if $product->images|count>1}
    <div class="images">
        {* cut удаляет первую фотографию, если нужно начать 2-й - пишем cut:2 и тд *}
        {foreach $product->images as $i=>$image}
            <a id="image{$image->id}" href="{$image->filename|resize:800:600:w}" rel="{$image->filename|resize:300:300}" id="image{$image->id}" class="zoom" data-rel="group"><img src="{$image->filename|resize:95:95}" alt="{$product->name|escape}" /></a>
        {/foreach}
    </div>
    {/if}
    <!-- Дополнительные фото продукта (The End)-->

закидываем эти иконки в папку images вашего шаблона.
Вот собственно и все.
3 комментария RSS
avatar
Отличный модуль, работает, но есть маленький баг. Когда добавляю варианты, нажимаю сохранить и добавляется дополнительный пустой вариант.
Если убрать всю строку INPUT в simpla/design/html/product.tpl
<li class="variant_images"><a href='#' class="add_color"><img src="design/images/picture{if !$variant->images_ids}_empty{/if}.png" title="Привязать изображение" /></a> <input name="variants[images_ids][]" type="hidden" value="{$variant->images_ids|escape}" /></li>

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

avatar
возможно, что у вас где то внесены изменения (дополнения или модули) которые создают конфликт
avatar
Добрый день, не можете подсказать, как вашу доработку заставить работать с шаблоном buyshop? Потому что там выводы товаров, картинок в корне отличаются от тех, что вы упоминаете, не нашёл даже параллели. Буду очень благодарен.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.