Опубликовано: 1 июля 2015

Просмотр дополнительных изображений товара на странице категории. Есть решение

Здравствуйте!

Можно ли реализовать такую функцию:

1. Посетитель сайта находится в категории товаров, видит список товаров с изображениями, ценами, кнопкой "В КОРЗИНУ".
2. Посетитель сайта наводит курсор мыши на товар. Если у товара фотографий больше 1, то показываются стрелочки влево и вправо, нажав на которые будут перелистываться фотографии.
Например, у товара имеется 3 фотографии. Посетитель жмет на стрелку вправо, слайдером показывается фото №2, еще раз вправо - фото №3, еще раз вправо - фото №1. Если посетитель сайта видит фото №1 и нажимает стрелку влево, то перелистывание идет в другую сторону на фото №3.

Увидел реализацию на этом сайте: http://www.chemodan66.ru/ryukzaki/. Движок очень похож на webasyst.

Комментарии (9)

  • Дмитрий Шматов +1 2 июля 2015 10:50 #

    это движок cs-cart

    2
  • Решение
    Игорь Колмаков +30 2 июля 2015 11:59 #

    Сделать слайдером можно, но инструкция получится слишком обширная

    могу предложить только замену изображения при наведении указателя мыши

    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}

    2
    • Евгений Голов Евгений Голов +1 2 июля 2015 13:40 #

      Всё настроил. Спасибо!
      Вы очень оперативно отвечаете, это огромный плюс. Нравится с вами работать :)

      2
  • Игорь Колмаков +30 2 июля 2015 16:06 #

    Спасибо!

    1
  • Евгений Голов +1 2 июля 2015 16:17 #

    Игорь, нашел ошибку.

    У меня изменен код в соответствии с темой : http://wm-site.ru/comfort_buy/180/bystryy-prosmotr...

    Когда нажимаю на "Быстрый просмотр" у меня скрыто изображение в соотвествии со стилем display:none;

    Как решить эту проблему?

    сайт Sumki5.ru

    1
  • Евгений Голов +1 3 июля 2015 08:34 #

    Посмотрите, пожалуйста.

    1
  • Решение
    Игорь Колмаков +30 3 июля 2015 09:24 #

    Допишите в пользовательских стилях правило

    img#product-image {
    display: inline-block;
    }

    1
  • Евгений Голов +1 3 июля 2015 10:39 #

    Огромное спасибо!

    1
    • Георгий Крупин Георгий Крупин +0 22 октября 2015 20:24 #

      Игорь, добрый вечер!


      при такой замене кода получается так, что если у товара не загружена вообще картинка, то на ее месте ничего не отображается http://c2n.me/3pf5X22 до того момента пока мышкой не наведешь на место, где должно быть фото: http://c2n.me/3pf63Rk


      подскажите как поправить?

      1
      • Игорь Колмаков Игорь Колмаков +30 23 октября 2015 12:48 #

        в блоке кода

        {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}>

        1
  • Георгий Крупин +0 7 февраля 2016 19:52 #

    Игорь,

    не помогло

    1
  • Oleg Astriyskiy +0 1 июня 2016 23:37 #

    А можно задать задержку смены картинок (в миллисекундах)? А то слишко резво сменяются.

    1
    • Для данной реализации не сделать, поскольку показ и скрытие реализовано через свойство CSS display, его браузер не умеет анимировать.

      1

Добавить ответ

Чтобы добавить комментарий, зарегистрируйтесь или войдите

Услуги

Контакты

Дорогие друзья!

К сожалению, Ваш браузер не поддерживает современные технологии используемые на нашем сайте.

Пожалуйста, обновите браузер, скачав его по ссылкам ниже, или обратитесь к системному администратору, обслуживающему Ваш компьютер.

Internet Explorer

от Microsoft

Chrome

от Google

Safari

от Apple

Opera

от Opera Software

Firefox

от Mozilla

Вверх