Смена изображения товара при наведении мыши в категории virtuemart 2

Опубликовано: 13 Октябрь, 2014
Обновлено: 18 Май, 2016
Категория: Внешний вид, дизайн
Комментариев: 39

Данный эффект особенно часто встречается в зарубежных интернет магазинах, а значит совсем скоро будет широко применяться и в рунете. Суть очень проста - при наведении мыши на блок с товаром (в категории) изменяется изображение товара (показывается вторая картинка).

Реализуем данный функционал на стандартном шаблоне virtuemart. На измененных шаблонах суть будет та же, но, возможно, придется чуть больше повозиться.

В Virtuemart->Настройки->Шаблоны установим Товаров в строке - 3. Получим следующее.

default category

Переместим картинку над названием, как в большинстве магазинов. В файле \components\com_virtuemart\views\category\tmpl\default.php заменим классы для блоков с картинкой и остальной информацией о товаре.

на

и

на

Класс .product-info необязателен и приведен только для примера. Можно вообще вывести блок без класса.

В итоге получим:

category image

Теперь изменим код вывода изображения. В том же файле вместо стандартного кода вывода

вставим

По аналогии с выводом всех дополнительных картинок (подробнее в этой статье) в файле \components\com_virtuemart\views\category\view.html.php заменим

на

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

2 картинки в категории

Осталось добавить css стилей, чтобы все было красиво и происходила смена изображений. В файл \components\com_virtuemart\assets\css\vmsite-ltr.css добавим

0.3s - скорость смены картинок. Можно изменить это значение. В итоге получим такой симпатичный эффект (кликните, чтобы посмотреть демо)

demo

 

