Оценок: 8
Product Tab&Carousel для опенкарт 2.x и 3.x

Product Tab&Carousel для опенкарт 2.x и 3.x

Этот модуль был создан на основе ранее опубликованного модуля "Карусель рекомендуемых товаров". В отличие от первой версии, здесь можно выводить товары в нескольких вкладках, для каждой из вкладок можно вывести не только выбранные товары, но еще и:

  • Товары из категории
  • Акционные товары
  • Последние добавленные
  • Самые просматриваемые

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

Настройки модуля в панели управления

Для вывода названия вкладки в заголовке используется следующая конструкция: "//номер_вкладки/". Изначально, после установки будет 2 вкладки, одну можно удалить и вывести просто карусель с товарами, а можно добавить новые.

В результате, на сайте, это будет выглядеть так:

Настройки модуля в панели управления

В комплекте с модулем идут CSS и JS файлы, найти их можно по пути: "catalog/view/javascript/jquery/" - httpmprodtc.css и httpmprodtc.js

Их содержимое рекомендую перенести в другие используемые сайтом файлы, к примеру для стандартной темы это будут /catalog/view/javascript/common.js и /catalog/view/theme/default/stylesheet/stylesheet.css

Отображение статуса (наличия)

В модуле есть возможность так же вывести наличие товара, добавлял при разработке одного сайта, да забыл убрать из публикуемой версии (в стандартном варианте в блоках с превью товаров это не отображается). Если нужно вывести, сделать это можно следующим образом - в нужном месте в шаблоне модуля httpmprodtc.tpl гужно добавить один из следующих вариантов кода:

<span class="status<?php if ($product['quantity'] > 0) { echo ' ok'; } ?>"><i class="fa fa-check-square"></i></span>

В этом варианте будет показана иконка с, или без класса "ok", в зависимости от наличия данного класса можно в CSS настроить вид иконки, например так:

