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. Павел 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

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