Опубликовано: 1 июля 2015
Просмотр дополнительных изображений товара на странице категории. Есть решение
Здравствуйте!
Можно ли реализовать такую функцию:
1. Посетитель сайта находится в категории товаров, видит список товаров с изображениями, ценами, кнопкой "В КОРЗИНУ".
2. Посетитель сайта наводит курсор мыши на товар. Если у товара фотографий больше 1, то показываются стрелочки влево и вправо, нажав на которые будут перелистываться фотографии.
Например, у товара имеется 3 фотографии. Посетитель жмет на стрелку вправо, слайдером показывается фото №2, еще раз вправо - фото №3, еще раз вправо - фото №1. Если посетитель сайта видит фото №1 и нажимает стрелку влево, то перелистывание идет в другую сторону на фото №3.
Увидел реализацию на этом сайте: http://www.chemodan66.ru/ryukzaki/. Движок очень похож на webasyst.
Комментарии (9)
это движок cs-cart
Сделать слайдером можно, но инструкция получится слишком обширная
могу предложить только замену изображения при наведении указателя мыши
1. в файле "products.list.html" (магазин-витрина-шаблоны)
после строки <ul class="product-list {$view}">, прописать код
{$images_pr = $wa->shop->images(array_keys($products), '200x0')}
<style type="text/css">
.image img{
display:none;
}
.image img.first{
display:inline-block;
}
.image:hover img{
display:inline-block;
}
.image:hover img.first{
display:none;
}
.image img.deimg{
display:inline-block !important;
}
</style>
2. в том же файле заменить строку
{$wa->shop->productImgHtml($p, '200', ['itemprop' => 'image', 'alt' => $p.name, 'default' => "`$wa_theme_url`img/dummy200.png"])}
на
{if count($images_pr[$p.id]) > 1}
{foreach $images_pr[$p.id] as $v}
<img src="{$v.url_200x0}"{if $v@first} class="first"{/if}>
{if $v@iteration == 2}{break}{/if}
{/foreach}
{else}
{$wa->shop->productImgHtml($p, '200x0', ['itemprop' => 'image', 'alt' => $p.name, 'default' => "`$wa_theme_url`img/dummy200.png", 'class' => 'deimg'])}
{/if}
Всё настроил. Спасибо!
Вы очень оперативно отвечаете, это огромный плюс. Нравится с вами работать :)
Спасибо!
Игорь, нашел ошибку.
У меня изменен код в соответствии с темой : http://wm-site.ru/comfort_buy/180/bystryy-prosmotr...
Когда нажимаю на "Быстрый просмотр" у меня скрыто изображение в соотвествии со стилем display:none;
Как решить эту проблему?
сайт Sumki5.ru
Посмотрите, пожалуйста.
Допишите в пользовательских стилях правило
img#product-image {
display: inline-block;
}
Огромное спасибо!
Игорь, добрый вечер!
при такой замене кода получается так, что если у товара не загружена вообще картинка, то на ее месте ничего не отображается http://c2n.me/3pf5X22 до того момента пока мышкой не наведешь на место, где должно быть фото: http://c2n.me/3pf63Rk
подскажите как поправить?
в блоке кода
{if count($images_pr[$p.id]) > 1}
{foreach $images_pr[$p.id] as $v}
<img src="{$v.url_200x0}"{if $v@first} class="first"{/if}>
{if $v@iteration == 2}{break}{/if}
{/foreach}
{else}
{$wa->shop->productImgHtml($p, '200x0', ['itemprop' => 'image', 'alt' => $p.name, 'default' => "`$wa_theme_url`img/dummy200.png", 'class' => 'deimg'])}
{/if}
строку
<img src="{$v.url_200x0}"{if $v@first} class="first"{/if}>
замените на
<img src="{if !empty($v.url_200x0)}{$v.url_200x0}{else}`$wa_theme_url`img/dummy200.png{/if}"{if $v@first} class="first"{/if}>
Игорь,
не помогло
Вы следовали всем инструкциям? Что собственно не получилось, на каком этапе?
А можно задать задержку смены картинок (в миллисекундах)? А то слишко резво сменяются.
Для данной реализации не сделать, поскольку показ и скрытие реализовано через свойство CSS display, его браузер не умеет анимировать.