6 Steps to creating a featured products jQuery slider for Magento

November 1, 2009
Filed under: eCommerce, Featured, JavaScript, JQuery, Magento Cart, Web 3.0 

This tutorial has come out of necessity for a homepage featured product slider, I had tried quite a few different tutorials but never achieved what I was looking for. Magento is a great open-source ecommerce package, but Im a little surprised that featured products isn’t a feature built-in. Hopefully this tutorial will help. Help support open source!

Requirements:

Step 1: Create a Feature Products Category.
Make sure the category is directly under your root category, or this will not work.
(see screenshot). Take note of the category ID, you will need this later.

3graces category screenshot

Step 2: Create a feature products block
You will need to create featured-products.phtml and place it in /app/design/frontend/yourtheme/template/catalog/product/

Use the following code in featured-products.phtml:

<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/osl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category   design_default
 * @package    Mage
 * @copyright  Copyright (c) 2008 Irubin Consulting Inc. DBA Varien (http://www.varien.com)
 * @license    http://opensource.org/licenses/osl-3.0.php  Open Software License (OSL 3.0)
 */
?>
<?php
/**
 * Product list template
 *
 * @see Mage_Catalog_Block_Product_List
 */
?>

<style>
.featured-bg {
	background: url(/skin/frontend/3graces/default/images/hp_featured_product_bg.gif);
	width: 146px;
	height: 144px;
}

.featured-bg div {
	position: relative;
	top: 10px;
	left: 20px;
}

.featured-bg div img {
	width: 100px;
}

#slider ul, #slider li {
	margin: 0;
	padding: 0;
	list-style: none;
}

#slider li {
	width: 470px;
	height: 175px;
	overflow: hidden;
}

span#prevBtn {

}

span#nextBtn {

}

/* numeric controls */

ol#controls {
	margin: .1em 0;
	padding: 0 0 5px 0;
	height: 20px;
}

ol#controls li {
	margin: 0 5px 0 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 20px;
	line-height: 20px;
}

ol#controls li a {
	float: left;
	height: 20px;
	line-height: 20px;
	border: 1px solid #ccc;
	background: #EDE4E7;
	color: #555;
	padding: 0 5px;
	text-decoration: none;
}

ol#controls li.current a {
	background: #8B3892;
	color: #fff;
}

ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus {
	outline: none;
}

span.price {
	font-size: 14px !important;
}

/* // Easy Slider */
</style>

<?php $_productCollection=$this->getLoadedProductCollection() ?>
<?php if(!$_productCollection->count()): ?>
<div>
    <?php echo $this->__('There are no products matching the selection.') ?>
</div>
<?php else: ?>

<?php // Grid Mode ?>
<div>
<?php $_collectionSize = $_productCollection->count() ?>
    <?php $i=0; foreach ($_productCollection as $_product): ?>
        <?php if($i++%7==0): ?>
            	<div id="slider">
            	<ul>
			    <?php endif ?>
			            <li><div id="featured-product"color: rgb(0, 0, 0); font-weight: bold;"><?php echo $i ?>">
			<div></div>
			<div>  
		<div style="width:270px;float:left;">
			                    <h2>Featured Product</h2>

			        <?php echo $this->htmlEscape($_product->getName()) ?><br>
			        <?php echo $this->htmlEscape($_product->getDescription()) ?>
			        <span><?php echo $this->getPriceHtml($_product, true) ?></span>
			        <p><?php echo $_product->getDescription() ?></p>
			        <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>"><img src="skin/frontend/3graces/default/images/hp_moredetails_btn.gif"></a>

			 </div></div>
            <div style="width:150px;float:left;">
                    <div><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>">
                        <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(90, 90); ?>" width="90" height="90" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" />
                    </a>  </div>              
		    </div>
		    			<div /></div>

		    <?php if ($i%7==0 && $i!=$_collectionSize): ?>

		    <?php endif ?>
		    	<div></div>
				</div></li>
    <?php endforeach ?>
    		    </ul>
		    </div>

    <script type="text/javascript">decorateGeneric($$('.grid-row'), ['last', 'odd', 'even']);</script>
</div></table>
<?php endif; ?>

Step 3: Add necessary files to /js directory which is located at the root.
If it doesnt already exist, create a /jquery directory within the /js directory. So your path will look like this: root/js/jquery. Add the following files to the new directory.

  • easySlider1.7.js
  • jquery.1.2.3.js
  • add jquery no conflict which prevents jQuery from screwing up prototype which is built into Magento. Make sure that it is added to the very end of the jQuery library file.
jQuery.noConflict();



Step 4: Update page.xml to reflect new /js files that were added. The path to page.xml is: /app/design/frontend/yourtheme/layout/page.xml

<action method="addJs"><script>jquery/jquery.js</script></action>
<action method="addJs"><script>jquery/easySlider1.7.js</script></action>

Step 5: Update header.phtml to call Slider function. The path to header.phtml is: /app/design/frontend/yourtheme/template/page/html/header.phtml

<script type="text/javascript">
jQuery(document).ready(function(){	
	jQuery("#slider").easySlider({
		auto: true,
		continuous: true,
		numeric: true,
		speed: 		1000
	});
});
</script>

Step 6: Add the featured products block to your homepage using the Magento CMS. The category ID can be obtained from the category ID of the featured products category that you setup in Step 1.

{{block type="catalog/product_list" category_id="173" template="catalog/product/featured-products.phtml"}}

Voila! You now should have a featured products slider powered by jQuery and Easy Slider on your homepage. Any products that you add to the featured products category, will show up in this slider. And each subsequent product that is added, will increase the numbered navigation along the bottom.

Comments

2 Comments on 6 Steps to creating a featured products jQuery slider for Magento

  1. silvers on Wed, 12th May 2010 8:44 am
  2. hey, i came across this tutorial via google and have been going through it. i thought i had done it right but it seems that something isn’t working. when i view my source the page seems to be looking for the jquery files and the featured section seems to be set up correctly but it’s not working.

    i was wondering if you would mind helping me quickly please? I would really appreciate it. my websites is http://www.allthebestvids.com/magento. i don’t know what i have done wrong!!

    Thanks in advance!!

  3. Ros on Wed, 17th Nov 2010 11:00 pm
  4. Thank you.

Tell me what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!





*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image