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

Опубликовано: 5 Октябрь, 2013
Обновлено: 18 Май, 2016
Категория: Внешний вид, дизайн
Комментариев: 51

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

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

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

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

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

дополнительные изображения на странице категории

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

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

строчку

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

и

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

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

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

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

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

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

на

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

51 комментарий

    Андрей

    Прекрасно работает такое решение! Не знаю какую версию и шаблон вы используете, Владимир, но у меня версия 2.0.22с и при клике на миниатюры показывается оригинал а при клике на главное фото осуществляется переход на страницу деталей. При этом описанной подмены главной не происходит вообще никак и нигде.
    В общем то, что и нужно было мне! Кроме разве что одного небольшого недочет, но так реализовано в самом ВМ. Если картинка всего одна к товару, то в миниатюрах она уже не выводится и чтобы посмотреть ее оригинал приходится вначале переходить на страницу деталей и после кликать по ней еще раз.

    Спасибо за ответ и материал!

      admin

      admin

      очень хорошо, что у вас все сразу заработало, я делал на стандартном шаблоне
      пришлите ссылку на ваш сайт, очень интересно посмотреть 🙂

        Андрей

        Отправил. 🙂

          admin

          admin

          спасибо, посмотрел
          вроде все так работает , как вы и хотели 🙂

          у меня видимо проблемы возникли из-за конфликта скриптов...

            Андрей

            Именно! 🙂 Спасибо!

            А со скриптами желательно конечно разобраться, ибо образцовый стенд не будет соответствовать условиям пользователей по умолчанию! 🙂

    D@N

    Спасибо, замечательно работает !

      admin

      admin

      отлично )

    Сириус

    Здравствуйте, подскажите, как сделать подобное в подробной карточке товара? Я имею ввиду поставить доп изображения справа от основной картинки. Если использовать float: left; , то ничего не происходит в карточке товара, лишь на странице категории выравнивается картинка влево. Подскажите если не сложно, сами знаете как приятно получить совет, когда спросить не у кого.

      admin

      admin

      пришлите ссылку на сайт
      без сайта ничего подсказать не смогу

    Сириус

    Сайт пока разрабатывается вот ссылка на товар с доп изображениями http://magazin.aliva.by/kresla-dlya-rukovoditelya/kresla-v-plastike/kreslo-chairman-668-detail

      Антон

      Подскажите, как вы реализовали вопрос по картинкам товара. Вплане, что при клике на маленькие меняется главное, и при клике на главное увеличивается в popup'e?
      А то всю голову сломал, у меня даже когда кликаю на миниатюры, помимо смены главного, открывается и popup.

    Sergei Bus

    Сразу не заработал, пока не поставил значение 0 в

    А автору огромное спасибо!

    Феникс

    Здравствуйте! У меня код отображения категории находится в папках шаблона и выглядит несколько иначе. Когда я копирую туда ваш код, ничего не меняется, подскажите, как осуществить с моими кодом данный пример? Буду очень признателен за ответ!

      admin

      admin

      вы не забыли изменить число в

    Феникс

    поменял, не получается. Временно изъял из шаблона все настройки виртумарта, чтобы посмотреть в нем ли дело. Сделал все в настройках самого ВМ, шаблон уже не влияет, но все равно не получается. Может неправильно в код засунул?

    Феникс

    Феникс

    все-таки включил стандартный шаблон джумлы и увидел что все отображается, правда вертикально и кривовато.... Но, получается что-то в шаблоне все-таки блокирует вывод дополнительного изображения. Учитывая, что я временно вытащил все папки из шаблон/html/com_virtuemart что еще это может быть подскажите пожалуйста?

    Феникс

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

      admin

      admin

      удалил css файл. слишком большой
      без сайта трудно сказать в чем проблема

    Феникс

    может кому понадобится, решение моей проблемы.... шаблон GKMyStore
    Сделал все по инструкции, затем в папке шаблона/html/com_virtuemart/category/default.php повторил там

    затем нашел в папке шаблона/css/vm.css и закомментировал строки:

    Феникс

    кстати) спасибо большое за статью) здорово! Можно мой флуд удалять, чтобы не мешал.

    Феникс

    еще может подскажете как модулю виртумарта сделать фон?

      admin

      admin

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

    Владимир

    Автору респект, большое спасибо=)

    максим

    помогите пожалуйста не выходит у меня изображение справа модники.org.ua

      admin

      admin

      вы хотите поменять местами изображение и блок с информацией (название, цена)?
      если да, то в файле components/com_virtuemart/views/category/tmpl/default.php поменяете местами блоки, начинающиеся с

      и

    Феникс

    Здравствуйте еще раз! = )
    Подскажите, пожалуйста, как миниатюры фотографий расположить справа в карточке товара?

      admin

      admin

      Здравствуйте!
      пришлите ссылку на сайт

    Марик

    Добрый день! Подскажите пожалуйста, в чем может быть проблема на стандартном шаблоне отображает миниатюры все работает. Вот ставлю свой шаблон не работает.

      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

      admin

      Я попробовал vm3 на последней joomla 3.3
      после чистой установки появились какие-то ошибки, поэтому я отложил пока знакомство с vm3 до хотя бы стабильной версии

        Андрей

        Я вас понял! Да там есть ошибки еще, но незначительные как для функционала. Если все-таки доделают все что уже внедрили, то будет резон обновляться. Правда у меня связка J2.5+VM3
        Пока в общем выкрутился сам. Проблема была в наложении свойств.

        Андрей

        Владимир, я так понял вы уже начали работать с 3-й версией ВМ?! Не могли бы подсказать как реализовать правильно вывод доп.изображений? Если быть точнее интересует именно вывод в последней версии 3.0.6. Она таки действительно уже достаточно стабильная и с хорошими улучшениями.
        В принципе вывод реализованный вами работает, но при клике на миниатюры изображение открывается полностью на всю страницу, а не как положено, в отдельном окне с эффектом, как это происходит на странице карточки товара.

          admin

          admin

          Да, с vm3 начал работать, но до этого пока не добрался
          Если найдете решение, то пожалуйста, поделитесь

            Андрей

            А вот для того чтобы не выводилась в миниатюрах главная картинка решение кое-какое сообразил:

            Но вот вывод разработчики явно преобразовали. То ли аргументы функции не те нужны, то ли там что-то посерьезнее нужно менять, чтобы заработало всплывающее окно с изображениями. Решение этой задачи очень горит, но пока с моими знаниями не могу осилить...

    Владимир

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

    есть, а вот внутри

    - нет.

      admin

      admin

      Пришлите ссылку на сайт

        Владимир

        сайт
        test
        test

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

          admin

          admin

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

    Ирина

    Здравствуйте, подскажите, пожалуйста. Сделала все как у вас, все работает, но миниатюры изображений расположены друг под другом в столбик, а не в строчку как у вас. Как сделать, чтобы они тоже выстраивались в строчку

      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

      admin

      Скорее всего, у Вас vm3. В нем код несколько изменен. В этой статье есть пример замены кода в файле /components/com_virtuemart/views/category/view.html.php для разных версия virtuemart.
      Уточните Вашу версия vm, чтобы точно посоветовать по поводу вывода дополнительной картинки в категории.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*
Для вставки кода заключите его в теги [php] [/php]
*