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!

3graces.com Demo

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]
<?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 class="note-msg">
<?php echo $this->__(‘There are no products matching the selection.’) ?>
</div>
<?php else: ?>

<?php // Grid Mode ?>
<div class="listing-type-grid catalog-listing">
<?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" class="tab<?php echo $i ?>">
<div class="featured-product-top"></div>
<div class="featured-product-body">
<div style="width:270px;float:left;">
<h2>Featured Product</h2>

<?php echo $this->htmlEscape($_product->getName()) ?><br>
<?php echo $this->htmlEscape($_product->getDescription()) ?>
<span class="featured-price"><?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;" class="featured-bg">
<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 class="clr" /></div>

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

<?php endif ?>
<div class="featured-product-btm"></div>
</div></li>
<?php endforeach ?>
</ul>
</div>

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

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.

[js]
jQuery.noConflict();
[/js]

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
[html]
<action method="addJs"><script>jquery/jquery.js</script></action>
<action method="addJs"><script>jquery/easySlider1.7.js</script></action>
[/html]

Step 5: Update header.phtml to call Slider function. The path to header.phtml is: /app/design/frontend/yourtheme/template/page/html/header.phtml
[js]
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#slider").easySlider({
auto: true,
continuous: true,
numeric: true,
speed: 1000
});
});
</script>
[/js]

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.
[html]
{{block type="catalog/product_list" category_id="173" template="catalog/product/featured-products.phtml"}}
[/html]

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.

Categories: MagentoOpen SourceWeb

65 thoughts on “6 Steps to creating a featured products jQuery slider for Magento”

Mike · November 2, 2009 at 1:48 am

Jake, this looks great. Will give it a shot this week on my test store and then hope to add to production. I had tried jquery a few months ago, but wasn't aware of the no-conflict mode, looking forward to trying this out.

Thanks
Mike

Jason Palmer · November 3, 2009 at 2:10 am

Nice tutorial!

downrodeo · November 4, 2009 at 7:55 am

Finally! Thanks a lot for this dude. Just a quick question: is there a way I could make it feature 3 products instead of 1?

Thank you, life saver! 🙂

    Jacalyn Eggett · September 30, 2010 at 6:32 pm

    I'm also looking for a way to view 3 products within the same window – but then scroll next/prev one product at a time! did you ever figgure this out?? if so, would you please please please help 🙂

web designing · November 6, 2009 at 9:35 am

Its a beautiful post for the developers and i have interest in the programming. Your post will help me in future so thanks for sharing this useful post!

Jeremiah Lewis · November 11, 2009 at 8:16 am

I'm rather curious how you got this to work happily with the prototype engine. I had tried using both easyslider and anything slider and neither of them worked until I removed the ref. to prototype.js. Which is, at this stage in Magento's life, not a usable option.

I have all the usual no_conflict jazz implemented. Nothing worked. I tried switching order of script loading and nothing worked except when I removed prototype.js from the page.xml call. Then both easyslider and anythingslider worked like a charm.

joefranks · November 17, 2009 at 1:59 am

Did I miss the image files?

Web design Company · December 9, 2009 at 12:47 pm

HI

Great information about php tutorial and magento is a great open-source commerce package, but Im a little surprised that featured products isn’t a feature built-in

razn8 · December 17, 2009 at 6:20 pm

Have you tested 3graces.com in IE7? It is not displaying properly in IE7? Internet Explorer 7 is apparently ignoring the overflow:hidden, so all the products in the category are being displayed on the page simultaneously. It works perfect in Firefox/IE8/Safari, but it obviously must also work in IE7. I have spent some time troubleshooting this, but to no avail. Is anyone aware of a solution?

    Reg · April 29, 2010 at 10:14 pm

    razn8,
    position: relative on the element with the overflow: hidden declaration (and width must also be stated of course) fixed the overflow issue in IE6 & 7 for me. Don't ask me why!

      ben · December 14, 2010 at 2:54 pm

      hi reg, sorry i'm totaly newbie. Where should i add this elements?
      Thanks