.status {font-size: 20px;line-height: 35px;}
.status.ok {color: #25b567;}

Или так:

<span class="status<?php if ($product['quantity'] > 0) { echo ' ok'; } ?>"><?php echo $product['stock']; ?></span>

В таком варианте будет показан статус наличия (текст)

Количество одновременно показываемых товаров для мобильных

Только для Opencart 2.x - Owl Carousel

В этой части речь пойдет о настройке Owl Carousel, для отображения нужного количества товаров в мобильной версии.

В шаблоне /catalog/view/theme/default/template/extension/module/httpmprodtc.tpl, в самом низу есть скрипт вызова Owl Carousel:

$('#prodcarousel<?php echo $tab['module']; ?>-<?php echo $tab['id']; ?>').owlCarousel({
items: <?php echo $items; ?>,
autoPlay: 5000,
navigation: true,
navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
pagination: false
});

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

В нашем случае поможет такой код, который нужно добавить после pagination: false, (не забываем здесь запятую)

.....
pagination: false,
responsive : true,
itemsDesktop : [1200, <?php echo $items; ?>],
itemsDesktopSmall : [992, 3],
itemsTablet : [768, 3],
itemsTabletSmall : [620, 2],
itemsMobile : [400, 1],

Здесь в квадратных скобках указываем: [ширина окна, количество товаров]

Только для Opencart 3.x - Swiper

.....
	breakpoints: {
    // when window width is >= 320px
    320: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    // when window width is >= 480px
    480: {
      slidesPerView: 3,
      spaceBetween: 30
    },
    // when window width is >= 640px
    640: {
      slidesPerView: 4,
      spaceBetween: 40
    }
  }
......

Скачать модуль:

Версия под Opencart 2.3 Версия под Opencart 2.1 (2.x<2.3) Версия под Opencart 3

В ближайшее время описание будет дополнено, в модуле пока могут быть небольшие ошибки.. Что нашел во время подготовки к публикации - исправил, но так как модуль уже полгода был в ожидании, в практически готовом виде, выложить решил сегодня, как есть (все не так уж страшно)

Оценок: 8
Хостинг облачных VDS/VPS серверов
  • Свои ISO образы
  • VDS с оплатой раз и навсегда
  • Аренда VDS на любой срок, с оплатой по дням
  • Большое разнообразие конфигураций
  • Дата-центры в ЕС и России
+ скидка 10%

Комментарии (185)

  1. Здравствуйте, возможна ли адаптация модуля под конкретный шаблон с небольшой доработкой? На платной основе естественно.

    Евгений 02 ноября 2022, 08:39 0
    • Здравствуйте. А сколько будет стоить допилить возможность отображать в слайдере последние продажи на основе этого слайдера?

      Иван 12 октября 2022, 11:08 0
      • оставил модуль на версию 2.3. Не добавляются табы. Зеленая кнопка добавления таба не нажимается, в текущие 2 таба не добавляются товары
        joxi.ru/brRL683sY8jvQ2 Плиз, хелп, в чем может быть проблема?

        Vladimir 26 сентября 2022, 13:41 0
        • Странно, такого ещё не было. А выбор товаров в других модулях нормально работает? Могу посмотреть, но нужен доступ. Напишите на vl@onenv.ru если нужно

          Владимир 27 сентября 2022, 20:22 0
        • В автоматическом режиме слайдер работает только на начальной вкладке. При переходе на вторую вкладку перестает работать совсем. В ручном режиме работает нормально во всех вкладках. OpenCart 3.0.3.2

          Влад 15 сентября 2022, 13:36 0
          • Посмотрел, действительно. Пока рекомендую убрать автопрокрутку

            Показать код
            autoPlay: false,
            Будут работать кнопки.

            Владимир 15 сентября 2022, 15:43 0
          • Добрый день! Установил модуль на OC 3.0.38. Все работает, кроме автоматического слайдера.
            Почему не работает не пойму, вроде весь код на месте

            Показать код
            <div class="swiper-pager">
              <div class="swiper-button-next sbn-{{ tab.module }}-{{ tab.id }}"></div>
              <div class="swiper-button-prev sbp-{{ tab.module }}-{{ tab.id }}"></div>
            </div>
            </div>
            <script type="text/javascript"><!--
            $('#prodcarousel{{ tab.module }}-{{ tab.id }} .swiper-container').swiper({
              slidesPerView: 2,
              autoPlay: 5000,  
              nextButton: '.sbn-{{ tab.module }}-{{ tab.id }}',
              prevButton: '.sbp-{{ tab.module }}-{{ tab.id }}',
              pagination: '.prodcarous{{ tab.module }}-{{ tab.id }}',
              paginationClickable: true,
              autoplayDisableOnInteraction: true,
              spaceBetween: 5,
              loop: true,
            });
            --></script>
            {% endfor %}
            </div>

            Karbayev 06 сентября 2022, 09:22 0
            • Добрый день! Замените autoPlay на autoplay, должно заработать. Сейчас поправлю в модуле

              Владимир 06 сентября 2022, 10:01 0
              • Добрый день! Исправил на autoplay и все заработало! Спасибо!

                Karbayev 06 сентября 2022, 14:08 0
            • Здравствуйте. Подскажите, я хочу добавить возможность вывода товаров у которых осталось товара в количестве 1шт. Реализовать хочу через админку. Помогите, пожалуйста

              Иван 29 июля 2022, 12:15 0
              • И почему-то слайдер в автоматическом режиме не двигается, хотя настройки стоят

                Показать код
                slidesPerView: 5,
                  autoPlay: 5000,
                  nextButton: '.sbn-{{ tab.module }}-{{ tab.id }}',
                  prevButton: '.sbp-{{ tab.module }}-{{ tab.id }}',
                  pagination: '.prodcarous{{ tab.module }}-{{ tab.id }}',
                  paginationClickable: true,
                  autoplayDisableOnInteraction: true,
                  spaceBetween: 5,
                  loop: true

                Иван 29 июля 2022, 13:00 0
                • Здравствуйте! Через админку можно только количество выставить у товаров, что и так есть. Что бы сделать выборку товаров с quantity = 1 нужно править getProducts (в catalog/product). А вот дальше уже делать правки в модуле(-ях). Если где то уже есть фильтр по количеству, нужно подсмотреть, при каком условии срабатывает.
                  А по слайдеру… попробуйте autoplay вместо autoPlay (похоже мой косяк)

                  Владимир 29 июля 2022, 18:03 +1
                  • По autoplay всё верно, большое спасибо)

                    А по поводу количества, не понял для чего править getProducts в catalog/product. Ведь я хочу в Модуле выбрать Источник по количеству остатка, т.е. он будет показывать все товары, у которых quantity=1, на подобии «Самые просматриваемые» или «Последние добавленные». Просто в контроллере у Вас нет информации о том какие условия должны быть чтобы отображались «Самые просматриваемые» или «Последние добавленные»

                    Иван 29 июля 2022, 20:12 0
                    • Хочется что-то типа такого imgur.com/a/ywpyGDj

                      Иван 29 июля 2022, 20:16 0
                      • У модуля нет собственной модели (для получения товаров используется стандартная функция). Что бы получить товары с количеством = 1 нужно много дорабатывать

                        Владимир 29 июля 2022, 20:24 +1
                        • Сколько будет стоить доработка и по времени сколько займёт?

                          Иван 29 июля 2022, 20:30 0
                          • Смотрю у других есть возможность сортировки по «Дата поступления», я думаю тут можно вытянуть и по остатку. Может у Вас тоже есть возможность сделать по дате поступления? Как я понимаю они просто используют фильтр в самом модуле

                            Иван 30 июля 2022, 12:33 0
                            • Возможно у них реализовано уже. Стандартно есть только сортировка по количеству, но это не то. Еще интересный момент, товаров с количеством = 1 может быть много (обычно), показать их все в прокрутке плохой вариант (лучше не выводить больше 10… может 15, если очень надо), больше — будет подтормаживать страницу (наверняка ведь модуль этот не единственный).
                              Можно сделать выборку по количеству + еще некие параметры (показать сначала те, где количество = 1 и низкая цена, например, или из определенной категории).
                              Этот модуль не вносит изменений в файлы опенкарта, что бы работало — нужно вносить, переделывать. Десяток товаров, которые нужно быстрее продать, правильнее вручную отобрать и вывести… обычно.
                              Если надо — сделаю за донат. Но, тогда подумайте над параметрами выборки, посмотрим что с этим можно сделать.

                              Вот вариант, можно в админке отметить «особые» товары, как то так, затем, если какого то из этих товаров стало = 1, показывать в модуле.

                              ps. Еще можно в категориях сделать сортировку так, что бы показывало первыми товары, которых = 1.

                              Владимир 30 июля 2022, 21:03 0
                              • Здравствуйте. На донат готов. Сортировка нужна по количеству товара и можно еще сделать по статусу. Еще вопрос, будет выводиться последние или первые 10 товаров с этими параметрами? Это тоже можно как-то выбрать.

                                Иван 02 августа 2022, 06:23 0
                                • По статусу я имел ввиду «Отсутствие на складе» — Статус, показываемый, когда товара нет на складе (количество = 0)

                                  Иван 02 августа 2022, 06:25 0
                                  • Можно сделать так, как нужно. По статусу и количеству в данном случае одно и то же, т.к. количество = 1 исключает все отсутствующие. А дальше все равно желательно делать дополнительную выборку. А здесь уже у всех по разному. Можно и по наличию в названии некого слова, можно и как выше я написал — отметить все важные и выбирать из них, можно просто все которых = 1 и сортировка по имени/цене… здесь уже не важно

                                    Владимир 04 августа 2022, 12:14 0
                        • Здравствуйте. Подскажите, я хочу сделать чтобы можно было товары, у которых количество равно 1. Хочу этот параметр сделать в админке. Но не могу в контроллере понять как всё устроено. Помогите, пожалуйста.

                          Иван 29 июля 2022, 12:14 0
                          • да это действительно полезная тема, можно ли это сделать?

                            taha burak 26 февраля 2022, 18:18 0
                            • Я думаю, вы не сможете помочь с этим

                              taha burak 28 февраля 2022, 20:33 0
                              • Я уже говорил, мало времени. Вопросы по теме — отвечаю, не по теме… уж извините.
                                webrazrab.ru/nastrojki-opencart/modul-oc-2-karusel-rekomenduemyix-tovarov.html
                                Вот похожий, но более простой модуль, здесь можно подсмотреть правки для контроллера и шаблона (задача заключается в простом поиске отличий)

                                Попробуйте сравнить, там не сложно.

                                Владимир 28 февраля 2022, 20:41 0