Оценок: 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%

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

  1. Здравствуйте
    Как сделать промежуток между товарами
    а то липнут друг к другу

    Стас 03 декабря 2022, 07:37 0
    • Добрый день! Нужно в вызов swiper (opencart 3) добавить

      Показать код
      spaceBetween: 5,
      Для owlCarousel (oc2):
      Показать код
      margin:5,
      Только вот не помню, будет ли работать на той версии, что идет в комплекте с опенкарт. У себя на тестовом обновлял до более свежей.
      Если что, в качестве альтернативы можно сделать так:
      Показать код
      .productcarusel {margin-left:-5px;margin-right:-5px;}
      .productcarusel .item {padding-left:5px;padding-right:5px;}
      (что бы блоки товаров визуально не вылезали за ширину контента)

      Владимир 03 декабря 2022, 10:53 0
    • Здравствуйте, возможна ли адаптация модуля под конкретный шаблон с небольшой доработкой? На платной основе естественно.

      Евгений 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