Redstage Magento · March 2, 2010 at 8:28 pm

This is excellent! I like using jQuery for sliding content and lightboxes. When implementing into Magento, traditionally it hasn't been a dynamically controlled feature but instead it was a series of graphics. This is an great tutorial, Thanks!

rita · May 11, 2010 at 2:16 am

even when i have added products to featured category itssaying there are no products found..

Erin · May 16, 2010 at 9:51 pm

This is great. Can you provide instructions for Magento 1.4?

Sean · May 29, 2010 at 10:04 am

Can anyone confirm if this does or does not work for 1.4?

Rod · May 31, 2010 at 12:12 am

Does anyone know how to implement mousewheel instead of slider?
Here is a plugin.

plugins.jquery.com/project/mousewheel
This also works with jquery 1.3.2. I think it would be great for anyone for magento users including Magento1.4.
I'm stuck with this.

M14 · June 1, 2010 at 11:01 am

i tries this in M1.4 and it didn't work. I got the error message

Fatal error: Call to a member function getTypeInstance() on a non-object in …./app/code/core/Mage/Catalog/Block/Product/Abstract.php on line 74

which is produced through
{{block type="catalog/product_list" category_id="173" template="catalog/product/featured-products.phtml"}}
or the /featured-products.phtml

    M14 · June 4, 2010 at 9:42 am

    anybody getting this woking in M1.4?

wyatt · June 15, 2010 at 5:43 am

it not working on google chrome.
products in the category are being displayed on the page simultaneously.

Nixx · June 19, 2010 at 8:57 pm

Thank you very much for this lovely tutorial 🙂 It is working in Magento 1.4.1.0 like a charm.

NB: Note that in step 4 the included jquery file in the page.xml file is jquery.js, so make sure to rename your jquery-1.2.3.js file to jquery.js before you place it under the /js/jquery/ directory

    saleem · June 23, 2011 at 6:54 am

    Me also facing same Issue the slider is not showing up. I can see the products but no slider I am using magento 1.4.2.0 Any help.

    Advance thanks
    Saleem

Tom Bathgate · June 25, 2010 at 3:05 pm

This is great and just what I was looking for. It works fine for me in magento 1.4, only problem i'm having is that the when the slider gets to number 4 and 5, it shows 2 slides at the same time, and then the last 2 slides are blank.

Not quite sure what is going on with it, anybody got any thoughts?

    Tom Bathgate · June 25, 2010 at 8:13 pm

    Ah I figured it out, in the code
    <div id="slider">

      is inside the foreach loop, so there are multiple div id#sliders on the page causing problems. Change the for loop to:
      <div id="slider">

      <?php // Grid Mode ?>
      <?php $_collectionSize = $_productCollection->count() ?>
      <?php $i=0; foreach ($_productCollection as $_product): ?>
      <?php if($i++%7==0): ?>

      <?php endif ?>

      sandro · October 29, 2012 at 6:40 am

      the Bug is here: <?php if($i++%7==0): ?>

      If there are more than 7 products the script write a TAG that crash slider.

      Use this code:

      <?php $i=0; foreach ($_productCollection as $_product): ?>
      <?php if($i++%$_collectionSize==0): ?>
      <div id="slider">

      <?php endif ?>

fawad · June 30, 2010 at 3:13 pm

Hi,

Thanks for the great Tutorial.. I implemented everything but the slider is not showing up. I can see the products but no slider I am using magento 1.4.1.0 Any help.
below is the link
"http://konectsolutions.com/projects/webdevelopment/project6/mag/magento/index.php/slider/&quot;

jarus · July 6, 2010 at 6:20 am

hi , can anyone give me idea if i could get the products name on the buttons than to show the numbering?
any help would be very much appreciated..

paul · July 20, 2010 at 6:50 am

Hi its not working for me in magento 1.4.1.0
I just see the featured products below each other and no scrolling .

Anybody got this working under magento 1.4.1.0. or knows a slider effect that is working??

Kind regards,

