Слайдер сопутствующих (похожих) товаров в VirtueMart

Опубликовано: 30 Июль, 2019
Обновлено: 31 Июль, 2019
Категория: Внешний вид, дизайн, Настройка VirtueMart
Комментариев: 18

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

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

Первым делом изменим шаблон вывода сопутствующих. Он находится в файле /components/com_virtuemart/sublayouts/related.php. Чтобы все правки сохранились при обновлении, нужно переопределить его в папке с шаблоном сайта /templates/имя_шаблона/html/com_virtuemart/sublayouts/.

Скачать related.php

Далее изменим код, который подключает похожие в карточке товара /components/com_virtuemart/views/productdetails/tmpl/default.php.

Чтобы правки сохранились, этот файл также нужно переопределить в шаблоне сайта в папке /templates/имя_шаблона/html/com_virtuemart/productdetails/. Код для замены

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

Скачаем скрипт карусели и скопируем папку slick из архива в папку с шаблоном сайта.

Если на сайте уже подключен скрипт slick (данный скрипт используется в VM Zoomer и VM LikeSlider), то можно удалить код подключения для похожих товаров.

Для стилизации в файл стилей шаблона добавим

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

Изменить количество товаров в карусели на разных устройствах можно в параметре

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

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

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

18 комментариев

    Alex-Kurgan

    Здравствуйте, очень полезный слайдер, вопрос у меня будет чуть выходить за рамки Вашего слайдера, но возможно у Вас есть решение:
    В VM неудобно и очень трудоемко выбирать для каждого товара другие сопутствующие товары. Я понимаю, что можно выбирать сопутствующие категории, но это не то.

    Можно ли как-то автоматизировать вывод сопутствующих товаров из текущей категории товара.
    Т.е. выводить в слайдер случайные товары для любого товара, НО только из той же категории просматриваемого товара. Или даже выводить не случайные, а рекомендованные товары, но только из той же категории, что и текущая карточка товара.

      admin

      admin

      Здравствуйте!

      Для автоматического вывода карусели товаров из той же категории можно использовать модуль VM LikeSlider.

        Aleksandr-K

        Уже пользовался данным модулем в приобретенном Вашем шаблоне, хорошее решение (и шаблонами Вашими доволен), но получается как бы "полуавтомат".
        Можно применять данное решение когда категорий не много.
        Потратить время на ручное добавление всех категорий VM в Меню. Далее для каждой категории создать свой слайдер-модуль. Далее для каждого пункта меню выбрать отображение именно того слайдер-модуля с выбранной соответствующей категорией...
        Но когда категорий очень много и постоянно добавляются новые, хочется использовать автоматическое решение, которого явно не хватает в VM.

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

          admin

          admin

          Попробуйте настройки модуля, как на прикрепленном скрине

            Aleksandr-K

            Да, эти настройки - то, что нужно, фильтр по категориям - вещь!
            Осталось только понять как отображать данный модуль-слайдер только в карточках товаров (т.е. не отображать в категориях).
            Или лучше задать вопрос в ветке по шаблону (т.к. нужно для Вашего шаблона TrendShop)?
            Хочу выводить данный плагин-слайдер в карточке товара после вкладок с описанием товара, но до блока "ВЫ СМОТРЕЛИ".

            admin

            admin

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

            mik007

            А как сделать чтобы при выводе всех товаров из той же категории не выводился текущий товар ?

            admin

            admin

            Данные выводятся с помощью модуля?

            mik007

            Да, с настройками как на скрине выше.

            admin

            admin

            Попробуйте в шаблоне вывода товаров /modules/mod_virtuemart_product/tmpl/default.php после

            добавить

          mik007

          Отлично, спасибо !

            admin

            admin

            Рад, что проблема решилась.

    Aleksandr-K

    Возможно доработать VM LikeSlider, чтобы там можно было выбрать опцию - "вывод из текущей категории". Чтобы в карточке товара при просмотре данного модуля автоматически определялась текущая категория просматриваемого товара и выводила товары из данной категории, тогда VM LikeSlider был бы Золотым )

    Staffbsa

    Владимир а эти сопутствующие товары выводятся в карточке товара в табе например или при нажатии кнопки купить во всплывающем окне ?

      admin

      admin

      Если активная опция Показывать сопутствующие товары во всплывающем окне в Virtuemart > Настройки > Оформление заказа, то сопутствующие выводятся во всплывающем окне.
      Чтобы карусель активировалась и во всплывающем окне скрипт инициализации нужно добавить в конец файла /components/com_virtuemart/views/cart/tmpl/padded.php, либо в переопределенный файл в шаблоне.

    Дмитрий

    Добрый день, подскажите, а в плагине VM Custom возможно так-же вывести товары в слайдре?

      admin

      admin

      Здравствуйте!

      В плагине слайдера нет, но можно доработать. Если нужно, то напишите на admin@virtuemart.su

    inst54ru

    inst54ru

    спасибо!

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

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

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

С 15-18 июня admin в отпуске.

Ответы на все вопросы и ссылки на товары будут присланы 19 июня.

Спасибо за понимание и хороших выходных.

×