• Joomla
• VirtueMart
• php

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

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

 

<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>

 

добавить код, который покажет дополнительные изображения

 

<div class="additional-images">
    <?php
   if (!empty($product->images) and count ($product->images)>1) {
   foreach ($product->images as $image)
    {
        echo '<div class="floatleft">' . $image->displayMediaThumb('class="product-image"', true, 'class="modal"', true, true) . '</div>';
    }
    }
    ?>
</div>

 

Кроме этого нужно настроить максимальное количество изображений, которое будет выводиться (по умолчанию выводится 1 картинка). В файле components/com_virtuemart/views/category/view.html.php меняем 1 на 0(будут показывать все дополнительные изображения) либо на другое число.

 

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

 

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



Чтобы изменить размер нужно добавить новый стиль в файл components/com_virtuemart/assets/css/vmsite-ltr.css

 

.spacer .additional-images img{
width:100px;
}

 

Чтобы вывести дополнительные изображения, например, справа от основного нужно добавить в стиле файла components/com_virtuemart/assets/css/vmsite-ltr.css

 

.browse-view .row .product .spacer img, .related-products-view .row .product .spacer img {
max-width: 90%;
height: auto;
float: left;
}

 

строчку

 

float: left;

 

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

 

<div class="spacer">
<div class="width30 floatleft center">

 

и

 

<div class="width70 floatright">
<h2><?php echo JHTML::link ($product->link, $product->product_name); ?></h2>

 

30 отвечает за ширину блока с изображением, 70 — за блок справа. Я поставил 50 и 50, получилось следующее.

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

Если кто-то знает решение, то был бы признателен за дополнение.

А пока, чтобы скрыть первую повторяющуюся миниатюру можно добавить в components/com_virtuemart/assets/css/vmsite-ltr.css

 

.spacer .additional-images .floatleft:first-child{
display:none;
}

 

Чтобы сделать миниатюры некликабельными нужно заменить

 

echo '<div class="floatleft">' . $image->displayMediaThumb('class="product-image"', true, 'class="modal"', true, true) . '</div>';

 

на

 

echo '<div class="floatleft">' . $image->displayMediaThumb('class="product-image"', false, 'class="modal"', true, true) . '</div>';

 

Надеюсь, что статья поможет сделать ваши магазины чуточку лучше