Довольно часто в интернет-магазинах можно встретить, что на странице категории кроме главного выводится и несколько дополнительных изображений товара. Это позволяет покупателю получить больше информации о товаре не заходя на его страницу.
Чтобы реализовать это в virtuemart 2 нужно в файле 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 6 7 8 9 10 |
<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(будут показывать все дополнительные изображения) либо на другое число.
|
1 |
$productModel->addImages($products,1); |
В итоге рядом с каждой картинкой товара на странице категорий будут показаны несколько дополнительных изображений. Их размер будет точно такой же как и в карточке товара.
Чтобы изменить размер нужно добавить новый стиль в файл components/com_virtuemart/assets/css/vmsite-ltr.css
|
1 2 3 |
.spacer .additional-images img{ width:100px; } |
Чтобы вывести дополнительные изображения, например, справа от основного нужно добавить в стиле файла components/com_virtuemart/assets/css/vmsite-ltr.css
|
1 2 3 4 5 |
.browse-view .row .product .spacer img, .related-products-view .row .product .spacer img { max-width: 90%; height: auto; float: left; } |
строчку
|
1 |
float: left; |
Кроме этого может понадобится увеличить область для вывода изображений. Для этого нужно изменить соотношения, которые отвечают за вывод картинки и блока с названием и ценой справа от нее. Для этого в файле components/com_virtuemart/views/category/tmpl/default.php можно поэкспериментировать над значениями с строках
|
1 2 |
<div class="spacer"> <div class="width30 floatleft center"> |
и
|
1 2 |
<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
|
1 2 3 |
.spacer .additional-images .floatleft:first-child{ display:none; } |
Чтобы сделать миниатюры некликабельными нужно заменить
|
1 |
echo '<div class="floatleft">' . $image->displayMediaThumb('class="product-image"', true, 'class="modal"', true, true) . '</div>'; |
на
|
1 |
echo '<div class="floatleft">' . $image->displayMediaThumb('class="product-image"', false, 'class="modal"', true, true) . '</div>'; |
Надеюсь, что статья поможет сделать ваши магазины чуточку лучше 🙂
Андрей
Прекрасно работает такое решение! Не знаю какую версию и шаблон вы используете, Владимир, но у меня версия 2.0.22с и при клике на миниатюры показывается оригинал а при клике на главное фото осуществляется переход на страницу деталей. При этом описанной подмены главной не происходит вообще никак и нигде.
В общем то, что и нужно было мне! Кроме разве что одного небольшого недочет, но так реализовано в самом ВМ. Если картинка всего одна к товару, то в миниатюрах она уже не выводится и чтобы посмотреть ее оригинал приходится вначале переходить на страницу деталей и после кликать по ней еще раз.
Спасибо за ответ и материал!
admin
очень хорошо, что у вас все сразу заработало, я делал на стандартном шаблоне
пришлите ссылку на ваш сайт, очень интересно посмотреть 🙂
Андрей
Отправил. 🙂
admin
спасибо, посмотрел
вроде все так работает , как вы и хотели 🙂
у меня видимо проблемы возникли из-за конфликта скриптов...
Андрей
Именно! 🙂 Спасибо!
А со скриптами желательно конечно разобраться, ибо образцовый стенд не будет соответствовать условиям пользователей по умолчанию! 🙂
D@N
Спасибо, замечательно работает !
admin
отлично )
Сириус
Здравствуйте, подскажите, как сделать подобное в подробной карточке товара? Я имею ввиду поставить доп изображения справа от основной картинки. Если использовать float: left; , то ничего не происходит в карточке товара, лишь на странице категории выравнивается картинка влево. Подскажите если не сложно, сами знаете как приятно получить совет, когда спросить не у кого.
admin
пришлите ссылку на сайт
без сайта ничего подсказать не смогу
Сириус
Сайт пока разрабатывается вот ссылка на товар с доп изображениями http://magazin.aliva.by/kresla-dlya-rukovoditelya/kresla-v-plastike/kreslo-chairman-668-detail
Антон
Подскажите, как вы реализовали вопрос по картинкам товара. Вплане, что при клике на маленькие меняется главное, и при клике на главное увеличивается в popup'e?
А то всю голову сломал, у меня даже когда кликаю на миниатюры, помимо смены главного, открывается и popup.
Sergei Bus
Сразу не заработал, пока не поставил значение 0 в
А автору огромное спасибо!
Феникс
Здравствуйте! У меня код отображения категории находится в папках шаблона и выглядит несколько иначе. Когда я копирую туда ваш код, ничего не меняется, подскажите, как осуществить с моими кодом данный пример? Буду очень признателен за ответ!
admin
вы не забыли изменить число в
Феникс
поменял, не получается. Временно изъял из шаблона все настройки виртумарта, чтобы посмотреть в нем ли дело. Сделал все в настройках самого ВМ, шаблон уже не влияет, но все равно не получается. Может неправильно в код засунул?
Феникс
Феникс
все-таки включил стандартный шаблон джумлы и увидел что все отображается, правда вертикально и кривовато.... Но, получается что-то в шаблоне все-таки блокирует вывод дополнительного изображения. Учитывая, что я временно вытащил все папки из шаблон/html/com_virtuemart что еще это может быть подскажите пожалуйста?
Феникс
извините за флуд, методом тыка, выяснил что файл находится в CSS, если посмотрите и скажете что именно не дает выводить мне миниатюрки дополнительных картинок, буду посылать вам лучи добра через нашу вселенную.
admin
удалил css файл. слишком большой
без сайта трудно сказать в чем проблема
Феникс
может кому понадобится, решение моей проблемы.... шаблон GKMyStore
Сделал все по инструкции, затем в папке шаблона/html/com_virtuemart/category/default.php повторил там
затем нашел в папке шаблона/css/vm.css и закомментировал строки:
Феникс
кстати) спасибо большое за статью) здорово! Можно мой флуд удалять, чтобы не мешал.
Феникс
еще может подскажете как модулю виртумарта сделать фон?
admin
нужно смотреть в коде какой класс присвоен данному модулю и для него как обычно задавать фоновый цвет
Владимир
Автору респект, большое спасибо=)
максим
помогите пожалуйста не выходит у меня изображение справа модники.org.ua
admin
вы хотите поменять местами изображение и блок с информацией (название, цена)?
если да, то в файле components/com_virtuemart/views/category/tmpl/default.php поменяете местами блоки, начинающиеся с
и
Феникс
Здравствуйте еще раз! = )
Подскажите, пожалуйста, как миниатюры фотографий расположить справа в карточке товара?
admin
Здравствуйте!
пришлите ссылку на сайт
Марик
Добрый день! Подскажите пожалуйста, в чем может быть проблема на стандартном шаблоне отображает миниатюры все работает. Вот ставлю свой шаблон не работает.
admin
возможно в папке с шаблоном дублируются файлы virtuemart
templates/ваш_шаблон/html/com_virtuemart
если дублируются, то нужно править файлы там
Феникс
подскажите, хочу логотип вставить вверху сайта, по средине. Не могу найти где файл с хэдом, чтобы прописать это =( ....
Андрей
Вечер добрый. Вы уже раз помогли мне спасибо еще раз. Теперь задача такова - вывожу по одному товару в строку, а у меня с вышеперечисленными настройками получается гиганские картинки под основной которые в глухую не хотят меняться - подскажите пожалуйста решение этой дилеммы, адрес сайта точнее страницы где эксперементирую http://www.furnituraa.com/katalog-tovarov/mebelnye-tkani/iskusstvennaya-kozha.html уже все перепробовал и классы менял и перемещал код.
Владимир
Всем доброго времени суток.
Подскажите пожалуйста.... Можно ли сделать вывод посредством "Карусели"
По умолчанию стоит 3 изображения для просмотра, хотелось бы что-бы покупатели могли просматривать и остальные виды.... Так как количество изображений может превышать за десяток.
Вот пример: http://suvenir.od.ua/it-magazin/suveniry/suveniry-iz-dereva
Александр
Связка
joomla 2,5
System - StarLite Pretty Photo
задачка: вывести доп. изображения товара в категории в окне StarLite Pretty Photo (с навигецией и др. функциями)
вывожу таким кодом:
Есть проблемка.
При открытии доп. картинки в окне prettyPhoto в навигации отображаются все картинки этой категории (всех товаров а не одного товара)
Помогите решить задачку
Александр
в 4ре часа ночи ответил сам себе :
строчку
меняем на
Ларчик просто открывался )
Андрей
Владимир, опять нуждаюсь в вашей помощи. Очень бы просил вас по возможности подсказать как организовать вывод доп.фото для версии VM 3. Вывести-то я вывел их, а вот задать размер и выстроить их нормально не могу. Накладывается блок картинок и блок описания. Размеры отдельно доп.фот не меняются и создание нового стиля не помогает. Разработчики несколько изменили вывод и отображение товаров в категории. Не могу понять пока что к чему там. Хотя некоторые вещи как раз упростили, к примеру, добавив возможность покупки товара прямо из категории, то что раньше приходилось делать самостоятельно по вашим материалам.
admin
Я попробовал vm3 на последней joomla 3.3
после чистой установки появились какие-то ошибки, поэтому я отложил пока знакомство с vm3 до хотя бы стабильной версии
Андрей
Я вас понял! Да там есть ошибки еще, но незначительные как для функционала. Если все-таки доделают все что уже внедрили, то будет резон обновляться. Правда у меня связка J2.5+VM3
Пока в общем выкрутился сам. Проблема была в наложении свойств.
Андрей
Владимир, я так понял вы уже начали работать с 3-й версией ВМ?! Не могли бы подсказать как реализовать правильно вывод доп.изображений? Если быть точнее интересует именно вывод в последней версии 3.0.6. Она таки действительно уже достаточно стабильная и с хорошими улучшениями.
В принципе вывод реализованный вами работает, но при клике на миниатюры изображение открывается полностью на всю страницу, а не как положено, в отдельном окне с эффектом, как это происходит на странице карточки товара.
admin
Да, с vm3 начал работать, но до этого пока не добрался
Если найдете решение, то пожалуйста, поделитесь
Андрей
А вот для того чтобы не выводилась в миниатюрах главная картинка решение кое-какое сообразил:
Но вот вывод разработчики явно преобразовали. То ли аргументы функции не те нужны, то ли там что-то посерьезнее нужно менять, чтобы заработало всплывающее окно с изображениями. Решение этой задачи очень горит, но пока с моими знаниями не могу осилить...
Владимир
В категории работает без проблем, но вот у меня еще установлен компонент фильтра Custom Filters, так вот когда при выборе фильтра мини-изображений нет, т.е.
есть, а вот внутри
- нет.
admin
Пришлите ссылку на сайт
Владимир
сайт
test
test
Можно еще сразу вопрос в эту же тему?
А можно как-то организовать, чтобы в категории не было миниатюр, т.е. была одна фотка (она сейчас основная) и нажимая на нее открывается оригинал (сейчас оно так и есть) только плюс чтобы сразу можно было стрелочками посмотреть все фото которые есть в товаре (в общем как в карточке товара, только без вывода всех доп.изображений рядом)?
admin
Видимо при аякс обновлении не учитываются доп. фото, поэтому их не видно.
Как поправить, к сожалению, не знаю, нужно консультироваться с разработчиком модуля.
По выводу всех картинок в категории планирую написать статью, пока точного ответа подсказать не могу.
Ирина
Здравствуйте, подскажите, пожалуйста. Сделала все как у вас, все работает, но миниатюры изображений расположены друг под другом в столбик, а не в строчку как у вас. Как сделать, чтобы они тоже выстраивались в строчку
admin
Здравствуйте!
Пришлите ссылку на страницу с изображениями в категории.
Андрей
Добрый день, решил попробовать создать товар, и присвоить ему изображение, поместил в папку C:\WebServers\home\odetta\www\images\stories\virtuemart\product
Но оно не отображается в компоненте Virtuemart в панели управления. Пробовал картинки разных размеров...Пробовал внизу нажимать "загрузить" выбираю изображение, жму сохранить вылетает 500 ошибка.
В чем может быть проблема? virtuemart 3 joomla 3.4.5
P.S. Стандартные картинки отображаются
Андрей
всё, решил. Нужно было нажать кнопку синхронизация в панели управления
IvanYur
Такой вопрос. Захожу по этому адресу components/com_virtuemart/views/category/tmpl/default.php открываю файл а там нет такой графы как вы указали это во первых.
Во вторых когда захожу в файл view.html. у меня там такой код:
$this->products[$o] = $productModel->getProductListing($o, $this->perRow * $menu->query[$o.'_rows']);
$productModel->addImages($this->products[$o],$imgAmount);
}
}
$this->vmPagination = '';
$this->orderByList = '';
if($this->showproducts){
if (vRequest::getInt('dynamic',false)) {
$id = vRequest::getInt('virtuemart_product_id',false);
$p = $productModel->getProduct ($id);
$pa = array();
$pa[] = $p;
$this->products['0'][] = $p;
} else {
// Load the products in the given category
$ids = $productModel->sortSearchListQuery (TRUE, $this->categoryId);
$this->vmPagination = $productModel->getPagination($this->perRow);
$this->orderByList = $productModel->getOrderByList($this->categoryId);
$this->products['0'] = $productModel->getProducts ($ids);
}
$productModel->addImages($this->products['0'], $imgAmount );
}
когда изменю цифры сайт перестает работать, можете подсказать что здесь можно сделать, чтобы заработало
admin
Скорее всего, у Вас vm3. В нем код несколько изменен. В этой статье есть пример замены кода в файле /components/com_virtuemart/views/category/view.html.php для разных версия virtuemart.
Уточните Вашу версия vm, чтобы точно посоветовать по поводу вывода дополнительной картинки в категории.
Артур
Добрый день! Подскажите в чём может быть проблема, раньше дополнительные изображения на странице товара располагались горизонтально, теперь стали отображаться вертикально со скролом, что не очень красиво и удобно. Как решить эту проблему, чтоб доп. изображения отображались ниже основного фото горизонтально. Заранее благодарю за помощь!
http://s020.radikal.ru/i707/1703/41/6297d8f76466.jpg
admin
Здравствуйте!
Видимо, повлияли какие-то изменения внесенные в css на сайте. Пришлите ссылку на сайт, без этого трудно что-то конкретное посоветовать.
Артур
ссылка на сайт opticworld.com.ua
admin
Попробуйте добавить эти стили
big
Здравствуйте.
Применить к VirtueMart3 не получается.
Если есть возможность дополните статью - просто подскажите где делаю неправильно.
Данный Вами код вставляю в:
\templates\protostar\html\com_virtuemart\products
и меняю значение в:
\components\com_virtuemart\views\category\view.html
$catImgAmount = VmConfig::get('catimg_browse',0);
уже должно что то поменяться - но изменений нет.
admin
Здравствуйте!
В /components/com_virtuemart/views/category/view.html.php нужно заменять значения в строке
big
Спасибо за Участите!
Всё получилось, но у сожалению не решает моей проблемы, как и не решает Ваша, бесспорно полезная статья "Вывод дочерних товаров в категории virtuemart"
Подскажите решение - Товар имеет несколько расцветок и каждый цвет имеет несколько размеров. Показать в категории, что данный товар имеет несколько цветов. В товаре где задействован мультивариант.
admin
Да, с мультивариантом не получится вывести именно конкретные цвета.
Готового решения не могу предложить, пожалуйста, обратитесь на фриланс.