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

Product Tab&Carousel для опенкарт 2.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>

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

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

В этой части речь пойдет о настройке 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 2.3Версия под Opencart 2.1 (2.x<2.3)

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

Сказать $пасибо

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

  1. Ярослав 15 августа 2019, 00:051
    0

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

    1. Владимир 15 августа 2019, 08:38
      0

      Ошибка в модуле. Исправлено.

    2. Виталий 28 апреля 2019, 14:55
      0

      Что то не работает, прокрутка, 2 блок не выводит, и в мобильной версии выводит не так

      1. Виталий 28 апреля 2019, 14:551
        0
        1. Владимир 28 апреля 2019, 15:001
          0

          А можно посмотреть скриншот, как в админке заполнено?

          1. Виталий 28 апреля 2019, 15:271
            0

            Можно, куда отправить скрин?

            1. Владимир 28 апреля 2019, 15:30
              0

              vl@onenv.ru, или прямо сюда

          2. Павел 18 марта 2019, 12:52
            0

            Подскажите, пожалуйста: Добавил три таба, на сайте сами табы не отображаются — выводится сразу три карусели, без названия табов — без ничего. Тема стандартная, сборка opencart.pro
            В чем может быть причина?

            1. Владимир 18 марта 2019, 12:591
              0

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

              1. Павел 18 марта 2019, 13:57
                0

                Отображение заголовка модуля выключено…
                Но внутри там — соответственно, заголовок модуля. У меня он называется «Главная страница» — ничего особенного…
                Я же правильно понимаю, что модуль может выводить табы, как, например стандартный модуль в opencart.pro — demo23.opencart.pro/

                1. Павел 18 марта 2019, 14:16
                  0

                  Разобрался :)

            2. Виталий 17 марта 2019, 21:17
              0

              Здравствуйте на OCstore 2.3 подойдёт модуль?

              1. Владимир 17 марта 2019, 21:181
                0

                Да, все должно быть нормально

              2. Vadim Khay 22 февраля 2019, 17:23
                0

                Как бы банально это не звучало, но как можно добавить в этом модуль вывод именно «рекомендуемых» товаров, те что в «товары > связи > рекомендуемые товары»? Заранее спасибо!

                1. Владимир 22 февраля 2019, 17:491
                  0

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

                2. Александр 21 февраля 2019, 12:19
                  +1

                  Спасибо! Сделайте реализуйте на сайте «подержать», или что типа того, для того что бы люди могли вас поблагодарить финансово)
                  плюсне могу зарегистрироваться на сайте, не работает чего-то. Еще раз спасибо за ваши труды и поддержку!

                  1. Владимир 21 февраля 2019, 12:24
                    +1

                    Спасибо!
                    Кнопку делал, не пользуется популярностью, перестал как то включать в материалах. В VK авторизует без проблем, но регистрация здесь ни на что не влияет

                    1. Александр Синельников 21 февраля 2019, 14:23
                      0

                      И еще вопрос как сделать так чтобы при наведении курсора картинка в карточке товара переворачивалась? (эффект переворота изображения с первого на второе) у меня работало так

                      <div class="image">
                                    <a href="<?php echo $product['href']; ?>">
                                      <img src="<?php echo $product['thumb']; ?>" <?php foreach ($product['additional_img'] as $additional_img) { ?>data-additional="<?php echo $additional_img;?>"<?php } ?> alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-responsive" />
                                    </a>
                                  </div>
                      
                      пытался в ставить его в httpmprodtc.tpl сразу нотисы…

                      1. Владимир 21 февраля 2019, 15:12
                        0

                        Нужно из контроллера того модуля где это работает перенести additional_img, скорее всего будет в двух местах — отдельно переменной + в массиве $data['products']

                    2. Александр 20 февраля 2019, 15:01
                      0

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

                      1. Владимир 20 февраля 2019, 23:441
                        0

                        У вас дважды подгружается скрипт owl.carousel.min.js — один стандартный, из catalog/view/javascript/jquery/owl-carousel/owl.carousel.min.js, второй из темы — catalog/view/theme/electro/assets/js/owl.carousel.min.js, думаю здесь проблема (не ясно, зачем вообще скрипт который стандартно включен, еще и в тему запихивать). Возможно второй имеет другую версию… Один из скриптов нужно убирать.
                        Для начала предлагаю отключить модуль «Рекомендуемые» и посмотреть что будет. Есть вероятность что он единственный использует нестандартный скрипт. Если ничего не изменится, тогда нужно будет переписать мой модуль немного. В контроллере заменить ссылку на скрипт (выше я привел обе ссылки) и подправить скрипт вызова:

                        responsive:{
                                    0:{
                                        items:1,
                                    },
                                    600:{
                                        items:2,
                                    },
                                    992:{
                                        items:3,
                                    },
                                    1200:{
                                        items:4,
                                    }
                                }

                        1. Александр 21 февраля 2019, 11:03
                          0

                          Спасибо" огромное, действительно при отключении модуля «рекомендуемые» все заработало, к сажелению тема не до конца совершенна, много приходиться исправлять хотя она стоит денег… (тема Electro)

                          1. Владимир 21 февраля 2019, 11:07
                            0

                            Тогда нужно модуль рекомендуемые поправить — так же замена пути к скрипту (и css скорее всего) в контроллере + замена скрипта вызова. И то и то можно взять из этого модуля, подойдет

                        2. Александр 19 февраля 2019, 15:48
                          0

                          Скажите как решить notice index «tabs» 167стр. httpmprodtc.php?
                          Тема не стандартная, ostore2.3
                          Заранее спасибо.

                          1. Владимир 19 февраля 2019, 15:561
                            0

                            Добрый день! Видимо ни в одной из вкладок нет товаров. Ошибку поправлю

                            1. Александр 19 февраля 2019, 16:35
                              0

                              Да именно это)))) Простите

                          2. Виталий 08 февраля 2019, 23:14
                            0

                            На Version 2.3.0.2 (rs.6) все хорошо работает, проблем нет пробовал.

                            1. Vyacheslav 05 февраля 2019, 14:02
                              0

                              Модуль ставил на 2.3 но почему то он табами не включается просто идут друг за другом.

                              1. Владимир 05 февраля 2019, 14:131
                                0

                                А можно сайт посмотреть?

                                1. Вячеслав 07 февраля 2019, 12:36
                                  0

                                  Ставил на локалке оа Opencart.pro 2.3 на дефолтную тему.

                                  1. Владимир 07 февраля 2019, 12:43
                                    0

                                    А можно тогда скрин из настроек? без ничего сложно подсказать…

                              2. Виталий 31 января 2019, 21:01
                                0

                                Здравствуйте, путь правильный catalog/language/russian/module/httpmprodtc.php Спасибо за помощь.

                                1. Владимир 31 января 2019, 21:181
                                  0

                                  Там от версии зависит. В 2.3 путь к языковым файлам через ru-ru, en-gb,…

                                2. Виталий 30 января 2019, 21:51
                                  0

                                  Чет я не пойму в наличии пишет,(text_instock), а когда нет в наличии пишет нормально(нет в наличии).

                                  1. Владимир 30 января 2019, 23:111
                                    0

                                    В языковом файле не хватает

                                    $_['text_instock']      = 'В наличии';
                                    catalog/language/ru-ru/extension/module/httpmprodtc.php

                                  2. Виталий 30 января 2019, 20:59
                                    0

                                    А как сделать чтобы писал нет в наличии, и в наличии?

                                    1. Владимир 30 января 2019, 21:03
                                      0

                                      Исправил. $product['stock'] вместо $stock

                                    2. Виталий 30 января 2019, 20:55
                                      0

                                      В ВИДЕ ТЕКСТА НЕ ДЕЛАЕТ, ВЫДАЕТ ОШИБКУ Notice:Undefined variable: stock in

                                      1. Павел 30 января 2019, 19:14
                                        0

                                        Здравствуйте. Спасибо за модуль.
                                        Но, почему для версии 2.3 JS карусели закомментирован? :)

                                        1. Владимир 30 января 2019, 21:02
                                          0

                                          Где там такое? Проверил, все нормально.

                                          1. Владимир 30 января 2019, 21:331
                                            0

                                            Если про

                                            <script type="text/javascript"><!----></script>
                                            то такая конструкция в опенкарт используется везде. Вроде как штука и не нужная, но несколько лет назад (3-5) сам столкнулся с проблемой в работе скриптов — с
                                            <script></script>
                                            ошибка,
                                            <script type="text/javascript"><!----></script>
                                            — все хорошо.
                                            главное что работает)

                                          2. Виталий 30 января 2019, 17:07
                                            0

                                            httpmprodtc.tpl шаблон мне кажется этого модуля,featuredcarusel.tpl это другой модуль.спасибо

                                            1. Владимир 30 января 2019, 17:461
                                              0

                                              Спасибо, исправил.

                                            2. Виталий 30 января 2019, 14:37
                                              0

                                              Здравствуйте! Не подскажите как можно вывести в модуле самой карточке надписи в наличии, нет в наличии?

                                              1. Владимир 30 января 2019, 14:461
                                                0

                                                Я так понимаю, нужно именно в модуле? На самом деле легко, здесь уже все есть в контроллере (забыл убрать), нужно только в httpmprodtc.tpl добавить в нужном месте например так:

                                                <span class="status<?php if ($product['quantity'] > 0) { echo ' ok'; } ?>"><i class="fa fa-check-square"></i></span>
                                                В зависимости от наличия будет выведен класс «ok», в зависимости от наличия которого нужно стили назначить

                                                1. Владимир 30 января 2019, 15:01
                                                  0

                                                  Обновил описание

                                                2. Виталий 20 января 2019, 13:51
                                                  0

                                                  Здравствуйте! Прокрутка не работает, длина и ширина тоже, все товары вниз пошли опенкарт 2.1

                                                  1. Виталий 20 января 2019, 14:09
                                                    +1

                                                    Спасибо за модуль отличный, решил проблему 5+

                                                    1. Владимир 20 января 2019, 15:25
                                                      0

                                                      Добрый день! А проблема была в модуле?

                                                      1. Виталий 20 января 2019, 20:47
                                                        0

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

                                                        1. Виталий 20 января 2019, 21:04
                                                          0

                                                          И ещё есть вопрос есть модуль стена категорий на опенкарт 2установился нормально с компьетера открывается норм в ряд. С телефона в низ идут как изменить чтобы открывались норм адаптировать

                                                        2. Владимир 20 января 2019, 22:18
                                                          0

                                                          Добавил поля в стандартном варианте, CSS файлы в архивах обновил

                                                          1. Владимир 20 января 2019, 22:221
                                                            0

                                                            Для адаптации под мобильные — самое простое прописать свойства в CSS под нужные размеры окна (@media (max-width:.......)

                                                            1. Виталий 21 января 2019, 18:40
                                                              0

                                                              Что не получается стена категорий подправить чтобы на мобильном открывался правильно, все перепробовал css смотрел даже стилей нет не нашол, может с модулем проблемы, как его подправить

                                                              1. Владимир 21 января 2019, 19:00
                                                                0

                                                                Мне тот модуль не попадался. Стили можно прописать и в .css шаблона

                                                                1. Erhan Engin 12 февраля 2019, 09:41
                                                                  0

                                                                  какой код CSS требуется для 2 строк на мобильном телефоне

                                                                  1. Владимир 12 февраля 2019, 11:391
                                                                    0

                                                                    Я так понимаю, нужно вывести все блоки без переключения? Можно указать для нужного разрешения:

                                                                    .productcarusel {display:block !important}
                                                                    Но блоки будут без собственных заголовков

                                                                    1. Erhan Engin 12 февраля 2019, 12:56
                                                                      0

                                                                      Большое спасибо, но я хочу, чтобы такой макет «product-layout col-lg-2 col-md-3 col-sm-4 col-xs-6» возможен? вы не могли бы мне помочь?

                                                                      1. Владимир 12 февраля 2019, 16:24
                                                                        0

                                                                        Если товары выводятся каруселью, то нужно немного иначе делать, через настройки owl carousel (скрипт в самом низу шаблона)… сейчас наверное в описание добавлю

                                                                      2. Владимир 12 февраля 2019, 13:04
                                                                        0

                                                                        а товары слайдером отображаются?

                                                                        1. Erhan Engin 12 февраля 2019, 16:58
                                                                          0

                                                                          Здравствуйте, если вы хотите, мой адрес сайта www.popvitrin.com. Вы можете войти и проверить.
                                                                          (Можно ли писать по-английски? Пишу с помощью гугл перевода.)

                                                                          1. Владимир 12 февраля 2019, 18:01
                                                                            0

                                                                            Обновил описание, надеюсь будет понятно.

                                                                            Translation is perfect! Description update

                                                                            1. Erhan Engin 12 февраля 2019, 18:28
                                                                              0

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