carousel jquery slider for magento

 

Banner Slider by Magestore

 

NivoSlider http://www.magentocommerce.com/magento-connect/free-youama-jquery-nivo-slider.html

NivoSlider, a free jQuery powered slider extension for Magento, allows you to display a slider on any page of your Magento store, and it enables you

6 Steps to creating a featured products jQuery slider for Magento

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:

• jQuery 1.2.3 (although it may work fine with 1.3)
• Easy Slider 1.7
• Magento

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:

001

<?php

002

/**

003

* Magento

004

*

005	* NOTICE OF LICENSE

006

*

007	* This source file is subject to the Open Software License (OSL 3.0)

008	* that is bundled with this package in the file LICENSE.txt.

009	* It is also available through the world-wide-web at this URL:

010	* http://opensource.org/licenses/osl-3.0.php

011	* If you did not receive a copy of the license and are unable to

012	* obtain it through the world-wide-web, please send an email

013	* to license@magentocommerce.com so we can send you a copy immediately.

014

*

015	* DISCLAIMER

016

*

017	* Do not edit or add to this file if you wish to upgrade Magento to newer

018	* versions in the future. If you wish to customize Magento for your

019	* needs please refer to http://www.magentocommerce.com for more information.

020

*

021	* @category   design_default

022	* @package    Mage

023	* @copyright  Copyright (c) 2008 Irubin Consulting Inc. DBA Varien (http://www.varien.com)

024	* @license    http://opensource.org/licenses/osl-3.0.php  Open Software License (OSL 3.0)

025

*/

026

?>

027

<?php

028

/**

029	* Product list template

030

*

031	* @see Mage_Catalog_Block_Product_List

032

*/

033

?>

034

035

<style>

036	.featured-bg {

037	background: url(/skin/frontend/3graces/default/images/hp_featured_product_bg.gif);

038	width: 146px;

039	height: 144px;

040

}

041

042	.featured-bg div {

043	position: relative;

044	top: 10px;

045	left: 20px;

046

}

047

048	.featured-bg div img {

049	width: 100px;

050

}

051

052	#slider ul, #slider li {

053	margin: 0;

054	padding: 0;

055	list-style: none;

056

}

057

058	#slider li {

059	width: 470px;

060	height: 175px;

061	overflow: hidden;

062

}

063

064	span#prevBtn {

065

066

}

067

068	span#nextBtn {

069

070

}

071

072	/* numeric controls */

073

074	ol#controls {

075	margin: .1em 0;

076	padding: 0 0 5px 0;

077	height: 20px;

078

}

079

080	ol#controls li {

081	margin: 0 5px 0 0;

082	padding: 0;

083	float: left;

084	list-style: none;

085	height: 20px;

086	line-height: 20px;

087

}

088

089	ol#controls li a {

090	float: left;

091	height: 20px;

092	line-height: 20px;

093	border: 1px solid #ccc;

094	background: #EDE4E7;

095	color: #555;

096	padding: 0 5px;

097	text-decoration: none;

098

}

099

100	ol#controls li.current a {

101	background: #8B3892;

102	color: #fff;

103

}

104

105	ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus {

106	outline: none;

107

}

108

109	span.price {

110	font-size: 14px !important;

111

}

112

113	/* // Easy Slider */

114

</style>

115

116	<?php $_productCollection=$this->getLoadedProductCollection() ?>

117	<?php if(!$_productCollection->count()): ?>

118	<div class="note-msg">

119	<?php echo $this->__('There are no products matching the selection.') ?>

120

</div>

121	<?php else: ?>

122

123	<?php // Grid Mode ?>

124	<div class="listing-type-grid catalog-listing">

125	<?php $_collectionSize = $_productCollection->count() ?>

126	<?php $i=0; foreach ($_productCollection as $_product): ?>

127	<?php if($i++%7==0): ?>

128	<div id="slider">

129

<ul>

130	<?php endif ?>

131	<li><div id="featured-product" class="tab<?php echo $i ?>">

132	<div class="featured-product-top"></div>

133	<div class="featured-product-body">

134	<div style="width:270px;float:left;">

135	<h2>Featured Product</h2>

136

137	<?php echo $this->htmlEscape($_product->getName()) ?><br>

138	<?php echo $this->htmlEscape($_product->getDescription()) ?>

139	<span class="featured-price"><?php echo $this->getPriceHtml($_product, true) ?></span>

140	<p><?php echo $_product->getDescription() ?></p>

141	<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>

142

143	</div></div>

144	<div style="width:150px;float:left;" class="featured-bg">

145	<div><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>">

146	<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()) ?>" />

147	</a>  </div>

148

</div>

149	<div class="clr" /></div>

150

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

152

153	<?php endif ?>

154	<div class="featured-product-btm"></div>

155	</div></li>

156	<?php endforeach ?>

157

</ul>

158

</div>

159

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

161	</div></table>

162	<?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.

1	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

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

2	<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

01	<script type="text/javascript">

02	jQuery(document).ready(function(){

03	jQuery("#slider").easySlider({

04	auto: true,

05	continuous: true,

06	numeric: true,

07	speed:      1000

08

});

09

});

10

</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.

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.