Здравствуйте, как сделать так, чтобы при выборе определенного цвета покупателем автоматически и менялась картинка товара на соответствующую. Например: http://italpalto.com.../testovoe-palto То есть выбираю белый цвет - появляется фото с белым пальто, выбираю песочный - с песочным.
Спасибо!
1
Смена Фотографии Товара В Зависимости От Цвета
Автор jiimMorrison, 22 дек. 2013 21:51
Сообщений в теме: 14
#1
jiimMorrison
-
- Пользователи
-
- 58 сообщений
Продвинутый пользователь
Отправлено 22 Декабрь 2013 - 21:51
#2
Alexey11
-
- Модератоpы
-
- 1 057 сообщений
Активный участник
- ГородНижний новгород
Отправлено 23 Декабрь 2013 - 08:13
Здравствуйте, по вашему вопросу вы можете найти информацию вот в этой теме.
#3
jiimMorrison
-
- Пользователи
-
- 58 сообщений
Продвинутый пользователь
Отправлено 26 Декабрь 2013 - 07:59
Сделал все соответственно инструкции. Однако теперь, когда я хочу увеличить изображение, появляется сообщение о JS ошибке.
http://italpalto.com.../testovoe-palto - смотреть на СИНЕМ пальто (пока на нем эксперементировал)
То есть в описании вставил код такого вида:
<a href="ссылка на большое изображение" onclick="$(this).nyroModalManual(); return(false);">
<img src="ссылка на Маленькое изображение" />
</a>
Если вставлять такой код без return(false);:
<a href="ссылка на большое изображение" onclick="$(this).nyroModalManual();">
<img src="ссылка на Маленькое изображение" />
</a>
То изображение увеличивается, однако открывается на весь экран без отображения на заднем фоне страницы сайта.
http://italpalto.com.../testovoe-palto - смотреть на СИНЕМ пальто (пока на нем эксперементировал)
То есть в описании вставил код такого вида:
<a href="ссылка на большое изображение" onclick="$(this).nyroModalManual(); return(false);">
<img src="ссылка на Маленькое изображение" />
</a>
Если вставлять такой код без return(false);:
<a href="ссылка на большое изображение" onclick="$(this).nyroModalManual();">
<img src="ссылка на Маленькое изображение" />
</a>
То изображение увеличивается, однако открывается на весь экран без отображения на заднем фоне страницы сайта.
#4
jiimMorrison
-
- Пользователи
-
- 58 сообщений
Продвинутый пользователь
Отправлено 26 Декабрь 2013 - 08:28
В общем пока вернул к стандартному виду, так как нужно сначала с JS ошибкой разбираться. Как от нее избавиться??
#5
Castiel
-
- Модераторы
-
- 3 519 сообщений
Активный участник
- ГородНижний Новгород
Отправлено 26 Декабрь 2013 - 09:04
jiimMorrison (26 Декабрь 2013 - 08:28) писал:
В общем пока вернул к стандартному виду, так как нужно сначала с JS ошибкой разбираться. Как от нее избавиться??
Возможно данная ошибка отображается только администраторам сайта. Попробуйте воспользоваться другим браузером и посмотреть появляется ли данная ошибка.
#6
jiimMorrison
-
- Пользователи
-
- 58 сообщений
Продвинутый пользователь
Отправлено 26 Декабрь 2013 - 09:14
Да, сообщение об ошибке не вылазит. Но и фотография не открывается в большом формате.
#7
Castiel
-
- Модераторы
-
- 3 519 сообщений
Активный участник
- ГородНижний Новгород
Отправлено 26 Декабрь 2013 - 09:29
jiimMorrison (26 Декабрь 2013 - 09:14) писал:
Да, сообщение об ошибке не вылазит. Но и фотография не открывается в большом формате.
Проверил, фотография открывается в всплывающем окне. Попробуйте почистить кэш браузера
Прикрепленные изображения
#8
jiimMorrison
-
- Пользователи
-
- 58 сообщений
Продвинутый пользователь
Отправлено 26 Декабрь 2013 - 09:33
Сейчас да, я потому что вернул шаблон к первоначальному виду. А если внести изменения опять, чтобы фото менялось при выборе цвета (то есть вставлять код к описанию модификации) - выползает ошибка
#9
jiimMorrison
-
- Пользователи
-
- 58 сообщений
Продвинутый пользователь
Отправлено 26 Декабрь 2013 - 09:49
Так, опять исправил. Товар http://italpalto.com.../testovoe-palto
Большое изображение есть, если выбрать синий цвет. Так вот, оно не открывается, выдается ошибка JS:
Script error. на строке: 0.
Адрес файла: http://design.italpa...version2.min.js
Большое изображение есть, если выбрать синий цвет. Так вот, оно не открывается, выдается ошибка JS:
Script error. на строке: 0.
Адрес файла: http://design.italpa...version2.min.js
#10
jiimMorrison
-
- Пользователи
-
- 58 сообщений
Продвинутый пользователь
Отправлено 26 Декабрь 2013 - 12:26
Получается так, если фото оставляю на месте описания, то все работает. Если перенашу в шаблоне товара описание на место основного фото, как порекомендовали, то выдается ошибка. Не могу понять причину.
#11
Сake
-
- Модератоpы
-
- 5 979 сообщений
Активный участник
Отправлено 27 Декабрь 2013 - 02:57
Пожалуйста, повторите изменение на странице товара. На данный момент у вас используется изображение ссылкой для модификации Цвет: Синий. При клике по изображению в описании модификации - изображение корректно отображается в сплывающем окне. Ошибка возникает только при попытке переключения изображения на следующее или предыдущее.
#12
jiimMorrison
-
- Пользователи
-
- 58 сообщений
Продвинутый пользователь
Отправлено 27 Декабрь 2013 - 08:35
Сейчас фотографии располагаются на месте описания, что не хорошо. Если я вношу в шаблон вот такие правки (чтобы фото были не на месте блока описания модификации, а на месте блока изображения товара, то появляется ошибка при увеличении фото):
В описание модификации изображение можно ставить через тег <img> и при изменении модификации изображение будет отображаться. Так же можно сделать увеличение изображения например так
<a href="ссылка на большое изображение" onclick="$(this).nyroModalManual();">
<img src="ссылка на Маленькое изображение" />
</a>
далее по сути останется переместить описание модификации
<!-- Блок описания модификации -->
<tr>
<td class="goodsDataMainModificationsDescriptionBlock" {% IFNOT GOODS_MOD_DESCRIPTION %}style="display:none;"{% ENDIF %} colspan="2">
{GOODS_MOD_DESCRIPTION}
</td>
</tr>
на место изображения товара
<div class="goodsDataMainImage">
{% IF GOODS_IMAGE_EMPTY %}
<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" />
{% ELSE %}
<a itemprop="image" href="{GOODS_IMAGE_LARGE}" target="_blank" title="Увеличить {GOODS_NAME}"><img class="cornerAll withBorder goods-image-medium" src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}" /></a>
{% ENDIF %}
<!-- Идентификатор изображения товара, используется для галереи изображений -->
<input type="hidden" rel="{GOODS_IMAGE_ID}" />
</div>
в итоге из следующего кода
<td class="goodsDataMainImageBlock">
<!-- Большое изображение -->
<div class="goodsDataMainImage">
{% IF GOODS_IMAGE_EMPTY %}
<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" />
{% ELSE %}
<a itemprop="image" href="{GOODS_IMAGE_LARGE}" target="_blank" title="Увеличить {GOODS_NAME}"><img class="cornerAll withBorder goods-image-medium" src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}" /></a>
{% ENDIF %}
<!-- Идентификатор изображения товара, используется для галереи изображений -->
<input type="hidden" rel="{GOODS_IMAGE_ID}" />
</div>
<!-- Ссылка на увеличение среднего изображения товара до большого. Появляется если у товара указано изображение -->
{% IFNOT GOODS_IMAGE_EMPTY %}
<div class="goodsDataMainImageZoom">
<a href="{GOODS_IMAGE_LARGE}" target="_blank">Увеличить изображение</a>
</div>
{% ENDIF %}
<!-- Другие изображения товара. Отображаются если есть изображения товара -->
{% IFNOT goods_images_empty %}
{% FOR goods_images %}
<!-- Заголовок и обёртка для изображений, которая позволяет не показывать уменьшенное изображение товара если оно у него лишь одно -->
{% IF goods_images.first %}
<div {% IF goods_images.length=1 %}style="display:none;"{% ENDIF %}>
<h5>Другие фото {GOODS_NAME}</h5>
{% ENDIF %}
<!-- Уменьшенное изображение товара -->
<div class="goodsDataMainImagesIcon left">
<a href="{goods_images.LARGE}" rel="gallery" target="_blank" title="{goods_images.NAME}"><img class="cornerAll withBorder goods-image-icon" rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>
<!-- Идентификатор изображения товара, используется для галереи изображений -->
<input type="hidden" rel="{goods_images.ID}" />
</div>
<!-- В самом конце закрываем обёртку для списка маленьких изображений товара -->
{% IF goods_images.last %}
</div>
{% ENDIF %}
{% ENDFOR %}
{% ENDIF %}
</td>
получиться что-то вроде этого
<td class="goodsDataMainImageBlock">
<!-- Большое изображение -->
<div class="goodsDataMainImage goodsDataMainModificationsDescriptionBlock">
{% IF GOODS_MOD_DESCRIPTION %}
{GOODS_MOD_DESCRIPTION | htmlspecialchars_decode}
{%ELSE%}
{% IF GOODS_IMAGE_EMPTY %}
<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" />
{% ELSE %}
<a itemprop="image" href="{GOODS_IMAGE_LARGE}" target="_blank" title="Увеличить {GOODS_NAME}"><img class="cornerAll withBorder goods-image-medium" src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}" /></a>
{% ENDIF %}
<!-- Идентификатор изображения товара, используется для галереи изображений -->
<input type="hidden" rel="{GOODS_IMAGE_ID}" />
{% ENDIF %}
</div>
<!-- Ссылка на увеличение среднего изображения товара до большого. Появляется если у товара указано изображение -->
{% IFNOT GOODS_MOD_DESCRIPTION %}{% IFNOT GOODS_IMAGE_EMPTY %}
<div class="goodsDataMainImageZoom">
<a href="{GOODS_IMAGE_LARGE}" target="_blank">Увеличить изображение</a>
</div>
{% ENDIF %}{% ENDIF %}
<!-- Другие изображения товара. Отображаются если есть изображения товара -->
{% IFNOT GOODS_MOD_DESCRIPTION %}{% IFNOT goods_images_empty %}
{% FOR goods_images %}
<!-- Заголовок и обёртка для изображений, которая позволяет не показывать уменьшенное изображение товара если оно у него лишь одно -->
{% IF goods_images.first %}
<div {% IF goods_images.length=1 %}style="display:none;"{% ENDIF %}>
<h5>Другие фото {GOODS_NAME}</h5>
{% ENDIF %}
<!-- Уменьшенное изображение товара -->
<div class="goodsDataMainImagesIcon left">
<a href="{goods_images.LARGE}" rel="gallery" target="_blank" title="{goods_images.NAME}"><img class="cornerAll withBorder goods-image-icon" rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>
<!-- Идентификатор изображения товара, используется для галереи изображений -->
<input type="hidden" rel="{goods_images.ID}" />
</div>
<!-- В самом конце закрываем обёртку для списка маленьких изображений товара -->
{% IF goods_images.last %}
</div>
{% ENDIF %}
{% ENDFOR %}
{% ENDIF %}{% ENDIF %}
</td>
В описание модификации изображение можно ставить через тег <img> и при изменении модификации изображение будет отображаться. Так же можно сделать увеличение изображения например так
<a href="ссылка на большое изображение" onclick="$(this).nyroModalManual();">
<img src="ссылка на Маленькое изображение" />
</a>
далее по сути останется переместить описание модификации
<!-- Блок описания модификации -->
<tr>
<td class="goodsDataMainModificationsDescriptionBlock" {% IFNOT GOODS_MOD_DESCRIPTION %}style="display:none;"{% ENDIF %} colspan="2">
{GOODS_MOD_DESCRIPTION}
</td>
</tr>
на место изображения товара
<div class="goodsDataMainImage">
{% IF GOODS_IMAGE_EMPTY %}
<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" />
{% ELSE %}
<a itemprop="image" href="{GOODS_IMAGE_LARGE}" target="_blank" title="Увеличить {GOODS_NAME}"><img class="cornerAll withBorder goods-image-medium" src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}" /></a>
{% ENDIF %}
<!-- Идентификатор изображения товара, используется для галереи изображений -->
<input type="hidden" rel="{GOODS_IMAGE_ID}" />
</div>
в итоге из следующего кода
<td class="goodsDataMainImageBlock">
<!-- Большое изображение -->
<div class="goodsDataMainImage">
{% IF GOODS_IMAGE_EMPTY %}
<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" />
{% ELSE %}
<a itemprop="image" href="{GOODS_IMAGE_LARGE}" target="_blank" title="Увеличить {GOODS_NAME}"><img class="cornerAll withBorder goods-image-medium" src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}" /></a>
{% ENDIF %}
<!-- Идентификатор изображения товара, используется для галереи изображений -->
<input type="hidden" rel="{GOODS_IMAGE_ID}" />
</div>
<!-- Ссылка на увеличение среднего изображения товара до большого. Появляется если у товара указано изображение -->
{% IFNOT GOODS_IMAGE_EMPTY %}
<div class="goodsDataMainImageZoom">
<a href="{GOODS_IMAGE_LARGE}" target="_blank">Увеличить изображение</a>
</div>
{% ENDIF %}
<!-- Другие изображения товара. Отображаются если есть изображения товара -->
{% IFNOT goods_images_empty %}
{% FOR goods_images %}
<!-- Заголовок и обёртка для изображений, которая позволяет не показывать уменьшенное изображение товара если оно у него лишь одно -->
{% IF goods_images.first %}
<div {% IF goods_images.length=1 %}style="display:none;"{% ENDIF %}>
<h5>Другие фото {GOODS_NAME}</h5>
{% ENDIF %}
<!-- Уменьшенное изображение товара -->
<div class="goodsDataMainImagesIcon left">
<a href="{goods_images.LARGE}" rel="gallery" target="_blank" title="{goods_images.NAME}"><img class="cornerAll withBorder goods-image-icon" rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>
<!-- Идентификатор изображения товара, используется для галереи изображений -->
<input type="hidden" rel="{goods_images.ID}" />
</div>
<!-- В самом конце закрываем обёртку для списка маленьких изображений товара -->
{% IF goods_images.last %}
</div>
{% ENDIF %}
{% ENDFOR %}
{% ENDIF %}
</td>
получиться что-то вроде этого
<td class="goodsDataMainImageBlock">
<!-- Большое изображение -->
<div class="goodsDataMainImage goodsDataMainModificationsDescriptionBlock">
{% IF GOODS_MOD_DESCRIPTION %}
{GOODS_MOD_DESCRIPTION | htmlspecialchars_decode}
{%ELSE%}
{% IF GOODS_IMAGE_EMPTY %}
<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" />
{% ELSE %}
<a itemprop="image" href="{GOODS_IMAGE_LARGE}" target="_blank" title="Увеличить {GOODS_NAME}"><img class="cornerAll withBorder goods-image-medium" src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}" /></a>
{% ENDIF %}
<!-- Идентификатор изображения товара, используется для галереи изображений -->
<input type="hidden" rel="{GOODS_IMAGE_ID}" />
{% ENDIF %}
</div>
<!-- Ссылка на увеличение среднего изображения товара до большого. Появляется если у товара указано изображение -->
{% IFNOT GOODS_MOD_DESCRIPTION %}{% IFNOT GOODS_IMAGE_EMPTY %}
<div class="goodsDataMainImageZoom">
<a href="{GOODS_IMAGE_LARGE}" target="_blank">Увеличить изображение</a>
</div>
{% ENDIF %}{% ENDIF %}
<!-- Другие изображения товара. Отображаются если есть изображения товара -->
{% IFNOT GOODS_MOD_DESCRIPTION %}{% IFNOT goods_images_empty %}
{% FOR goods_images %}
<!-- Заголовок и обёртка для изображений, которая позволяет не показывать уменьшенное изображение товара если оно у него лишь одно -->
{% IF goods_images.first %}
<div {% IF goods_images.length=1 %}style="display:none;"{% ENDIF %}>
<h5>Другие фото {GOODS_NAME}</h5>
{% ENDIF %}
<!-- Уменьшенное изображение товара -->
<div class="goodsDataMainImagesIcon left">
<a href="{goods_images.LARGE}" rel="gallery" target="_blank" title="{goods_images.NAME}"><img class="cornerAll withBorder goods-image-icon" rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>
<!-- Идентификатор изображения товара, используется для галереи изображений -->
<input type="hidden" rel="{goods_images.ID}" />
</div>
<!-- В самом конце закрываем обёртку для списка маленьких изображений товара -->
{% IF goods_images.last %}
</div>
{% ENDIF %}
{% ENDFOR %}
{% ENDIF %}{% ENDIF %}
</td>
#13
Сake
-
- Модератоpы
-
- 5 979 сообщений
Активный участник
Отправлено 28 Декабрь 2013 - 04:15
Возможно проблема появляется из-за дополнительного события заданного в main.js. Попробуйте в файле main.js найти строку
и заменить её на
После повторно проделать изменения. Если замена строки не поможет, то пожалуйста, не удаляйте изменения чтобы мы смогли посмотреть и определить проблему на примере.
$('.goodsDataMainImage a, .goodsDataMainImageZoom a').click
и заменить её на
$('.goodsDataMainImage:not(.goodsDataMainModificationsDescriptionBlock) a, .goodsDataMainImageZoom a').click
После повторно проделать изменения. Если замена строки не поможет, то пожалуйста, не удаляйте изменения чтобы мы смогли посмотреть и определить проблему на примере.
#14
jiimMorrison
-
- Пользователи
-
- 58 сообщений
Продвинутый пользователь
Отправлено 29 Декабрь 2013 - 09:43
Здравствуйте. Проделал изменения - не помогло. http://italpalto.com.../testovoe-palto - выбираю синий цвет, увеличиваю - ошибка остается.
#15
Сake
-
- Модератоpы
-
- 5 979 сообщений
Активный участник
Отправлено 30 Декабрь 2013 - 23:52
Ошибка возникает из-за того что не задан идентификатор галереи. В данном случае 2 варианта решении проблемы. Первый вариант это задать ссылке атрибут rel, второй вариант задать опцию nyro указывающий идентификатор галереи. Код первого варианта
В данном варианте может быть ошибка при попытке переключения изображений в случае если изображение в галереи всего одно. Второй вариант кода
В данном случае ошибки не будет если изображение в галереи всего одно. В общем вам следует использовать один из вариантов в зависимости от числа изображений в галереи. Если изображение всего одно, то используйте второй вариант кода. Если изображений несколько - используйте первый вариант кода.
<a href="ссылка на большое изображение" onclick="$(this).nyroModalManual(); return(false);" rel="gallery"> <img src="ссылка на Маленькое изображение" /> </a>
В данном варианте может быть ошибка при попытке переключения изображений в случае если изображение в галереи всего одно. Второй вариант кода
<a href="ссылка на большое изображение" onclick="$(this).nyroModalManual({gallery: null}); return(false);">
<img src="ссылка на Маленькое изображение" />
</a>
В данном случае ошибки не будет если изображение в галереи всего одно. В общем вам следует использовать один из вариантов в зависимости от числа изображений в галереи. Если изображение всего одно, то используйте второй вариант кода. Если изображений несколько - используйте первый вариант кода.
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных
