Шаблон Лето, Спорт, Инфинити, Ночь, Лазурь
Чтобы при смене модификаций менялась главная картинка товара нужно:
1) Чтобы у Вас был выбор цвета и размера, Вам необходимо в админке добавить все эти модификации, но не просто так, а перебором сочетаний цвет-размер
Например, есть цвет - желтый и красный, а размер - 1 и 2, тогда добавленные модификации будут выглядеть следующим образом:
Мод. Цвет- желтый Свойство: Размер -1
Мод. Цвет- желтый Свойство: Размер -2
Мод. Цвет- красный Свойство: Размер -1
Мод. Цвет- красный Свойство: Размер -2
Свойство добавляется к модификации при помощи кнопки Добавить свойство
2) Все переборы добавлены, теперь необходимо добавить изображение, это необходимо сделать к каждой модификации (Мод. Цвет- желтый Свойство: Размер -1) в поле Добавить описание.
Вставьте в данное поле вот этот код
<img src="ссылка на изображение">
Заместо Ссылка на изображение укажите ссылку на реальное изображение
3) Теперь переходим к коду.
В файле main.js найдите блок
// Отправим запись об ошибке на сервер
sendError('no modification by slug '+slug);
alert('К сожалению сейчас не получается подобрать модификацию соответствующую выбранным параметрам.');
}
и сразу после него с новой строки вставьте
src_new = $('.goodsDataMainModificationsDescriptionBlock').find('img').attr('src');
$('.general-img img').attr('src', src_new);
$('.general-img a').attr('href', src_new);
$('#cloud-zoom-big').css('background-image','url(src_new)');
4) Там же найдите блок
// Добавление/удаление товара на сравнение/избранное через ajax
$('.add-compare').click(function(){
И перед ним добавьте блок строку
$('.goodsDataMainModificationsBlock').find('.goodsDataMainModificationsBlockProperty select').trigger('change');
5)
Для всех перечисленных шаблонов кроме шаблона Инфинити и Ночь
В шаблоне Товар находим строку
<center class="goodsImageZoom" data="{GOODS_IMAGE_ID}">Увеличить изображение</center>
и заменяем ее на
<a href="{GOODS_IMAGE_LARGE}" class="cloud-zoom" id="zoom1">Увеличить изображение</a>
Для шаблона Инфинити
В шаблоне Товар находим строку
<div class="goodsImageZoom" data="{GOODS_IMAGE_ID}" style="display: none;"><a href="#" title="Увеличить изображение"></a></div>
и заменяем ее на
<div class="goodsImageZoom" style="display: none;"><a href="#" title="Увеличить изображение"></a></div>
Вот в принципе и все. Проблема теперь заключается только в функции zoom (при наведении на картинку увеличивается часть картинки). Так как ее переписать не удастся, предлагаю ее убрать.