leicester web designer blog

Magento Product Carousel

Product carousels are another popular User Interface (UI) device used on e-commerce websites in particular. In this how-to I'll show one method of easily creating one.

The Requirement

What the client wanted to achieve was to be able to display a certain number of products from a category in a carousel. They also wanted the ability to set the number of products to be displayed and have the ability to change the title of the carousel.

The Alternatives

The first port of call when attempting to satisfy such a requirement from a client is to see if there's a suitable extension that we could use. And there are loads of product carousels for Magento. However, none that I could find satisfied the requirement or they involved in using yet another JQuery library that we'd have to include in the javascript and css downloads.

The Solution

So, I was left with the need to write my own little extension, one that used the BXSlider library that our template was already using elsewhere.

My solution is as follows.

In the CMS page design tab, I add the following call to a block:

<block type="catalog/product_list" name="home.catalog.product.list" alias="product_list" after="product_new" template="catalog/product/catprods.phtml">
            <action method="setCategoryId"><category_id>118</category_id></action>
            <action method="setTitle"><title>Latest Fashions</title></action>
            <action method="setColumnCount"><columns>3</columns></action>
            <action method="setProductsCount"><count>12</count></action>
            <action method="addPriceBlockType"><type>bundle</type><block>bundle/catalog_product_price</block><template>bundle/catalog/product/price.phtml</template></action>
            <action method="unsetData"><key>cache_lifetime</key></action>
        <action method="unsetData"><key>cache_tags</key></action>
      </block>

This block calls product_list code and renders the output in a custom view called catprods.phtml. There are a number of method calls that enable the user to set the category id, the block title and the number of products to display in the carousel.

The code for the catprods.phtml is as follows

<?php
$category_model = Mage::getModel('catalog/category')->load($this->getCategoryId());
$collection = Mage::getResourceModel('catalog/product_collection');
$collection->addCategoryFilter($category_model);
$collection->setPageSize($this->getProductsCount());
$_helper = $this->helper('catalog/output');

if ( $collection->count()) : ?>
<div class="page-title category-title"><h2 class="on-trend"><?php echo $this->getTitle() ?></h2></div>
<div class="fp-new">
<?php $_columnCount = $this->getColumnCount(); ?>
<?php $i=0; foreach ($collection as $_product): ?>
<?php if ($i++%$_columnCount==0): ?>
<ul class="products-grid row">
<?php endif ?>
<li class="item col-xs-4<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
<div class="wrapper-hover">
<?php $_product = Mage::getModel('catalog/product')->load($_product->getId()); ?>
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(250, 333) ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" /></a>
<div class="product-shop">
<?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
<?php echo $this->getPriceHtml($_product, true, '-new') ?>
<h3 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>"><?php echo $this->htmlEscape($_product->getName()) ?></a></h3>
</div>
<div class="label-product">
<?php if($_product->getData('new')){echo '<span class="new">'.$this->__('New').'</span>'; }?>
<?php if($_product->getData('sale')){echo '<span class="sale">'.$this->__('Sale').'</span>'; }?>
</div>
<div class="clear"></div>
</div>
</li>
<?php if ($i%$_columnCount==0 || $i==count($_products)): ?>
</ul>
<?php endif ?>
<?php endforeach; ?>
</div>
<?php endif; ?>
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('home_content2')->toHtml() ?>

You'll notice that at the outset that we use the various methods calls in the block to set the category id and the number of products to display.

$category_model = Mage::getModel('catalog/category')->load($this->getCategoryId());

$collection->setPageSize($this->getProductsCount());

 The title is again got from the call we made in the block, namely:

 <action method="setTitle"><title>On Trend - Latest Products</title></action>

This then is how we call the for the products in the CMS page and then how we render the resulting products in our view file.

The real magic, in many ways, though, is the BxSlider javascript library, which is what actually turns the output into a carousel. This is all done is a couple of lines of javascript in our CMS page, like so:

<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function(){
  jQuery('.fp-new').bxSlider({
    auto: false,
    minSlides: 3,
    maxSlides: 3,
    moveSlides: 3,
    slideMargin: 33
  });
});
// ]]></script>

And that is how you can create a Magento products carousel.

If you need any assistance with your Magento project or website, call me on 0116 279 3822.

Satisfied Clients

Fresh Web Services Ltd:
LCB Depot, 31 Rutland Street, Leicester. LE1 1RE
Phone: +44 (0)116 279 3822
Company No: 04716234
52.634568, -1.127919
Use of this website constitutes acceptance of the
Fresh Web Services Terms and Privacy Policy including cookie-use
Find us on Google+
Find us on Facebook
Follow us on Twitter
Fresh Web Services is rated 5 stars on Google based on 3 reviews
Top