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. Andrey 08 апреля 2020, 22:42
    0

    Доброго времени суток! Установилось и завелось, все ок. Но, кнопки о названия отображаются не корректно. Не знаю как исправить.
    Выглядит так
    Fire-Shot-Pro-Screen-Capture-001-Kolonka-pp-ua-kolonka-pp-ua
    А должно быть так
    Fire-Shot-Pro-Screen-Capture-002-Kolonka-pp-ua-kolonka-pp-ua

    1. Владимир 09 апреля 2020, 00:361
      0

      Рекомендую открыть шаблон любого модуля из тех что были (catalog/view/theme/ВАША_ТЕМА/template/extension/module/), например latest или special и оттуда в httpmprodtc.tpl заменить все от:

      <div class="product-thumb transition">
      до вот этого закрывающего div:
      </div>
        <?php } ?>
      </div>
      <script type="text/javascript"><!--
      Единственное, там где выводится процент в стандартном модуле, нужно будет сделать замену переменной на:
      <?php echo $product['percent']; ?>
      Если что то не получится — пишите

      1. Andrey 09 апреля 2020, 07:38
        0

        Не получается, возможно не правильно делаю. Вот мой special.tpl

        <div class="product-card">
          <h3 class="cont-title"><?php echo $heading_title; ?></h3>
          <div class="row">
            <?php foreach ($products as $product) { ?>
            <div class="product-column product-layout col-20 col-lg-3 col-md-3 col-sm-6 col-xs-12">
              <div class="product-thumb">
                <div class="image">
                  <a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-responsive" /></a>
                  <div class="toolbar-icons">
                    <div class="wishlist-btn">
                      <span class="wishlist-item" title="<?php echo $button_wishlist; ?>" onclick="wishlist.add('<?php echo $product['product_id']; ?>');"><i></i></span>
                    </div>
                    <div class="compare-btn">
                      <span class="compare-item" title="<?php echo $button_compare; ?>" onclick="compare.add('<?php echo $product['product_id']; ?>');"><i></i></span>
                    </div>
        			<?php if ($product['action_percent']) { ?>
                    <div class="percent-icon">
        			  <span class="price-percent"><?php echo "-" . $product['action_percent'] . "%"; ?></span>
                    </div>
        			<?php } ?>
                  </div>
                </div>
                <div class="caption">
                  <a href="<?php echo $product['href']; ?>" class="product-name"><?php echo $product['name']; ?></a>
                  <div class="product-des"><?php echo $product['description']; ?></div>
                  <div class="rating">
                    <?php for ($i = 1; $i <= 5; $i++) { ?>
                    <?php if ($product['rating'] < $i) { ?>
                    <span class="star-empty"><i class="fa fa-star"></i></span>
                    <?php } else { ?>
                    <span class="star"><i class="fa fa-star"></i></span>
                    <?php } ?>
                    <?php } ?>
        			<div class="reviews-item">
        			  <a href="<?php echo $product['href']; ?>" class="reviews-count"><?php echo $product['reviews']; ?></a>
                    </div>
        		  </div>
                </div>
                <div class="price-button">
                  <?php if ($product['price']) { ?>
                  <div class="price">
                    <?php if (!$product['special']) { ?>
                    <span class="main-price"><?php echo $product['price']; ?></span>
                    <?php } else { ?>
                    <span class="price-new main-price">
        			  <?php echo $product['special']; ?>
        			</span> 
                    <span class="price-old"><?php echo $product['price']; ?></span>
                    <?php } ?>
                    <?php if ($product['tax']) { ?>
                    <div class="tax-block">
        			  <span class="price-tax"><?php echo $text_tax; ?> <?php echo $product['tax']; ?></span>
                    </div>
        			<?php } ?>
                  </div>
                  <?php } ?>				
                  <?php if ($product['quantity']) { ?>
        		  <div class="button-group">
                    <button type="button" class="btn btn-primary" onclick="cart.add('<?php echo $product['product_id']; ?>');"><i></i><span><?php echo $button_cart; ?></span></button>               
                  </div>
        		  <?php } else { ?>
        		  <div class="button-group product-not-available">
        		    <span class="value">Товар отсутствует</span>
        			<div class="stock"><?php echo $product['stock']; ?></div>
        		  </div>
        		  <?php } ?>
                </div>
              </div>
            </div>
            <?php } ?>
          </div>
        </div>

    2. Ярослав 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

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