39 комментариев

    Вячеслав

    Очень интересный эффект. Спасибо за очередную полезную и очень интересную статью

      admin

      admin

      Рад, что статья оказалась полезной )

    Liova

    Когда ждать патча для ШопЛайфа?

      admin

      admin

      В новой версии эта фишка будет
      Через 1-1,5 месяца

    Liova

    И будет рассылка обновления?

      admin

      admin

      Да, конечно

    Александр

    А еще было бы неплохо сделать, чтобы при наведении картинки перелистывались автоматически, например если их больше двух. Можно на jquery сделать

      admin

      admin

      конечно это можно сделать, но на большинстве магазинов работает именно смена одного изображения на другое

    Александр

    Классная штучка. Проверил, все работает. Но есть одно большое НО. У меня на сайте при клике на товар http://masiv.by/mdf-dveri Изображение увеличивается. А при данной "штучке" изображение уже не увеличишь. Для меня это крайне важно, пришлось откатить назад. Может быть есть решение?

      admin

      admin

      решить конечно можно, но только какое изображение показывать при клике - 1-е или 2-е?
      обычно при клике идет переход в карточку товара (в случае применения эффекта смены при наведении)

    Александр

    Мне нужно, чтобы увеличивалось 1 изображение. Вопрос ка это сделать.

      admin

      admin

      напишите код, который выводит у вас изображением с увеличением при клике

    Павел_Б

    Большое спасибо, все действительно хорошо работает. А то, когда у меня заказчик эту фичу попросил на сайт, я думал что придётся плагины докупать или отказаться от клиента...
    Маленькие уточнения: код, который мы заменяем, в указанном вами виде прописан только в новых версиях VM. У меня есть "прошлогодние" файлы, там всё называется чуть по другому, но разобраться можно.
    Файл view.html.php приходится сохранять в сам компонент, а значит при обновлении будет затёрт. Как бы его сохранить в шаблоне, как всё остальное? Кстати, все css стили я прописываю в конце template.css своего шаблона (тоже защита от стирания) а в настройках VM снимаем галочку "Использовать VirtueMart CSS".

      admin

      admin

      Да, приходится вносить часть изменений в ядро, но это даже хаком трудно назвать 🙂
      Придется заменять одну цифру после каждого обновления. Если забудете заменить, но ничего не случится, просто будет выводится одна картинка.
      Как разместить это в шаблон не знаю, скорее всего никак )

      По стилям. Можно просто скопировать файл стилей virtuemart в папку шаблона в папку css и править их там.

    Виталий

    Отличная статья. Очень хотел такой эффект для своих проектов.
    Огромная благодарность автору!

      admin

      admin

      Рад, что статья оказалась полезна

    Александр

    ...А Я считаю, что эта фича не приживется. Пользователю неудобно (особенно новому) зайдя в незнакомый магазин увидеть такую неожиданность желая просто увеличить изо-е товара.

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

    Желающим иметь такую связку у себя в сторе прошу стучаться в аску 215252872.

    Но данному посту респект (за то, что дает возможность представить разнообразие всех возможных вариантов)

    D@N

    Добрый день.
    После применения этого хака перестал срабатывать
    «Переход в карточку товара при клике на его изображение»
    Срабатывает на категориях и товарах, на под категориях не работает подскажите где копать.

    Спасибо

    Валера

    Здравствуйте.
    Есть возможность сделать:
    Два товара. В каждом по несколько дополнительных изображений. В одном надо показывать второе изображение на странице категории, в другом нет.
    Спасибо.

      admin

      admin

      Здравствуйте!
      Автоматически можно сделать только если товары в разных категориях(создать 2 шаблона категорий и только в один вносить изменения из статьи)
      Можно сделать и для одной категории, но придется для каждого товара, у которого не должно показываться дополнительное изображение, прописывать отдельно стили

    Артем

    Спасибо большое! Все работает отлично!
    А Вы не знаете случайно, нет ли способа, чтобы эти картинки менялись автоматически, типа слайдшоу?

      admin

      admin

      Здравствуйте!
      Рад, что статья оказалась полезной.
      Со слайдшоу не сталкивался, но думаю, что это будет слишком для пользователей если все картинки в категории начнут автоматически меняться при заходе на сраницу.

    D@N

    Добрый день.
    Обновил Вирт до 3 перестала работать смена изображений.
    Подскажите пожалуйста в каком направлении копать.
    P.S.Шаблоны использую те же что работали на Вирте 2.

      D@N

      Нашел причину, файл забыл перенести файл view.html.php
      К стати куда его перенести в папке Шаблона Джумлы что бы сохранялось все при обновлении?

        admin

        admin

        Попробуйте поместить в папку /templates/шаблон/html/com_virtuemart/category/
        Но скорее всего (нужно проверить) файл view.html.php не будет работать из папки с шаблоном и придется после каждого обновления вносить изменения.

          DaN

          DaN

          Спасибо, первым делом попробовал положить по пути что вы написали, но не работает. Пока будем переписывать.

    Руслан

    Спасибо за труды.
    Подскажите а как уменьшит расстояние между картинкой и названием товара?
    У меня картинка 120х120, а место вокруг показывает около 250х250
    http://bowlingstock.com/index.php/ua/magazyn/entry-performance

    Руслан

    Спасибо. Уже разобрался сам.
    Может кому нужно будет: Админ-Virtuemart-Настройки-Шаблон в поле ширна и высота слада вписать нужное значение (например 200)

    george007ua

    Доброго времени суток, у меня ситуация немного иная. смена картинки при нажатии уже реализована, но каким образом понять не могу. Устанавливал шаблон не квикстартом, поэтому смена картинки работать не хочет. Скажите, если реализовать вышеописанное решение, не возникнет ли проблем, или, может кто-то сможет подсказать как реализвоано в этом шаблоне. Sj Papa http://demo.smartaddons.com/#sj-papa

      admin

      admin

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

      Так трудно сказать, нужно пробовать.

    Татьяна

    Все сделала, как описали, только путь был дугой, файлы правила в папке шаблона.
    В итоге описание - да, опустилось под фото, а вот 2 картинки так и не добавились. На всякий случай прописала и css, но, как видите http://handmode.ru/store/rasprodaga.html ничего не происходит с картинками, хотя в каждом товаре есть дополнительные фотографии.

      admin

      admin

      Скорее всего не внесены изменения в файл \components\com_virtuemart\views\category\view.html.php

    Дмитрий

    В последний версиях VM чуток код изменился во view.html.php
    Строка 156 меняем
    $productModel->addImages($this->products['0'], $imgAmount );
    на
    $productModel->addImages($this->products['0'], 2 );

      admin

      admin

      Спасибо за дополнение.

    Денис

    Здравствуйте! А как сделать тоже самое в третьем вирте?
    Заранее признателен за ответ!

      admin

      admin

      Здравствуйте!
      Алгоритм тот же, но в рамках комментария трудно подробно ответить.
      Нужно писать отдельную статью.
      Постараюсь выложить в ближайшее время.

        Денис

        Было бы замечательно! Спасибо!

    Micel

    Здравствуйте, в шаблоне категорий тоже интересно смену можно сделать я сделал так:

    Все вроде ок но вот в css уже не прокатывает пропадает при наведении первая картинка а вторая не появляется

      admin

      admin

      Пришлите ссылку на сайт.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*
Для вставки кода заключите его в теги [php] [/php]
*