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. Александр Вчера в 12:19
    +1

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

    1. Владимир Вчера в 12:24
      +1

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

      1. Александр Синельников Вчера в 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. Владимир Вчера в 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. Александр Вчера в 11:03
            0

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

            1. Владимир Вчера в 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

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