Перейти к содержанию

Рекомендуемые сообщения

На сайт нужно сделать раздел "С этим товаром покупают". Принял решение использовать стандартный блок "Рекомендуемые" в связке с "Owl Carousel 2".

Вставил нужный код OWL в head, модифицировал файл "featured.tpl" следующим образом:

<h3><?php echo $heading_title; ?></h3>
<div class="row">
  <div class="owl-carousel owl-theme">
  <?php foreach ($products as $product) { ?>
  <!-- <div class="item"> -->
    <div class="product-layout col-xs-12"> <!-- col-lg-3 col-md-3 col-sm-6 -->
      <div class="transition">
        <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>
        <div class="caption txt_cntrd">
          <h4><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></h4>
          <!-- <p><?php echo $product['description']; ?></p>
          <?php if ($product['rating']) { ?>
          <div class="rating">
            <?php for ($i = 1; $i <= 5; $i++) { ?>
            <?php if ($product['rating'] < $i) { ?>
            <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
            <?php } else { ?>
            <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span>
            <?php } ?>
            <?php } ?>
          </div>
          <?php } ?>-->
          <?php if ($product['price']) { ?>
          <p class="price">
            <?php if (!$product['special']) { ?>
            <?php echo $product['price']; ?>
            <?php } else { ?>
            <span class="price-new"><?php echo $product['special']; ?></span> <span class="price-old"><?php echo $product['price']; ?></span>
            <?php } ?>
            <?php if ($product['tax']) { ?>
            <span class="price-tax"><?php echo $text_tax; ?> <?php echo $product['tax']; ?></span>
            <?php } ?>
          </p>
          <?php } ?>
        </div>
        <!-- <div class="button-group">
          <button type="button" onclick="cart.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $button_cart; ?></span></button>
          <button type="button" data-toggle="tooltip" title="<?php echo $button_wishlist; ?>" onclick="wishlist.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-heart"></i></button>
          <button type="button" data-toggle="tooltip" title="<?php echo $button_compare; ?>" onclick="compare.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-exchange"></i></button>
        </div> -->
      </div>
    </div>
  <!-- </div> -->
  <?php } ?>
    <script>
      $(document).ready(function() {
        var owl = $('.owl-carousel');
        owl.owlCarousel({
          items: 4,
          loop: false,
          margin: 10,
          nav: true,
          autoplay: true,
          autoplayTimeout: 12500,
          autoplayHoverPause: true
        });
        $('.play').on('click', function() {
          owl.trigger('play.owl.autoplay', [12500])
        })
        $('.stop').on('click', function() {
          owl.trigger('stop.owl.autoplay')
        })
      })
    </script>
<!--                 <a class="button secondary play">Play</a> 
          <a class="button secondary stop">Stop</a>  -->
  </div>
</div>

И все бы хорошо, если бы не пробелы в карусели. Пробовал ставить показ 3-х, 4-х, 5-ти элементов. Но откуда они все равно берутся – не понятно...

 

Может кто сталкивался, либо у кого есть идеи для готового решения...