Paul

    @aks301190 · February 3, 2012 at 1:11 am

    hey dude i m having the same problem..u got ny solution ??help….

Smith · July 22, 2010 at 8:53 pm

hi
I am completely new to this. Can someone tell me which file is referred to as the jQuery library file???
Any help much appreciated
Thanks

    jrutter · July 24, 2010 at 8:47 pm

    The jquery library can be downloaded from jquery.com – it is an external javascript file which you will need to place on your web server and reference in the head tags of your page.

    sunil · August 9, 2010 at 4:02 am

    Like jquery.js and easySlider1.7.js jquery-1.2.3.js file need to work

sharon dviri anaki · August 5, 2010 at 4:19 am

followed the six steps but no matter what cannot products in the category are being displayed on the page one beneath the other… any ideas?

sunil · August 7, 2010 at 8:29 am

i have followed all the step above .but it is not working for me in magento 1.4.0.1 please provide the suitable codes for magento 1.4.0.1 thanks

Edson Sacramento · August 13, 2010 at 5:30 am

Hello, thanks for sharing this information have been very useful!
I am using Magento 1.4.1.0 and I have two problems.
The main thing is that the description does not appear, I've listed the array and this field really does not make it. I tried using "$ this-> getProduct ()" but without success.
The second problem is that it does not work in IE 7, but that is acceptable to the Microsoft case.
If you can give help.

Thanks!

Heiliger BimBam · August 26, 2010 at 7:58 am

