Добавление всплывающих кнопок на изображение товара на странице категорий в virtuemart 2

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

Сегодня будет не совсем обычный пост про virtuemart. Данное решение применимо на любом сайте, где нужно добавить всплывающие элементы при наведении на какой-либо блок.

Уже несколько раз поступали вопросы как на странице категорий при наведении мыши на изображение товара добавить какую-то кнопку или картинку. Это может быть кнопка Купить или Подробнее, или кнопка увеличения изображения.

Чтобы сразу было понятно о чем идет речь можно посмотреть ДЕМО.

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

Все реализовано без применения скриптов. Посмотреть исходный код html и css.

Единственное, чтобы убрать css трансформации до завершения загрузки страницы для тега body был добавлен дополнительный класс .preload и в код страницы вставлен скрипт

Источник решения - http://ruseller.com/lessons.php?id=1436

Не факт что эта проблема с трансформациями объектов до загрузки страницы себя проявит на вашем шаблоне.

Чтобы реализовать то же самое на странице категорий virtuemart в файле /components/com_virtuemart/views/category/tmpl/default.php перед кодом выводящим изображение

вставляем

Чтобы правильно отцентрировать положение кнопки необходимо заранее знать размеры блока с изображением и он должен быть одинаков для всех товаров.

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

в моем примере размеры блока с изображением составили 150*200px и я добавил такие стили в файл /components/com_virtuemart/assets/css/vmsite-ltr.css

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

В итоге при наведении на картинку получилось следующее

всплывающая кнопка

Надеюсь, что эта небольшая статья будет вам полезна 🙂

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

    Алексей

    Здравствуйте, подскажите пожалуйста, что нужно прописать, что бы добавить кнопку "Купить" и при нажатии на нее переходить в корзину. Зараннее спасибо

      Николай

      Вы смогли это реализовать?

    Александр

    Здравствуйте, вопрос не совсмем по теме, но я не знал куда написать.Как называется плагин при помощи которого Вывыводите HTML код в своих статьях.????

      admin

      admin

      Здравствуйте!
      пользуюсь этим плагином
      http://wordpress.org/plugins/syntaxhighlighter/

    Ильдар

    Пробовал сделать кнопку Купить по типу вывода ее в категории товара. Ничего не получилось. В чем секрет?

    noangel

    тоже только что пытаться это реализовать по инструкций, как вставляю код в файл components/com_virtuemart/views/category/tmpl/default.php сразу сайт перестает работать, белый экран,у меня правда этот файл лежит в шаблоне, но суть та же.

    Виктория

    Подскажите, как сделать чтобы при наведении мыши на изображение товара, выводилось другое изображение из имеющихся у этого товара!

      admin

      admin

      Здравствуйте!
      Не сталкивался с такой задачей.
      Если найдете решение, то, пожалуйста, поделитесь

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

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

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