Featured products on Magento frontpage
Note: This is one of our older posts that describes how to add featured product to the Magento home page. Meanwhile, we developed a Magento Community extension: Featured Products by Inchoo. We advise you to use it with Magento Connect in case you need featured products functionality.
Old article content is below:
This tutorial was developed with the help from brandondrew‘s Magento wiki post How To Create a Featured Product. Original tutorial placed featured products in each category to the top of category display. This one will place them to the Magento frontpage as I believe this is something many users will require.
What is featured product?
The Featured Product is a product with an attribute added from the administrative UI. When the administrator selects “Yes” in the “Featured” attribute, that product will be displayed in a content block on the category page.
Take a look at TeraFlex Suspensions to see this work in action on live site.
Step-by-step guide
Step 1: Create new Featured attribute
Create a new attribute by going to Catalog > Attributes > Manage Attributes > Add New Attribute.
Attribute Properties
- Attribute Identifier: featured
- Scope: Store View
- Catalog Input Type for Store Owner: Yes/No
- Unique Value (not shared with other products): No
- Values Required: No
- Input Validation for Store Owner: None
- Apply To: All Product Types
Front End Properties
- Use in quick search: No
- Use in advanced search: Yes
- Comparable on Front-end: No
- Use In Layered Navigation (Can be used only with catalog input type ‘Dropdown’): No
- Visible on Catalog Pages on Front-end: Yes
Manage Label/Options
- Default: Featured Product
- English: Featured Product
Save the new attribute and go to Catalog ? Attributes ? Manage Attributes Sets to add the attribute to the default feature set.
Step 2: Create new block class that will instantiate the featured product
Create a new file, and directories: app/code/local/MyCompany/Catalog/Block/Product/Featured.php
<?php
class MyCompany_Catalog_Block_Product_Featured extends Mage_Catalog_Block_Product_Abstract
{
public function getFeaturedProducts() {
$resource = Mage::getSingleton('core/resource');
$read = $resource->getConnection('catalog_read');
$productEntityIntTable = (string)Mage::getConfig()->getTablePrefix() . 'catalog_product_entity_int';
$eavAttributeTable = $resource->getTableName('eav/attribute');
$categoryProductTable = $resource->getTableName('catalog/category_product');
$select = $read->select()
->distinct(true)
->from(array('cp'=>$categoryProductTable), 'product_id')
->join(array('pei'=>$productEntityIntTable), 'pei.entity_id=cp.product_id', array())
->joinNatural(array('ea'=>$eavAttributeTable))
->where('pei.value=1')
->where('ea.attribute_code="featured"');
$res = $read->fetchAll($select);
return $res;
}
}
?>Step 3: Extend Mage_Page_Block_Html
Create a new file, and directories: app/code/local/MyCompany/Page/Block/Html.php
<?php
class MyCompany_Mage_Page_Block_Html extends Mage_Page_Block_Html
{
public function getFeaturedProductHtml()
{
return $this->getBlockHtml('product_featured');
}
}Step 4: Add new blocks to the app/etc/local.xml
Add the following inside the config global tag:
<blocks>
<catalog>
<rewrite>
<product_featured>MyCompany_Catalog_Block_Product_Featured</product_featured>
</rewrite>
</catalog>
</blocks>Step 5: echo featured products HTML
Place the following code to the file: app/design/frontend/default/default/template/catalog/product/featured.phtml
<?php $featured_products = $this->getFeaturedProducts(); ?>
<?php shuffle($featured_products); ?>
<div class="box recently" style="padding-left:15px; padding-right:15px;">
<h3><?php echo $this->__('Featured Products') ?></h3>
<div class="listing-type-grid catalog-listing">
<?php $_collectionSize = count($featured_products) ?>
<table cellspacing="0" class="recently-list" id="product-list-table">
<?php
$i=0;
foreach ($featured_products as $_res): ?>
<?php $_product = Mage::getModel('catalog/product')->load($_res['product_id']); ?>
<?php if ($i++%3==0): ?><tr><?php endif ?>
<td>
<div>
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>">
<img class="product-image" src="<?php echo $this-/>helper('catalog/image')->init($_product, 'small_image')->resize(135, 135); ?>" width="135" height="135" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" />
</a>
</div>
<p>
<a class="product-name" href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>)"><?php echo $this->htmlEscape($_product->getName()) ?></a>
</p>
<?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
</td>
<?php if ($i%3==0 && $i!=$_collectionSize): ?></tr><?php endif ?>
<?php endforeach ?>
<?php for($i;$i%3!=0;$i++): ?>
<td class="empty-product"> </td>
<?php endfor ?>
<?php if ($i%3==0): ?> <?php endif ?>
</table>
<script type="text/javascript">decorateTable('product-list-table')</script>
</div>
</div>Step 6: Add Featured Products block to the frontpage
As the last step, you have to place featured product box to the frontpage. So, go to Magento administration to CMS > Manage Pages and select home page (or any other if you wish to place featured products in separate page)
Place the following line in Content area:
{{block type="catalog/product_featured" name="product_featured" as="product_featured" template="catalog/product/featured.phtml}}
131 comments
q-pain can you post files please ?
nice, works like a charm. and gives me a deeper insight the magento-system. thanks!
Hi Tomislav Bilic,
Can you just post the files please. Im getting some troubles installing this.
appreciate your time.
Hi scyllar,
Please repost the link cause the download limit has been reached. Thanks for your help.
There are something messed up in the codes!
Please follow this strictly to get it working.
NOTE: UPPERCASE AND LOWERCASE MATTERS IN THESE CODES.
1. The attribute. This step is exactly same as the tutorial. I just make it shorter.
-> Create new attribute with the following settings:
–> Code: fetured
–> Input type: Yes/No
–> Advanced search: Yes
–> Visible in Frontend: Yes
–> Label: Featured Product
(Please leave the other factors of the attribute untouched. )
-> Add the attribute to the attribute sets. You may add this attribute to all attribute sets as you like.
2. Create folders and download the corresponding files:
Note: uppercases and lowercases matter! If you have downloaded a file with wrong extension (for example, Featured.php.html instead of Featured.php, please correct it mannually. This might be added by rapidshare.com. This version is also the same but you won’t suffer from code mess.
–> app/code/local/MyCompany/Catalog/Block/Product/Featured.php
file url: http://rapidshare.com/files/194998180/Featured.php.html
–> app/code/local/MyCompany/Page/Block/Html.php
file url:http://rapidshare.com/files/194998181/Html.php.html
–>app/design/frontend/default/default/template/catalog/product/featured.phtml
file url: http://rapidshare.com/files/194998182/featured.phtml.html
3. The modifications to existing files:
–> same as “Step 4: Add new blocks to the app/etc/local.xml” above.
–> same as “Step 6: Add Featured Products block to the frontpage” above.
Please make sure you use the “copy to clipboard” appeared above the code area to avoid trouble.
I got it working on V1.2.1.
Not able to configure featured product for home page. Can you please help me on this. I created feature attribute and put this under “Default” attribute set with Featured. Now, i also put the code packet provided in step 6 under content area of home page. But nothing happen. Can you please help me understand on this. I am using magento 1.1.2
having run through this and faced issues I suggest downloading the post using the post from Talski on 19th October, @ 7.23
[quote]
Talski Said on October 19th, 2008 at 7:23
for those who failed to,
the home page code:
{{block type=”catalog/product_featured” name=”product_featured” as=”product_featured” template=”catalog/product/featured.phtml”}}
and the others files http://rapidshare.com/files/155405678/magento.zip
[/quote]
1. download the rapidshare files.
2. Backup your local.xml file before hand. Then refer to the backup for the key, host, username, password, dbname and active.
3. copy all new files over, into appropriate directories as detailed in the original post
done .. 😉
ii) Line 22 : && should be replaced by &&
Hey, thanks for this brilliant code, just so you know it still works brilliantly on Magento ver. 1.2.0.2, except for this : app/design/frontend/default/default/template/catalog/product/featured.phtml which should be replaced by (mentioned above if I’m not mistaken)
i) Line 16 : <img class=”product-image” src=”helper(‘catalog/image’)->init($_product, ‘small_image’)->resize(135, 135); ?>” width=”135″ height=”135″ alt=”htmlEscape($_product->getName()) ?>” />
ii) Line 22 :
thanks for the tutorials
Does this tutorial works with 1.2 ?
There is an extension for featured products: http://www.magentocommerce.com/module/733/featured-products-by-aheadworks
I had problems with different store views showing same featured products. I added
->where(‘pei.store_id=’ . Mage::app()->getStore()->getId())
to my Featured.php.
Skadoosh! Works now!
Thanks!
Yes I’ve had the same issue above, I’ve checked the code and also tried to view some other examples but no success at least with this tutorial on Magento 1.1.8
Any Ideas what might be the issue?
I too spent hours making sure every bit of code was correct and each file was in the proper place, but still nothing on the home page. Any idea as to what we are missing? I suspect that it is some configuration issue in the admin console (categories maybe?). Can you give us some information on just what needs to be in place for this to work. Thanks!
Nope.. WP seems to have messed with the code corrections.. just look at those line numbers and make you should be able to see what needs correcting.. assuming you know PHP..
Running 1.1.6 and got this going no problem with the instructions above.. For those having issues, just check the code in your own files.. for example in step 5 I had to correct all the php open tags, from “< ?php” to “helper(‘catalog/image’)” needs to be “$this->helper(‘catalog/image’)”
line 22 “&&” needs to be “&&”
line 27 “ ” needs to be ” ”
I hope the doesnt mess up these correction..
I do have a question as well.. How would I ge about getting an RSS feed of the featured products?? Thanks!!
Hello Everybody,
I have followed this tutorial a couple of times and also use the downloaded zip file but it is not working on magento 1.6 and nothing is appearing on home page!!
Let me know anybody has done it on 1.6
This is very cool – thanks for taking the time to document this.
I have an issue in that my product is in one category only and I would like it to include the path information as well ie site.com/products/trousers/brown-cool-trousers.html
Do you know if this is possible or if it should do it anyway and I have set it up incorrectly?
Cheers
Running Magento 1.1.6 and this doesn’t work.
I followed the tutorial exactly, when that didn’t work I downloaded the zipfile mentioned in the comments and used those files. Still nothing.
I gotta say, for all the power of Magento, it has to be one of the biggest hassles to work with.. The fact that it doesn’t already have some sort of featured product capability is highly annoying.
I tried to follow this the best I could, but nothing comes up on my home page. I am not sure what I am doing wrong, but I swear I have everything perfect. Any ideas of what I may be doing wrong?
works perfectly in 1.1.6, thanks for this tutorial…
Can anyone confirm that setting up a category called featured works on 1.1.6?
Thanks, love this feature. Downloaded the zip file and setup as per instructions, confirmed working in 1.1.5. If you are having problems getting this working, make sure that the ‘feature product/s’ is in a category. Took me a while to figure out that’s why it wasn’t working for me, but all good now. Thanks again.
I don’t know why but now it run !!!!
Anyone can ask to me how one passes the block featured in the sidebar with Juste a random article of available in this block ?
Hi everybody, i have fallow this tuto on magento 1.6 and it doesn’t work…. none appear on homepage!!
I have do this tuto three times and …..
HELP HELP HELP
Hi,
Fantastic article. Its a very boosting step for starter like me in magento. Please if you could explain more the line like
1) $eavAttributeTable = $resource->getTableName(‘eav/attribute’); AND
2) $categoryProductTable = $resource->getTableName(‘catalog/category_product’);
$select = $read->select()->distinct(true)->from(array(‘cp’=>$categoryProductTable), ‘product_id’)->join(array(‘pei’=>$productEntityIntTable), ‘pei.entity_id=cp.product_id’, array())->joinNatural(array(‘ea’=>$eavAttributeTable))->where(‘pei.value=1’)->where(‘ea.attribute_code=”featured”‘);
for those who failed to,
the home page code:
{{block type=”catalog/product_featured” name=”product_featured” as=”product_featured” template=”catalog/product/featured.phtml”}}
and the others files http://rapidshare.com/files/155405678/magento.zip
Isnt there a better way to do this using the static blocks in the CMS? Then you can insert using drop downs.
Thanks man. I also tested it with Magento 1.1.6 and it worked well. Some guys from previous comments told me that it doesn’t work with latest version, but looks like they missed something.
Cheers man. If you have some URL where we can see it in action, let me know.
Man, thanks A LOT for this tuto!
Works perfectly, in Magento 1.1.6!
Thanks again!
Hi
Could we get an update of the instructions so it works with version 1.1.6 please
denis
hi,
for me not work, I use the 1.0.19870.4 version of magento
I got the following message:
Warning: include (Mage \ Core \ Templates \ Resource &. Php) [function.include]: failed to open stream: No such file or directory in C: \ wamp \ www \ magento_carla \ app \ code \ core \ Mage \ Core \ functions.php on line 44.
You have an idea for me?
Thank
I am still getting an error. I am not sure if the folder creation under app/code is important and if they are not there do we create just the 2 folders that are defined in step 2 and 3 ? I replace MyCompany with the name of my company at all places. Please let me know what cud be the issue. I am using Magento Version 1.6
Below is the error i recieve.
getConnection(‘catalog_read’); $productEntityIntTable = (string)Mage::getConfig()->getTablePrefix() . ‘catalog_product_entity_int’; $eavAttributeTable = $resource->getTableName(‘eav/attribute’); $categoryProductTable = $resource->getTableName(‘catalog/category_product’); $select = $read->select() ->distinct(true) ->from(array(‘cp’=>$categoryProductTable), ‘product_id’) ->join(array(‘pei’=>$productEntityIntTable), ‘pei.entity_id=cp.product_id’, array()) ->joinNatural(array(‘ea’=>$eavAttributeTable)) ->where(‘pei.value=1’) ->where(‘ea.attribute_code=”featured”‘); $res = $read->fetchAll($select); return $res; } } ?> getConnection(‘catalog_read’); $productEntityIntTable = (string)Mage::getConfig()->getTablePrefix() . ‘catalog_product_entity_int’; $eavAttributeTable = $resource->getTableName(‘eav/attribute’); $categoryProductTable = $resource->getTableName(‘catalog/category_product’); $select = $read->select() ->distinct(true) ->from(array(‘cp’=>$categoryProductTable), ‘product_id’) ->join(array(‘pei’=>$productEntityIntTable), ‘pei.entity_id=cp.product_id’, array()) ->joinNatural(array(‘ea’=>$eavAttributeTable)) ->where(‘pei.value=1’) ->where(‘ea.attribute_code=”featured”‘); $res = $read->fetchAll($select); return $res; } } ?>
Fatal error: Class ‘Mage_Catalog_Block_Product_Featured’ not found in /Applications/MAMP/htdocs/magento/app/code/core/Mage/Core/Model/Layout.php on line 451
Save yourself some time.
Just create a new category called featured and put it under root instead of root catalog so it doesn’t shop up in the category nav.
Make sure the products you want are in this category as well and note the category id (from the url in the admin section).
Then use the following code to insert the block on your home page (My featured products category had an id of 36)
{{block type=”catalog/product_list” category_id=”6″ template=”catalog/product/list.phtml”}}
You could also copy the list file and make the necessary changes so the featured products conform to your list. Save the file as featured_list.phtml or something and then use template=”catalog/product/featured_list.phtml”
Seems a bit easier to me than going through those steps above.
Hi marek,
Thanks for this. Corry for code issues. That was all copy/paste, but the WordPress transfers the code to HTML variants and the display can be invalid with some characters. I must find some other WordPress plugin to insert code.
I’m very glad that it works finally.
Hey Tom, it’s working in 1.1.3 – thanks a bunch!!
Minor issues:
1. There is a bug in featured.phtml, line 16 (should be: this->helper)
2. Step 6.: isn’t there a ” needed at the end of catalog/product/featured.phtml (works without it anyway)
3. Products show up in random order (from your code it looks like it is how select works rather than intentional?) – which may or may not be a good thing.
4. Prices are missing (it’s probably intentional) – but that should be very easy to add.
Anyhow, great work. Would love to know your opinions on 3. and 4., too.
-marek
Hi Zerax,
Yes, I did update it just yesterday. It should work now with latest version.
did you have updated the post for the latest version ?
thks
I also tried this, and couldn’t make it work. Nothing appeared on the homepage. One more thing is that, when I create Attribute, the combo box “Catalog Input Type for Store Owner” is disabled and stick with Text Field, so I couldn’t choose Yes/No Type.
I’m using version 1.1.3.
Anyone had this problem before? :-S
Thanks all
Hi guys,
You are correct, the instructions don’t work with the latest version of Magento. I will update the post later today with the new instructions. Live example is visible on: http://www.teraflex.biz/
First of all, quotation mark is missing in Step. 6:
{{block type=”catalog/product_featured” name=”product_featured” as=”product_featured” template=”catalog/product/featured.phtml”}}
Same here, followed the instruction exactly, but after adding the block in the CMS editor nothing shows up.
I tried this too, couldnt get it working.
Hi,
i’m bigining in Magento, and i try to execute this code, but it doesn’t work,
and i dont’ now why :S
thank you
Hi guys,
I guess it would be the best that I review the code once again to be 100% sure that it works. Looks like I missed something in the explanation because it doesn’t work to some for some of you. 😉
Hi,
does this work with Magento 1.1.2 ??
Thank you
for the past two days i am using your feature product tutorial. After doing every thing as said
i still get an error
Fatal error: Class ‘Mage_”catalog_Block_Product_Featured”’ not found in /var/www/html2/magento8/app/code/core/Mage/Core/Model/Layout.php on line 345
please help me ASAP!
Peter
6/8/2008
I’m trying to make it work, but nothing happens. I followed all the steps, but I cannot see anything on my homepage… I’m using Magento 1.1.1
What could be wrong?
Thanks
Bravo, prvi ste u Hrvatskoj koji uo?avate fantasti?an potencijal Magentoa, a ovim blogom pomažete prvim korisnicima da ga koriste na kreativniji na?in.
Za moju djelatnost je važna primjena novih mogu?nosti v1.1.1 i to Bundled products i Virtual Products. O tome još nikakvog tutoriala nema. Možete li Vi dati i tu svoj doprinos?