Сегодня будет не совсем обычный пост про virtuemart. Данное решение применимо на любом сайте, где нужно добавить всплывающие элементы при наведении на какой-либо блок.
Уже несколько раз поступали вопросы как на странице категорий при наведении мыши на изображение товара добавить какую-то кнопку или картинку. Это может быть кнопка Купить или Подробнее, или кнопка увеличения изображения.
Чтобы сразу было понятно о чем идет речь можно посмотреть ДЕМО.
В данном примере при наведении на картинку плавно появляются 2 кнопки и слегка затемняется основное изображение.
Все реализовано без применения скриптов. Посмотреть исходный код html и css.
Единственное, чтобы убрать css трансформации до завершения загрузки страницы для тега body был добавлен дополнительный класс .preload и в код страницы вставлен скрипт
|
1 2 3 |
$("window").load(function() { $("body").removeClass("preload"); }); |
Источник решения - http://ruseller.com/lessons.php?id=1436
Не факт что эта проблема с трансформациями объектов до загрузки страницы себя проявит на вашем шаблоне.
Чтобы реализовать то же самое на странице категорий virtuemart в файле /components/com_virtuemart/views/category/tmpl/default.php перед кодом выводящим изображение
|
1 2 3 4 5 |
<a title="<?php echo $product->product_name ?>" rel="vm-additional-images" href="<?php echo $product->link; ?>"> <?php echo $product->images[0]->displayMediaThumb('class="browseProductImage"', false); ?> </a> |
вставляем
|
1 2 3 4 5 |
<div class="overlay"> <div class="knopki"> <a href="#" class="icon-productdetails">Подробнее</a> </div> </div> |
Чтобы правильно отцентрировать положение кнопки необходимо заранее знать размеры блока с изображением и он должен быть одинаков для всех товаров.
Обычно по ширине все изображения выравниваются по центру и ширина всех блоков одинакова, поэтому нужно только ограничить максимальную высоту изображения через стиль
|
1 2 3 |
.browse-view .row .product .spacer img{ max-height:150px; } |
в моем примере размеры блока с изображением составили 150*200px и я добавил такие стили в файл /components/com_virtuemart/assets/css/vmsite-ltr.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
.overlay{ position:absolute; width: 200px; height: 150px; transition: background 1000ms; } .knopki{ position:absolute; text-align: center; top: 50%; left: 50%; width: 116px; margin: -15px 0 0 -58px; opacity: 0; transition: opacity 1000ms; } .overlay:hover .knopki{ opacity: 1; } .overlay:hover{ background: rgba(0, 0, 0, 0.3) } .knopki a{ display:block; color:#333; background:#f5f5f5; border:1px solid #ccc; border-radius:3px; padding:3px 7px; margin-bottom: 5px; width: 100px; } .knopki a:hover{ background:#dadada; } |
Кнопка Подробнее взята просто для примера, на ее месте может быть все, что угодно.
В итоге при наведении на картинку получилось следующее
Надеюсь, что эта небольшая статья будет вам полезна 🙂
Похожие статьи :
- Мультизагрузка изображений товара в virtuemart 3, 2
- Смена изображения товара при наведении мыши в категории virtuemart 2
- Вывод дополнительных изображений товара на странице категории в virtuemart 2
- Настраиваем страницу категорий(витрину товаров) в virtuemart 2
- Вывод настраиваемых полей на странице категории virtuemart 2
Алексей
Здравствуйте, подскажите пожалуйста, что нужно прописать, что бы добавить кнопку "Купить" и при нажатии на нее переходить в корзину. Зараннее спасибо
Николай
Вы смогли это реализовать?
Александр
Здравствуйте, вопрос не совсмем по теме, но я не знал куда написать.Как называется плагин при помощи которого Вывыводите HTML код в своих статьях.????
admin
Здравствуйте!
пользуюсь этим плагином
http://wordpress.org/plugins/syntaxhighlighter/
Ильдар
Пробовал сделать кнопку Купить по типу вывода ее в категории товара. Ничего не получилось. В чем секрет?
noangel
тоже только что пытаться это реализовать по инструкций, как вставляю код в файл components/com_virtuemart/views/category/tmpl/default.php сразу сайт перестает работать, белый экран,у меня правда этот файл лежит в шаблоне, но суть та же.
Виктория
Подскажите, как сделать чтобы при наведении мыши на изображение товара, выводилось другое изображение из имеющихся у этого товара!
admin
Здравствуйте!
Не сталкивался с такой задачей.
Если найдете решение, то, пожалуйста, поделитесь