Owl карусель в модуле Similar Products

Тема в разделе "Opencart", создана пользователем Ed71, 12 авг 2015.

Информация :
Внимание форумчане! При создании тем, или выкладывании какой-либо информации проверьте в какой ветке форума вы находитесь! Не путайте Opencart и Opencart2. При несоблюдении данного условия выносится соответствующее наказание! И потом не говорите что вас НЕ ПРЕДУПРЕЖДАЛИ! По возможности используйте обменники mail, yandex, google, dropbox, rghost Дабы избежать просьб перезалить и проблем с рекламой!
Модераторы: ZiX
  1. Ed71

    Ed71 Постоялец

    Регистр.:
    6 янв 2015
    Сообщения:
    100
    Симпатии:
    22
    Здравствуйте. Поставил в магазин модуль Similar Products, отображающий в табе, в карточке продукта дополнительные товары: http://stylishjewel.ru/ukrashenija-...bra/podveski-iz-serebra-s-kamnjami/p0730.html и решил вместо пагинации воткнуть их в карусельку. Поскольку на сайте уже используется owl carousel подключил ее в файле similar_products_products.tpl следующим образом:
    Код:
    <link rel="stylesheet" type="text/css" href="catalog/view/theme/stylishjewel/stylesheet/similar-owl.css" />
    <div class="sim-product">
      <?php foreach ($similar as $product) { ?>
    <div class="sim-item">
            <?php if ($product['thumb']) { ?>
            <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>
                    <?php } ?>
            <div class="name"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></div>
            <?php if ($product['price']) { ?>
            <div class="price">
              <?php if (!$product['special']) { ?>
              <?php echo $product['price']; ?>
              <?php } else { ?>
              <span class="price-old"><?php echo $product['price']; ?></span><br /><span class="price-new"><?php echo $product['special']; ?></span>
              <?php } ?>
            </div>
            <?php } ?>
            <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>
    </div>
              <?php } ?>
              <?php } ?>
            </div>
    <a href="<?php echo $product['href']; ?>#tab-review"><?php echo $product['reviews']; ?></a>
        <div class="cart"><a class="button-prod"  href="<?php echo $product['href']; ?>"><i class="fa fa-shopping-cart">&nbsp;Купить</i></a></div>        
          </div>
          <?php } ?>
        </div>
    </div>
    
    <script type="text/javascript"><!--
    $('.sim-product').owlCarousel({
       items: 3,
    itemsCustom : false,
    singleItem: false,
        itemsDesktop : [1199, 3],
        itemsDesktopSmall : [980, 3],
        slideSpeed : 500,
        paginationSpeed : 800,
        rewindSpeed : 1000,
        autoPlay : false,
        stopOnHover : false,
        navigation : true,
        //navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
    pagination : false,
        rewindNav : true,
        scrollPerPage : false,
    });
    --></script>
    Проблема заключается в том, что часть товаров прокручивается этой каруселью, а часть выстраивается под ней в вертикальном порядке слева и в прокрутке совсем не участвует. Почему так получается не могу никак понять. Подскажите, пожалуйста, как можно пофиксить эту траблу. Заранее огромное спасибо.
     
  2. gusewww

    gusewww

    Регистр.:
    4 июл 2011
    Сообщения:
    669
    Симпатии:
    299
    Все дело в стилях, например тот же overflow или inline, без демки увы ничего не подскажу.
     
  3. eanknd

    eanknd Создатель

    Регистр.:
    4 апр 2014
    Сообщения:
    21
    Симпатии:
    10
    в IE и FireFox все отображается отлично, описываемая Вами проблема, отображается в Хроме, смотрите стили

    В коде посмотрите вложенность фигурных скобок и лишние </div>. Это так и должно быть?
     
    Последнее редактирование: 12 авг 2015
    Ed71 нравится это.
  4. Ed71

    Ed71 Постоялец

    Регистр.:
    6 янв 2015
    Сообщения:
    100
    Симпатии:
    22
    А у меня, наоборот, в FireFox так отображается. Еще сейчас заметил, что такое отображение появляется после добавления комментариев. Стоит удалить комментарии - все нормально, только добавишь хотя бы один все расползается. Может быть попробовать табы местами поменять?
     
  5. eanknd

    eanknd Создатель

    Регистр.:
    4 апр 2014
    Сообщения:
    21
    Симпатии:
    10
    Попробуйте вставить этот код. Напишите изменилось ли что-нибудь.
    Код:
    <link rel="stylesheet" type="text/css" href="catalog/view/theme/stylishjewel/stylesheet/similar-owl.css" />
    <div class="sim-product">
        <?php foreach ($similar as $product) { ?>
        <div class="sim-item">
            <?php if ($product['thumb']) { ?>
            <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>
            <?php } ?>
           
            <div class="name"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></div>
           
            <?php if ($product['price']) { ?>
            <div class="price">
              <?php if (!$product['special']) { ?>
              <?php echo $product['price']; ?>
              <?php } else { ?>
              <span class="price-old"><?php echo $product['price']; ?></span><br /><span class="price-new"><?php echo $product['special']; ?></span>
              <?php } ?>
            </div>
            <?php } ?>
           
            <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>
       
            <a href="<?php echo $product['href']; ?>#tab-review"><?php echo $product['reviews']; ?></a>
            <div class="cart"><a class="button-prod"  href="<?php echo $product['href']; ?>"><i class="fa fa-shopping-cart">&nbsp;Купить</i></a></div>       
        </div>
        <?php } ?>
    </div>
    
    <script type="text/javascript"><!--
    $('.sim-product').owlCarousel({
        items: 3,
        itemsCustom : false,
        singleItem: false,
        itemsDesktop : [1199, 3],
        itemsDesktopSmall : [980, 3],
        slideSpeed : 500,
        paginationSpeed : 800,
        rewindSpeed : 1000,
        autoPlay : false,
        stopOnHover : false,
        navigation : true,
        //navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
        pagination : false,
        rewindNav : true,
        scrollPerPage : false,
    });
    --></script>
     
    Ed71 нравится это.
  6. Ed71

    Ed71 Постоялец

    Регистр.:
    6 янв 2015
    Сообщения:
    100
    Симпатии:
    22
    Табы поменял местами - результат 0. Сейчас попробую Ваш вариант.

    eanknd, все работает отлично, огромное Вам спасибо! Это из-за лишних div'ов было?
     
    Последнее редактирование модератором: 12 авг 2015
  7. eanknd

    eanknd Создатель

    Регистр.:
    4 апр 2014
    Сообщения:
    21
    Симпатии:
    10
    нз )))
    Да и неправильная вложенность фигурных скобок. Всего Вам хорошего!
     
    Ed71 нравится это.