leicester web designer blog

Closing Down - No Sale!

Fresh Web Services is closing down, effective 31/12/2019.

We'd like to thank all our customers for placing their trust in us & we hope that trust has been repaid.

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. This way they could reuse the carousel however often they wanted.

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>

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

$category_model = Mage::getModel('catalog/category')->load($this->getCategoryId());
$collection = Mage::getResourceModel('catalog/product_collection');
$_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 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 class="clear"></div>
<?php if ($i%$_columnCount==0 || $i==count($_products)): ?>
<?php endif ?>
<?php endforeach; ?>
<?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 set methods calls in the block's layout xml to set the category id, the number of columns, and the number of products to display. we can then retireve these values using the appropriate call methods - such as getColumnCount(), etc.

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

<?php $_columnCount $this->getColumnCount(); ?> = <action method="setColumnCount"><columns>3</columns></action> in the xml layout, etc.


 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 in a couple of lines of javascript in our CMS page, like so:

<script type="text/javascript">// <![CDATA[
    auto: false,
    minSlides: 3,
    maxSlides: 3,
    moveSlides: 3,
    slideMargin: 33

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