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

Опубликовано: 13 октября, 2014

Обновлено: 5 февраля, 2023

Категория: Внешний вид, дизайн

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

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

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

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

1	<div class="width30 floatleft center">

на

1	<div class="product-image">

1	<div class="width70 floatright">

на

1	<div class="product-info">

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

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

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

<a title="<?php echo $product->product_name ?>" href="<?php echo $product->link; ?>">

<?php

echo $product->images[0]->displayMediaThumb('class="browseProductImage"', false);

</a>

вставим

<a title="<?php echo $product->product_name ?>" href="<?php echo $product->link; ?>">

<?php if (!empty($product->images) and count ($product->images)>1)

// Если есть, то выводим 2 блока с изображениями

{

<?php

echo $product->images[0]->displayMediaThumb('class="browseProductImage"', false);

</div>

<?php

echo $product->images[1]->displayMediaThumb('class="browseProductImage"', false);

</div>

<?php

}

// Если дополнительных изображений нет, то выводим одно изображение

else {

echo $product->images[0]->displayMediaThumb('class="browseProductImage"', false);

}

</a>

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

1	$productModel->addImages($products,1);

на

1	$productModel->addImages($products,2);

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

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

.browse-view .product .spacer .product-image {

height: 250px;

padding: 20px;

text-align: center;

position: relative;

box-sizing: border-box;

}

.browse-view .row .product .spacer img{

max-width: 100%;

max-height: 100%;

}

.image1 {

opacity: 1;

box-sizing: border-box;

transition: opacity 0.3s ease-out 0;

}

.browse-view .product .spacer:hover .image1 {

opacity: 0;

transition: opacity 0.3s ease-out 0;

}

.image2 {

position: absolute;

top: 20px;

left: 20px;

width: 100%;

padding-right: 40px;

opacity: 0;

box-sizing: border-box;

transition: opacity 0.3s ease-out 0;

}

.browse-view .product .spacer:hover .image2 {

opacity: 1;

transition: opacity 0.3s ease-out 0;

}

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

Вячеслав

13 октября, 2014 at 18:27

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

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

Похожие статьи :

44 комментария

Liova

Liova

Александр

Виталий

Александр

Артем

george007ua

Дмитрий

Денис

Денис

Micel

PRammer

sprosikuda

yuri