jcadima
9/22/2017 - 5:14 PM

Products Carousel - OWL Carousel

Products Carousel - OWL Carousel

1) Create a new phtml file:
/app/design/frontend/em0140/default/template/featuredcustom.phtml

2) Create a New Category ie: Featured

3) paste into cms page
{{block type="core/template" template="newproducts/newproducts.phtml"}}

4) paste the following into featuredcustom.phtml


<?php
// Works with OWL carousel


$products = Mage::getModel('catalog/category')->load(3); // 3: NEW ARRIVALS category ID
// get all products
$productslist = $products->getProductCollection()->addAttributeToSelect('*');

?>


<div class="brands-slider-block">
<h2 class="brands-title sub-title secondary-font text-center">FOLLOW ISLAND GIRL MIAMI</h2>
<div class="row">
	<div class="prod-slider">
	<?php foreach($productslist as $product) :   ?>

		<div class="brand-item">
            <a href="<?php echo $product->getProductUrl() ; ?>" ><img src="<?php echo  Mage::helper('catalog/image')->init($product, 'thumbnail') ; ?>" class="img-responsive" alt="a" /></a>
            <div class="info">
                <div class="separator clear-left">
                    <p class="btn-add">
                        <a href="<?php echo $product->getProductUrl() ; ?>" class="hidden-sm pink text-center"><?php echo  $product->getName() ; ?></a></p>
                </div>
            </div>
		</div>
	<?php endforeach; ?> 

	</div>
</div>

<script type="text/javascript">
				jQuery(document).ready(function(){
					jQuery('.prod-slider').owlCarousel({
						items: 4,  // how many items to show
						itemsDesktop: [1199, 5],
						itemsDesktopSmall: [991, 4],
						itemsTablet: [768, 3],
						itemsMobile: [600, 2],
						lazyLoad: true,
						pagination: false,
						navigation: true
					});
				});
				
</script>
</div>