CODEWITHSUNDEEP
magentomagento-1.9owl-carousel-2
Alex
Alex

Reputation: 1250

Magento: how to display products on owl-carousel

I'm using magento 1.9.3 and I want to display featured products in home page in an owl carousel.

I have a method in the block of my module that returns me the collection I want to show in the carousel. I call it from my template like this:

$_productCollection=$this->getFeaturedProducts();

I found a previous question in stack overflow about this: Owl Carousel - Magento Products

and following this previous question I arrived to this in my template:

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

But the div of owl-carousel is not displayed. If I inspect the page, the div is there, and the images inside too, but nothing is displayed. If I delete the owl-carousel class I see all the images displayed in list.

I installed the extension "Responsive Owl Slider" from magento connect, and I have another owl carousel on top of page made with the admin cms that shows image slides (not products) and it's working fine. The only one that fails is the one that I'm trying to do by code.

I see that the owl-carousel class has a display: none so obviously is not displaying anything, but if I delete the display: none it shows all the images at the same time, not a carousel.

How do I display my selected products in an owl carousel?

Upvotes: 0

Views: 5665

Answers (2)

Mohammad Aktaruzzaman
Mohammad Aktaruzzaman

Reputation: 74

First go to the link >> https://magento.stackexchange.com/questions/83912/featured-products-on-homepage

Create all files to following answers.

Then open featured.phtml

copy and paste below code 

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

Please don't forget create attribute and assign for products.

Upvotes: 0

Randhir Yadav
Randhir Yadav

Reputation: 1459

Please try this extension

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

Hope it's helpful for you.

Upvotes: 0

Related Questions