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

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

Изменения должны касаться только страницы товара. Как добиться такого поведения?
Алексей
Алексей
23 января 2016, 10:18
modx.pro
1
821
0

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

Максим Кузнецов
Максим Кузнецов
23 января 2016, 13:47
0
Если используете msGallery, то можете указать отступ изображений при помощи &offset.

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

Или в чанке-обертке можете не указывать путь до основной картинки, а уже при помощи jquery смотреть количество загруженных изображений в DOM'e и вставлять желаемую картинку в область «основной».
    Алексей
    Алексей
    23 января 2016, 14:17
    0
    можете указать отступ изображений при помощи &offset
    Некорректно работает, если у товара 1 изображение.
    можете воспользоваться параметром &toSeparatePlaceholders и с помощью дефолтных модификаторов модкса в чанке-обертке расписать желаемую логику
    Можете показать, как это сделать?
      Максим Кузнецов
      Максим Кузнецов
      23 января 2016, 16:18
      0
      Могу примерно показать как сделать на 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);

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