Back Вы здесь: Home Всё о CMS Joomla! Virtuemart Вывод дополнительных изображений к товару на странице категории в virtuemart 2

Вывод дополнительных изображений к товару на странице категории в virtuemart 2

Здравствуйте, дорогие читатели!

Сегодня я расскажу вам как осуществить вывод дополнительных изображений к товару на странице категории в virtuemart 2

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

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

Чтобы реализовать это в 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);

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

Их размер не будет не будет отличаться от размера изображения в карточке товара.

 

51

 

Для того, чтобы изменить размер изображения, необходимо добавить новый стиль в файл 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, получилось следующее.

 

52

 

изображения справа

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

Это было бы хорошо, если бы при клике на миниатюры менялось главное изображение.

Но мне этого реализовать не удалось.

Возникала неприятная проблема — при клике на миниатюры меняется главное изображение у всех товаров на странице, что конечно не очень хорошо :)

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

А пока, чтобы скрыть первую повторяющуюся миниатюру можно добавить в 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>';

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

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


Защитный код
Обновить

Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов
RuCaptcha - заработай на вводе каптч

Заработок в сети