Кастомизация вывода изображения на странице товара

Привет. На странице товара требуется выводить изображение следующим образом:
Если у товара есть 2 и более изображений, то нужно выводить 2-ое изображение, в противном случае — 1-ое(основное).

Изменения должны касаться только страницы товара. Как добиться такого поведения?

Алексей

23 января 2016, 10:18

1 148

Комментарии: 3

Максим Кузнецов

23 января 2016, 13:47

Если используете msGallery, то можете указать отступ изображений при помощи &offset.

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

Или в чанке-обертке можете не указывать путь до основной картинки, а уже при помощи jquery смотреть количество загруженных изображений в DOM'e и вставлять желаемую картинку в область «основной».

Алексей

23 января 2016, 14:17

можете указать отступ изображений при помощи &offset

Некорректно работает, если у товара 1 изображение.

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

Можете показать, как это сделать?

Максим Кузнецов

23 января 2016, 16:18

Могу примерно показать как сделать на Jquery:
— в вызове сниппета msGallery заполняем параметры &tplOuter, &tplRow и &tplSingle. В сингле все по дефолту, в tplOuter примерно с такой конструкцией:

<div id="itemGallery">
	<a rel="group-[[*id]]" class="fancybox" href="[[+url]]" target="_blank">
		<img src="" class="mainImage" />
	</a>
	<div class="row">
		[[+rows]]
	</div>
</div>

и &tplRow (для примера оставим дефолтный):

<div class="span2 col-md-2">
	<a href="[[+360x270:default=`[[+url]]`]]" class="thumbnail" data-image="[[+url]]">
		<img src="[[+70x70]]" alt="" title="[[+name]]" width="70" height="70">
	</a>
</div>

Теперь, при помощи jquery реализуем оставшиеся действия:

$(document).ready(function(){
	//Если всего изображений у товара больше 1, тогда работаем
	if ($("#itemGallery > .row > div").length > 1) {
		//Отсчет идет с 0, так что второй элемент = 1
		var newMainImage = $("#itemGallery > .row > div:eq(1) > a").attr("data-image");
		var newMainPreview = $("#itemGallery > .row > div:eq(1) > a").attr("href");
		
		//вставляем новыы данные в "основную" ячейку
		$("#itemGallery > a").attr("href", newMainImage);
		$("#itemGallery > a > img").attr("src", newMainPreview);

	
	}
});

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