Кастомизация вывода изображения на странице товара
Привет. На странице товара требуется выводить изображение следующим образом:
Если у товара есть 2 и более изображений, то нужно выводить 2-ое изображение, в противном случае — 1-ое(основное).
Изменения должны касаться только страницы товара. Как добиться такого поведения?
Если у товара есть 2 и более изображений, то нужно выводить 2-ое изображение, в противном случае — 1-ое(основное).
Изменения должны касаться только страницы товара. Как добиться такого поведения?
Комментарии: 3
Если используете msGallery, то можете указать отступ изображений при помощи &offset.
Или можете воспользоваться параметром &toSeparatePlaceholders и с помощью дефолтных модификаторов модкса в чанке-обертке расписать желаемую логику.
Или в чанке-обертке можете не указывать путь до основной картинки, а уже при помощи jquery смотреть количество загруженных изображений в DOM'e и вставлять желаемую картинку в область «основной».
Или можете воспользоваться параметром &toSeparatePlaceholders и с помощью дефолтных модификаторов модкса в чанке-обертке расписать желаемую логику.
Или в чанке-обертке можете не указывать путь до основной картинки, а уже при помощи jquery смотреть количество загруженных изображений в DOM'e и вставлять желаемую картинку в область «основной».
можете указать отступ изображений при помощи &offsetНекорректно работает, если у товара 1 изображение.
можете воспользоваться параметром &toSeparatePlaceholders и с помощью дефолтных модификаторов модкса в чанке-обертке расписать желаемую логикуМожете показать, как это сделать?
Могу примерно показать как сделать на Jquery:
— в вызове сниппета msGallery заполняем параметры &tplOuter, &tplRow и &tplSingle. В сингле все по дефолту, в tplOuter примерно с такой конструкцией:
и &tplRow (для примера оставим дефолтный):
Теперь, при помощи 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);
}
});
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.