6 Steps to creating a featured products jQuery slider for Magento
01 Nov 2009
Posted by Jake Rutter as Magento, Magento Tutorials, Open Source, Web
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.
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 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; ?>
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.
Category Magento, Magento Tutorials, Open Source, Web
You can follow any responses to this entry through the RSS 2.0 feed.
Mike
November 2nd, 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 3rd, 2009 at 2:10 am
Nice tutorial!
downrodeo
November 4th, 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! :)
web designing
November 6th, 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 11th, 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 17th, 2009 at 1:59 am
Did I miss the image files?
Web design Company
December 9th, 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 17th, 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?
Redstage Magento
March 2nd, 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!
Reg
April 29th, 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!
rita
May 11th, 2010 at 2:16 am
even when i have added products to featured category itssaying there are no products found..
Erin
May 16th, 2010 at 9:51 pm
This is great. Can you provide instructions for Magento 1.4?
Sean
May 29th, 2010 at 10:04 am
Can anyone confirm if this does or does not work for 1.4?
Rod
May 31st, 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 1st, 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 4th, 2010 at 9:42 am
anybody getting this woking in M1.4?
wyatt
June 15th, 2010 at 5:43 am
it not working on google chrome.
products in the category are being displayed on the page simultaneously.
Nixx
June 19th, 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
Tom Bathgate
June 25th, 2010 at 8: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 25th, 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 ?>
fawad
June 30th, 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/"
jarus
July 6th, 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 20th, 2010 at 11: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
Smith
July 22nd, 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 24th, 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.
sharon dviri anaki
August 5th, 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 7th, 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
sunil
August 9th, 2010 at 4:02 am
Like jquery.js and easySlider1.7.js jquery-1.2.3.js file need to work
Edson Sacramento
August 13th, 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 26th, 2010 at 7:58 am
Thank you sooooo much!! Working great with Magento 1.4.1.10 (=
Heiliger BimBam
August 26th, 2010 at 1:05 pm
To the 1.4 user's: Change getDescription() to getShortDescription() .. to make the descrition work.