Magento: как отображать товары на owl-carousel

Я использую magento 1.9.3 и хочу отображать рекомендуемые продукты на главной странице в карусели совы.

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

$_productCollection=$this->getFeaturedProducts();

Я нашел предыдущий вопрос в переполнении стека по этому поводу: Owl Carousel - Magento Products

и после этого предыдущего вопроса я пришел к этому в своем шаблоне:

<div class="owl-carousel">
    <?
        $products = $this->getFeaturedProducts();
        foreach ($products as $_product) { // iterate through the entire collection
            echo '<div class="item"><img src='.$this->helper('catalog/image')->init($_product, 'small_image')->keepFrame(false)->resize($_imgSize).'></div>'; // print the image url inside of the required Owl markup
        }
    ?>
</div>

Но div owl-carousel не отображается. Если я просматриваю страницу, там есть div и изображения внутри, но ничего не отображается. Если я удалю класс owl-carousel, я увижу все изображения, отображаемые в списке.

Я установил расширение «Responsive Owl Slider» из magento connect, и у меня есть еще одна карусель совы поверх страницы, созданная с помощью административной cms, которая показывает слайды изображений (не продукты), и она работает нормально. Единственный, который терпит неудачу, - это тот, который я пытаюсь сделать с помощью кода.

Я вижу, что класс owl-carousel имеет display: none, поэтому, очевидно, он ничего не отображает, но если я удалю display: none, он покажет все изображения одновременно, а не карусель.

Как отобразить выбранные товары в карусели совы?


person Alex    schedule 20.03.2017    source источник


Ответы (2)


Попробуйте это расширение

https://www.magentocommerce.com/magento-connect/new-products-2.html

Надеюсь, это будет полезно для вас.

person Randhir Yadav    schedule 20.03.2017

Сначала перейдите по ссылке >> https://magento.stackexchange.com/questions/83912/featured-products-on-homepage

Создайте все файлы для следующих ответов.

Затем откройте Featured.phtml

скопируйте и вставьте ниже код

<?php
    $_helper = $this->helper('catalog/output');
    $_productCollection = $this->getProductCollection();
?>
<div class="featured-products">
    <ol class="featured-products-list owl-carousel" id="featured-products-list">
    <?php foreach ($_productCollection as $_product): ?>
        <li><img src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->resize(200) ?>"  alt="<?php echo $this->escapeHtml($_product->getName()) ?>" /></li>
    <?php endforeach; ?>
    </ol>
</div>
<script type="text/javascript">
    jQuery(document).ready(function(){
  jQuery(".owl-carousel").owlCarousel();
});
</script>

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

person Mohammad Aktaruzzaman    schedule 20.03.2017