1.png

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Похожий контент

    • От Nymphetamine
      650.00 руб
      Скачать/Купить дополнение


      OWL Карусель Товаров

       
       
      Особенности:
      Настраиваемая адаптивность товаров. Настраиваемое отображение. Возможность разбивать карусель на табы. Возможность привязывать уникальные карусели [Новинки, Акции, и т.п.] к текущей странице категорий или карточки товара. Поддержка сенсорных событий (свайп-жесты). Поддержка слайд событий мышью. Отложенная загрузка картинок (lazy load). Автопрокрутка. Постраничная прокрутка. Кеширование модуля.  
      Вывод товаров по:
      Дате. Акциям. Производителю. Рейтингу. Популярным Лидерам продаж. Выборочным товарам.  
      Отображение:
      Заголовок. Название товара. Цена товара. Рейтинг товара. Кнопка корзины. Кнопка закладки. Кнопка сравнение. Пагинация. Навигация. И многое другое..  
      При помощи данного модуля легко можно реализовать:
      Новинки. Акции. Рекомендуемые. Лидеры продаж. Хиты продаж. Случайные товары. Похожие товары. Просмотренные товары. и многое другое..
      Гибкая настройка вывода:
      Источник товаров - выводить товары, только из определенной категории / выборочные товары / просмотренные товары. Фильтр по производителю - все производители сразу, или какой-то определенный. Сортировка и фильтрация - по дате добавления, по рейтингу, по популярным, по порядку, только лидеры продаж, только товары со скидками.  
      * Весь функционал настраиваться из админ. панели.
      * Не требует vqmod/ocmod.
      * Простой в установке.
       
      Демо ocStore 3x
      Демо
      Админка - логин и пароль: demo
       
      Демо ocStore 2x
      Демо
      Админка - логин и пароль: demo
       
      Демо ocStore 1.5x
      Демо
      Админка - логин и пароль: demo
       
      Живые примеры сайтов работающие с данным модулем:
      https://mr-apple.ru https://amperlumen.ru
      http://shwkclothing.com Добавил Nymphetamine Добавлено 08.11.2014 Категория Модули Системные требования Сайт разработчика Старая цена 850 Метод активации Автоматическая активация Ioncube Loader Нет OpenCart 3.0
      2.3
      2.2
      2.1
      2.0
      1.5.6.4
      1.5.6.3
      1.5.6.2
      1.5.6.1
      1.5.6
      1.5.5.1
      1.5.5
      1.5.4.1
      1.5.3.1 ocStore 3.0
      2.3
      2.2
      2.1
      1.5.5.1.2
      1.5.5.1.1
      1.5.5.1
      1.5.4.1.2
      1.5.4.1.1
      1.5.4.1
      1.5.3.1
      1.5.2.1
      1.5.1.3 OpenCart.Pro, ocShop Не проверялось  
    • От Nymphetamine
      Особенности:
      Настраиваемая адаптивность товаров. Настраиваемое отображение. Возможность разбивать карусель на табы. Возможность привязывать уникальные карусели [Новинки, Акции, и т.п.] к текущей странице категорий или карточки товара. Поддержка сенсорных событий (свайп-жесты). Поддержка слайд событий мышью. Отложенная загрузка картинок (lazy load). Автопрокрутка. Постраничная прокрутка. Кеширование модуля.  
      Вывод товаров по:
      Дате. Акциям. Производителю. Рейтингу. Популярным Лидерам продаж. Выборочным товарам.  
      Отображение:
      Заголовок. Название товара. Цена товара. Рейтинг товара. Кнопка корзины. Кнопка закладки. Кнопка сравнение. Пагинация. Навигация. И многое другое..  
      При помощи данного модуля легко можно реализовать:
      Новинки. Акции. Рекомендуемые. Лидеры продаж. Хиты продаж. Случайные товары. Похожие товары. Просмотренные товары. и многое другое..
      Гибкая настройка вывода:
      Источник товаров - выводить товары, только из определенной категории / выборочные товары / просмотренные товары. Фильтр по производителю - все производители сразу, или какой-то определенный. Сортировка и фильтрация - по дате добавления, по рейтингу, по популярным, по порядку, только лидеры продаж, только товары со скидками.  
      * Весь функционал настраиваться из админ. панели.
      * Не требует vqmod/ocmod.
      * Простой в установке.
       
      Демо ocStore 3x
      Демо
      Админка - логин и пароль: demo
       
      Демо ocStore 2x
      Демо
      Админка - логин и пароль: demo
       
      Демо ocStore 1.5x
      Демо
      Админка - логин и пароль: demo
       
      Живые примеры сайтов работающие с данным модулем:
      https://mr-apple.ru https://amperlumen.ru
      http://shwkclothing.com
    • От Nymphetamine
      300.00 руб
      Скачать/Купить дополнение


      OWL Карусель Изображений

       
       
      Особенности:
      Настраиваемая адаптивность изображений. Сенсорные события (свайп-жесты). Слайд события мышкой. Настраиваемая навигация. Настраиваемая  пагинация. И многое другое..
      * Весь функционал настраиваться из админ. панели.
      * Простой в установке.
      * Требуется ocmod.
       
      Демо OpenCart 2x
      Демо
      Админка - логин и пароль: demo
       
      Демо OpenCart 3x
      Демо
      Админка - логин и пароль: demo
       
      Добавил Nymphetamine Добавлено 02.04.2017 Категория Слайдшоу, баннеры, галереи Системные требования Сайт разработчика Старая цена 650 Метод активации Без активации Ioncube Loader Нет OpenCart 3.0
      2.3
      2.2
      2.1
      2.0 ocStore 3.0
      2.3
      2.2
      2.1 OpenCart.Pro, ocShop Не проверялось  
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.