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

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

  1. да это действительно полезная тема, можно ли это сделать?

    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
    • Могу ли я применить то же самое к разделу связанных продуктов на странице продукта?

      Related products

      arda 25 февраля 2022, 15:08 +1
      • Что именно?

        Владимир 25 февраля 2022, 15:41 0
        • В нижней части страницы товара похожие товары должны скользить вправо и влево, как здесь.

          arda 25 февраля 2022, 15:59 0
          • Вы мастер-программист, я был бы очень рад, если бы вы сделали это

            arda 25 февраля 2022, 17:02 0
            • Вы меня понимаете?

              arda 25 февраля 2022, 23:52 +1
              • Понимаю, мне бы время еще найти)

                Владимир 26 февраля 2022, 00:02 +1
                • ты мой хозяин
                  Я всегда буду ждать тебя здесь.
                  это важно для меня.

                  related products

                  arda 26 февраля 2022, 00:12 +1
          • 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
            }
            }

            Я пишу эти коды, я использую 3x, но они перечислены один за другим.

            пожалуйста, помогите мне :(
            нет мобильного просмотра
            не могли бы вы пересмотреть
            внизу сайта

            ozellerticaret.com

            piri reis 21 февраля 2022, 20:46 0
            • Пропустили запятую после

              Показать код
              loop: true

              Владимир 21 февраля 2022, 20:50 0
              • да зарегистрирован как истинный, но не работает мобильное представление

                piri reis 21 февраля 2022, 21:17 0
                • 15 дней мучаюсь помогите

                  piri reis 21 февраля 2022, 21:21 0
                • Попробуйте использовать код, что был ранее, только добавьте запятую после loop: true:

                  Показать код
                  .....
                  loop: true,
                  breakpoints: {
                  .....

                  Владимир 21 февраля 2022, 21:21 0
                  • Я не добавлял код, он указан ниже

                    piri reis 22 февраля 2022, 06:25 0
                    • Я подал заявку, но это не сработало

                      ozellerticaret.com/

                      piri reis 22 февраля 2022, 06:29 0
                    • работает, теги товара не пришли?
                      Нет на складе

                      Adnan çakıcı 23 февраля 2022, 09:39 0
                      • Посмотрите, в статье есть: Отображение статуса (наличия)
                        Там для опенкарт 2, нужно переделать в twig:

                        Показать код
                        <span class="status {% if product.quantity > 0 %}ok{% else %}no{% endif %}">{{ product.stock }}</span>
                        Не проверял, должно работать.

                        Владимир 23 февраля 2022, 15:15 0
                        • Это то же самое для опенкарт 3?

                          Adnan çakıcı 24 февраля 2022, 08:06 0
                          • Да, я написал код, который нужно вставить в .twig, именно для opencart 3

                            Владимир 24 февраля 2022, 09:30 0
                            • куда мне его добавить, он вылетел, когда я добавлял его сюда?

                              {% for product in tab.product %}
                              ****

                              Добавил звезду в поле, сайт битый

                              Adnan çakıcı 24 февраля 2022, 09:32 0
                              • Можете ли вы добавить его в конец и отправить мне снова, я думаю, что это очень практично :)

                                Adnan çakıcı 24 февраля 2022, 09:41 0
                                • Проверил, все работает, пробуйте другой вариант вставки.


                                  Только еще нужно будет в языковой файл добавить

                                  Показать код
                                  $_['text_instock']      = 'In stock';

                                  Владимир 24 февраля 2022, 10:09 0
                                  • Я сделал то, что вы сказали, но ответа не было

                                    Adnan çakıcı 24 февраля 2022, 11:12 0
                                    • ты приедешь в турцию, я закажу тебе шашлык, теперь все готово

                                      Adnan çakıcı 24 февраля 2022, 12:07 0
                        • www.popvitrin.com/ Хочу сделать как у друга на этом сайте, но не понимаю как это сделать?
                          Я использую 3.0.3.6.

                          Я добавил коды в круглых скобках внизу, и он показывался вертикально без прокрутки

                          piri reis 21 февраля 2022, 19:13 0
                          • Посмотреть бы как это выглядит у Вас на сайте. Скачивали версию под Opencart 3? Возможно используется шаблон с другим слайдером

                            Владимир 21 февраля 2022, 20:36 0
                            • нет другого слайдера

                              piri reis 21 февраля 2022, 21:16 0
                          • как сделать аббревиатуру названия товара,

                            как substr?

                            vlad oktay 21 февраля 2022, 14:40 0
                            • Не понятен вопрос

                              Владимир 21 февраля 2022, 20:38 0
                              • Я хочу сократить название продукта до 20 символов

                                piri reis 21 февраля 2022, 21:19 0
                                • тогда да, substr

                                  Владимир 21 февраля 2022, 21:21 0
                                  • где мне написать код?

                                    piri reis 22 февраля 2022, 06:26 0
                                    • /catalog/controller/extension/module/httpmprodtc.php
                                      Здесь нужно найти

                                      Показать код
                                      'name'        => $product_info['name'],

                                      Владимир 22 февраля 2022, 08:15 0
                                • Добрый вечер, благодарю за модуль!
                                  Подскажите пожалуйста как дабавить многоязычность, чтобы заголовки табов выводились на разных языках. И хотелось бы еще картинку к заголовкам добавить и было бы вообще супер.

                                  Елена 09 ноября 2021, 16:28 0
                                  • Многоязычность здесь не предусмотрена и добавить не просто. А что за картинка имеется ввиду?

                                    Владимир 09 ноября 2021, 22:45 0
                                    • или вместо заголовка в табе или вместе с заголовком картинка. Чтобы добавить многоязычность, свяжитесь со мной пожалуйста, естественно за донат)

                                      Елена 10 ноября 2021, 08:23 0
                                  • Добрый вечер, благодарю за модуль!
                                    Подскажите сделать вывод ссылки на категорию?
                                    Что нужно прописать в контроллере и в шаблоне?
                                    Заранее благодарю!

                                    Алекс 18 сентября 2021, 22:07 0
                                    • Доброй ночи! Это уже было в комментариях. Посмотрите решение чуть ниже, 18 декабря 2020, 21:57

                                      Владимир 18 сентября 2021, 22:40 0
                                      • Не нашел в контроллере этой строки:

                                        Показать код
                                        if (!$setting['category']) {$setting['category'] = 0;}

                                        Алекс 19 сентября 2021, 13:34 0
                                        • Похоже много поменял с прошлого раза… Попробуйте так:
                                          После

                                          Показать код
                                          $products = array();
                                          добавить
                                          Показать код
                                          $category_href = '';
                                          Далее вот это:
                                          Показать код
                                          if (!$tab['category']) {$tab['category'] = 0;
                                          }
                                          Заменить на:
                                          Показать код
                                          if (!$tab['category']) {
                                          $tab['category'] = 0;
                                          } else {
                                          $category_href = $this->url->link('product/category', 'path=' . $tab['category']);
                                          }
                                          Еще дальше добавить:
                                          Показать код
                                          $data['tabs'][] = array('id' => $tab["id"],'module' => $module,'product' => $prods,'category_href' => $category_href);
                                          И остается вывод в шаблон. Что бы нормально отображалось, нужно обернуть каждый таб в дополнительный div, поменять вызов карусели… в общем вот, измененный tpl (под opencart 2.3). Если другая версия, сравните

                                          Владимир 19 сентября 2021, 17:27 0
                                          • Ссылка на измененный tpl не рабочая, обновите.

                                            Алекс 19 сентября 2021, 19:10 0
                                            • исправил

                                              Владимир 19 сентября 2021, 19:42 0
                                              • Спасибо! Немного допилил под свои нужды и заработало!
                                                Благодарю ????

                                                Алекс 19 сентября 2021, 20:09 0
                                                • Как можно вас поддержать?

                                                  Алекс 19 сентября 2021, 20:40 0
                                                  • Под статьей есть кнопка Юмани :)

                                                    Владимир 19 сентября 2021, 21:13 0
                                                    • Поддержал )

                                                      Алекс 20 сентября 2021, 08:59 0
                                                      • Подскажите, а есть ли модуль стикеров: Хит, акция, новинка и т д?
                                                        Только чтобы их можно было бы добавлять кастомно.

                                                        Алекс 20 сентября 2021, 09:01 0
                                                      • Спасибо! Модуля нет, всегда прописывал, по необходимости. Подумаю, может модуль, а может как руками прописать напишу.

                                                        Владимир 20 сентября 2021, 09:07 0
                                                        • Можете сориентировать по времени?
                                                          А то проект на сдаче )

                                                          Алекс 20 сентября 2021, 11:03 0
                                                          • Или напишите пожалуйста мануал на почту как реализовать, в свою очередь с меня поощрение )

                                                            Алекс 20 сентября 2021, 11:07 0
                                                          • Сейчас займусь)

                                                            Владимир 20 сентября 2021, 15:41 0
                                                            • Благодарю!
                                                              Буду ждать, сдаю проект )

                                                              Алекс 20 сентября 2021, 16:13 0
                                                              • Вот

                                                                Что то много получилось (когда просто делаешь это не так заметно), а еще не все дописал что хотел… наверное сделаю чуть позже ocmod

                                                                Владимир 20 сентября 2021, 21:00 0
                                                                • Благодарю! Ждем окончания чтобы внедрить на проекте!

                                                                  Алекс 21 сентября 2021, 03:50 0
                                                                  • Думаете сегодня закончите статью?

                                                                    Алекс 21 сентября 2021, 10:14 0
                                                                    • Надеюсь. Пока занят. Думаю доделаю, но ночью, или ближе к ночи

                                                                      Владимир 21 сентября 2021, 16:09 0
                                                                      • Напишите тогда тут как сделаете )

                                                                        Алекс 21 сентября 2021, 18:24 0
                                                                        • ответил в соответствующей теме. туда же сообщение перенес

                                                                          Владимир 22 сентября 2021, 09:32 0
                                                  • Здравствуйте, столкнулся с проблемой показа карточек в карусели (версия opencart 3), когда вставляю такой код:
                                                    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
                                                    }
                                                    }
                                                    и вообще пытаюсь делать адаптацию показывается одна карточка

                                                    Алексей В 30 августа 2021, 17:03 0
                                                    • Посмотреть бы на полный код вызова карусели…

                                                      Владимир 31 августа 2021, 06:16 0
                                                      • Показать код
                                                        
                                                        <script type="text/javascript"><!--
                                                        $('#prodcarousel{{ tab.module }}-{{ tab.id }} .swiper-container').swiper({
                                                          slidesPerView: 4,
                                                          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: 20,
                                                          loop: false,
                                                          grabCursor: true,
                                                        });
                                                        --></script>
                                                        

                                                        Алексей В 31 августа 2021, 07:23 0
                                                        • И после

                                                          Показать код
                                                          grabCursor: true,
                                                          Сразу идет
                                                          Показать код
                                                          breakpoints: {.....}
                                                          ? проверил на тестовом, все нормально.

                                                          Единственное, посмотрите под какое разрешение какое количество прописано. Указывается ведь разрешение и количество при меньше или равно (не больше). 320 — минимум, меньше не используется, соответственно и записывать нет смысла.
                                                          Возможно такой вариант больше подойдет:
                                                          swiper пример пагинации

                                                          Владимир 31 августа 2021, 09:18 0
                                                          • Заработало, не знаю в чем ошибка была, просто включил сайт и начал нормально работать. Большое спасибо за уделенное время

                                                            Алексей В 31 августа 2021, 15:07 0