Показываем фото товара из торговых предложений вместо цвета товара

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

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

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

Изначально в свойстве цвет показываются картинки загруженные для этого цвета или nophoto, если картинки не загружены

Для начала нужно передать на детальную страницу товара фотографии товара из торговых предложений

Включаем режим правки и переходим в настройки каталога - выбираем настройки детального просмотра и отмечаем свойства фотографии и свойство цвета для торгового предложения

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

В районе с 340 по 420 строчки находим такую строчку:

<li data-treevalue="<? echo $arProp['ID'].'_'.$arOneValue['ID'] ?>" data-onevalue="<? echo $arOneValue['ID']; ?>" style="width: }; padding-top: }; display: none;" >
	<i title="<? echo $arOneValue['NAME']; ?>"></i>
	<span class="cnt">
		<span
			class="cnt_item"

Далее после class="cnt_item" убираем все что находится в style

style="background-image:url('<? echo $arOneValue['PICT']['SRC']; ?>');" title="<? echo $arOneValue['NAME']; ?>"

И вставляем туда такой код:

style="<?foreach ($arResult["OFFERS"] as $key => $value):?>
						<?if ($value["PROPERTIES"]["tpColor"]["VALUE"]==$arOneValue["XML_ID"]):?>
							<?$tmp = CFile::ResizeImageGet($value['PROPERTIES']["tpPhoto"]["VALUE"][0], array('width'=>100, 'height'=>150), BX_RESIZE_IMAGE_PROPORTIONAL_ALT, true);?>
							background-image:url('<? echo $tmp['src']; ?>');
							<?continue;?>
						<?endif;?>
					<?endforeach;?>"

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

Сначала запускаем цикл по каждому торговому предложению для товара:

<?foreach ($arResult["OFFERS"] as $key => $value):?>

Если значение (VALUE) текущего торгового предложения совпало с текущим XML_ID свойства, то сделаем ресайз картинки и выведем ее:

<?if ($value["PROPERTIES"]["tpColor"]["VALUE"]==$arOneValue["XML_ID"]):?>
							<?$tmp = CFile::ResizeImageGet($value['PROPERTIES']["tpPhoto"]["VALUE"][0], array('width'=>100, 'height'=>150), BX_RESIZE_IMAGE_PROPORTIONAL_ALT, true);?>
							background-image:url('<? echo $tmp['src']; ?>');
							<?continue;?>
						<?endif;?>

После этого остается только закрыть цикл и.. все

<?endforeach;?>"

Показываем фото товара из торговых предложений вместо цвета товара

Группа Вконтакте

Категории