Thank you sooooo much!! Working great with Magento 1.4.1.10 (=

Heiliger BimBam · August 26, 2010 at 1:05 pm

To the 1.4 user's: Change getDescription() to getShortDescription() .. to make the descrition work.

animesh sheolikar · September 15, 2010 at 9:46 am

it is indeed a great tutorial .But in IE7 it gets break down.ie all products are shown in one line.if you could tell any
sol. for this .it will be terrific.

thanks,

nadshez · September 17, 2010 at 5:11 am

Thanks for this great tutorial. Its working for me in v1.4. I just wanted to share a 'problem' that i faced & which baffled me before I finally found out what was going wrong. My slider was working just fine when all of a sudden the contents products started getting mixed up & the container on the right shifted down. All this when I had made no changes to the code.

Basically what was happening was that this code allows or assumes that you would be using a max of 7 featured products (line 127) <?php if($i++%7==0): ?> .. so if you exceed that, the code basically creates another slider using div/ul. Solution is to either keep your products no more than 7 .. or raise the number to the max number of products that you would want to slide. Just don't get carried away with having number larger than required as you would be creating extra entries.

Small thing .. but it might save someone hours of debugging. Hope this helps. Thanks.

bhab · September 27, 2010 at 3:41 am

i am using magento 1.4.1.1 and have followed all the steps but the slider doesn't show. the products are displayed in the page one below another repeting the 'featured product' title.

sam · October 9, 2010 at 1:36 am

how to implement in magento v.1.4.0.1?

jennifer bertotti · October 13, 2010 at 10:58 am

same here, all im seeing is the products listed under each other, but NO SLIDER.

JoE · October 16, 2010 at 2:44 pm

Same here….

the products are displayed in the page one below another repeting the 'featured product' title.

?? 🙁

Laura · November 11, 2010 at 5:58 am

I have the same problem in the magento v.1.4. Somebody have said that it works, but HOW?????????

🙁

Chris · November 16, 2010 at 6:44 pm

This is great – but how would i feature this slider OUTSIDE of the 'content' area? So if i was to create a new reference in the template?

ben · December 14, 2010 at 2:52 pm

Hi, it works fine wih FireFox, but not with IE. Is there a patch or a solution?
Thanks!!!

vijay · January 9, 2011 at 1:12 am

Thanks for providing great tutorial but it not working in IE
so please advice hoe to resolved this

regards
Vijay

mox · February 20, 2011 at 2:44 pm

I'm stuck on the very last step

Step 6: Add the featured products block to your homepage using the Magento CMS.

how do i do this? (im very new to magento, so forgive my stupidity)

    R N Web Genius · March 30, 2011 at 1:02 am

    You had to go to admin panel. Under CMS->Pages, u can find the home page of your website. Then under content u had to put the code for your block.
    For Ex like:

    {{block type="catalog/product_list" name="home.catalog.product.list" alias="products_homepage" template="catalog/product/list.phtml"}}

saurabh · March 21, 2011 at 4:53 am

Thank you sooooo much, Nice work ..by You GUys..!! Working great with Magento 1.4.1.10 (=

Daniel · March 30, 2011 at 2:24 am

it's ok for me on 1.4.1 .
First i have no slider , but i modify jQuery("#slider").easySlider({ with $("#slider").easySlider({

and work's now.

Jack · April 20, 2011 at 10:46 am

does anyone tested on Magento 1.5.0.1??? I am also having same issue as most of them… doesn't show the slider..

I have follder every steps.. after i added to my home page… i don't see the slider appear.. I know it pushed down my other products.. … PLEASE HELPPPPPP

Mai Thanh · June 2, 2011 at 11:56 pm

Hi,

How do I add "Previous" and "Next" image buttons? e.g Previous 1 2 3 4 5 6 Next. Thanks

Fred · November 10, 2011 at 3:21 am

Another guy has updated the easyslider js, thought I would post it here to help others https://github.com/kflorence/jquery-easySlider

Molecule Clothing · December 24, 2011 at 1:48 am

I've actually been looking for this for a while, nice implementation, thanks for sharing the code.

Praful · January 30, 2012 at 2:45 am

Hello, How i cam set all categories in vertical menu like http://www.flipkart.com

Raghu · March 16, 2012 at 2:22 am

Thank you so much. working nice.Jst with this 6 steps i am getting slide.

Rafa R. B. · July 23, 2012 at 11:28 pm

Great post! It works well in Magento 1.4.1.1
Thank you very much. Hugs

Neelima · August 30, 2012 at 2:16 am

Thankssss…

jagjit · June 6, 2013 at 1:57 am

Thank you very much its Working with Magento 1.7x

Roger · September 5, 2013 at 5:19 am

I've discovered an excellent module with regard to opencart known as "Opencart Custom T-Shirt Design".
http://codecanyon.net/item/opencart-custom-tshirt

“Custom T-Shirt” Module is an open cart module which is used to design or customize T-shirts. By this module customers can design the t-shirt as per their need such as add Text , Number or Logo by different Color, Font Size, Alignment and many more.

KaizerZenos · June 11, 2014 at 9:00 am

Thank you very much.
This helped me alot.
I use bxSlider instead of Easy Slider.
Worked in Magento 1.8

elpas0 · December 10, 2014 at 7:49 am

Check product slider from NWDthemes – nwdthemes.com/extensions/product-slider/ . It allow to add responsive slider to showcase
your Bestsellers, Featured or Most viewed products in almost any place on site

Roshni · February 20, 2015 at 2:36 am

Thanks alot. This is what i am looking for….. Greate Job 🙂

Harbindra Singh · November 5, 2015 at 1:26 am

How to set particular number of product i.e from admin we write {{block type=”catalog/product_list” category_id=”173″ template=”catalog/product/featured-products.phtml” product_count=”8″}} means we want to slide only 8 product of that particular category (product_count=”8″) not all product so what should we do.

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Web

Angular JS Magazine on Flipboard

I have been working with AngularJS for about a year now, trying to learn as much as I can about this growing framework. It’s been a wild ride and I’m going to post a summary Read more…

GruntJS

My First GruntJS Plugin: Bust My Cache

GruntJS is a JavaScript Task runner that has been around for about 2+ year, at least as far as I can remember. I started playing around with GruntJS which uses Node.js about a year ago, Read more…

Top 5

Top 5 Articles : Week of November 25

During the the week of November 25th, I really started to dive into Angular JS. My top 5 articles of the week are mainly about AngularJS, an MVC framework by Google. #1 : AngularJS WebInspector Read more…