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

[Ed71]

Здравствуйте. Поставил в магазин модуль Similar Products, отображающий в табе, в карточке продукта дополнительные товары: Для просмотра ссылки Войди или Зарегистрируйся и решил вместо пагинации воткнуть их в карусельку. Поскольку на сайте уже используется 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>

Проблема заключается в том, что часть товаров прокручивается этой каруселью, а часть выстраивается под ней в вертикальном порядке слева и в прокрутке совсем не участвует. Почему так получается не могу никак понять. Подскажите, пожалуйста, как можно пофиксить эту траблу. Заранее огромное спасибо.

 

[gusewww]

Все дело в стилях, например тот же overflow или inline, без демки увы ничего не подскажу.

 

[eanknd]

в IE и FireFox все отображается отлично, описываемая Вами проблема, отображается в Хроме, смотрите стили

В коде посмотрите вложенность фигурных скобок и лишние </div>. Это так и должно быть?

 

[Ed71]

А у меня, наоборот, в FireFox так отображается. Еще сейчас заметил, что такое отображение появляется после добавления комментариев. Стоит удалить комментарии - все нормально, только добавишь хотя бы один все расползается. Может быть попробовать табы местами поменять?

 

[eanknd]

Попробуйте вставить этот код. Напишите изменилось ли что-нибудь.

<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]

Табы поменял местами - результат 0. Сейчас попробую Ваш вариант.

eanknd, все работает отлично, огромное Вам спасибо! Это из-за лишних div'ов было?

 

[eanknd]

нз )))
Да и неправильная вложенность фигурных скобок. Всего Вам хорошего!