Привет всем!
Зачастую нам хочется придать шик нашему магазину, и сделать эффект при наведении на изображение товара. На тему “Как изменить изображение товара при наведении в Virtuemart 2” найдется много ответов, но на Virtuemart 3, начиная с версии 3.0.16 меняются переменные и данные способы не работают.

И так начнем улучшение:

Перед началом работ категория выглядит вот так
category
Находим файлик \templates\ваш_шаблон\html\com_virtuemart\sublayouts\ products.php и вот такой код:

<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.$ItemidStr; ?>">
						
						<?php if (!empty($product->images) and count ($product->images)>1)
						
						{
						?>

						<!-- first-img -->
						<div class="image1">
						    <?php
						        echo $product->images[0]->displayMediaThumb('class="browseProductImage-wgik"', false);
						    ?>
						</div>
						<!-- twos-img -->
						<div class="image2">
						    <?php
						        echo $product->images[1]->displayMediaThumb('class="browseProductImage-wgik"', false);
						    ?>
						</div>
						<?php
						}
						
						else {
						        echo $product->images[0]->displayMediaThumb('class="browseProductImage-wgik"', false);
						}
						?>
						
					</a>

Далее идем в файлик \components\com_virtuemart\views\category\ view.html.php и ищем строчку

$imgAmount = VmConfig::get('prodimg_browse',1);

Меняем на

$imgAmount = VmConfig::get('prodimg_browse',2);

После наших манипуляций мы увидим вот такую картину
category2
Далее немножко поработаем с CSS, добавим вот такой код

 
.browse-view .product .spacer .product-image {
height: auto;
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 300ms linear;
}
.browse-view .product .spacer:hover .image1 {
opacity: 0;
transition: opacity 300ms linear;
}
.image2 {
position: absolute;
top: 20px;
left: 20px;
width: 100%;
padding-right: 40px;
opacity: 0;
box-sizing: border-box;
transition: opacity 300ms linear;
    -webkit-transition: opacity 300ms linear;
}
.browse-view .product .spacer:hover .image2 {
opacity: 1;
transition: opacity 300ms linear;
    -webkit-transition: opacity 300ms linear;
}

Ну вот и финал – что должно получиться
category3

2 Responses to “Смена изображения товара при наведении в Virtuemart 3”

  1. george007ua, Ответить

    Спасибо за статью, помогла в работе, но есть ряд неточностей (VirtueMart 3.0.9). Файл для вставки стилей: www\вашсайт\components\com_virtuemart\assets\css
    В стилях вместо .product надо ставить .vmproduct, после чего css код выглядит следующим образом:
    .browse-view .vmproduct .spacer .product-image {
    height: auto;
    text-align: center;
    position: relative;
    box-sizing: border-box;
    }
    .browse-view .row .vmproduct .spacer img{
    max-width: 100%;
    max-height: 100%;
    }
    .image1 {
    opacity: 1;
    box-sizing: border-box;
    transition: opacity 300ms linear;
    }
    .browse-view .vmproduct .spacer:hover .image1 {
    opacity: 0;
    transition: opacity 300ms linear;
    }
    .image2 {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 100%;
    padding-right: 40px;
    opacity: 0;
    box-sizing: border-box;
    transition: opacity 300ms linear;
    -webkit-transition: opacity 300ms linear;
    }
    .browse-view .vmproduct .spacer:hover .image2 {
    opacity: 1;
    transition: opacity 300ms linear;
    -webkit-transition: opacity 300ms linear;
    }
    После внесения вышеуказанных изменений все заработало

  2. george007ua, Ответить

    Эх… еще бы эту фишку добавить в модуль сопутствующих товаров и в модули 10 лучших товаров и так далее… МОжет есть решение… буду просто счаслив

Оставить ответ