Featured products on Magento frontpage

Featured Image

Featured Products by Inchoo blog articleNote: 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 &amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp; $i!=$_collectionSize): ?>
</tr>
< ?php endif ?>
< ?php endforeach ?>
< ?php for($i;$i%3!=0;$i++): ?>
<td class="empty-product">&amp;amp;amp;amp;amp;nbsp;</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}}

Note: Why you copy/paste the code, be sure that you replace < ?php with proper openings. My existing WordPress module is not perfect.

106
Top

Enjoyed this post?

Subscribe to our RSS Feed, Follow us on Twitter and spread it to your friends!

Author

Tomislav is an owner and CEO of Inchoo. Enjoys traveling, traditional cuisine (from most cultures), good wine and strong rakija.

Other posts from this author

Discussion 106 Comments

1 2 3
Add Comment
  1. 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?

  2. Alessandro

    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

  3. Peter John

    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

  4. reda

    Hi,

    does this work with Magento 1.1.2 ??

    Thank you

  5. Tomislav Bilic

    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. ;)

  6. reda

    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

  7. I tried this too, couldnt get it working.

  8. marek

    Same here, followed the instruction exactly, but after adding the block in the CMS editor nothing shows up.

  9. marek

    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”}}

  10. Tomislav Bilic

    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/

  11. Ky Nguyen

    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

  12. Zerax

    did you have updated the post for the latest version ?

    thks

  13. Tomislav Bilic

    Hi Zerax,
    Yes, I did update it just yesterday. It should work now with latest version.

  14. marek

    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

  15. Tomislav Bilic

    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.

  16. Ben

    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.

  17. Naresh Vajawat

    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

  18. ntk

    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

  19. Hi

    Could we get an update of the instructions so it works with version 1.1.6 please

    denis

  20. Vitor Braga

    Man, thanks A LOT for this tuto!

    Works perfectly, in Magento 1.1.6!

    Thanks again!

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

  22. Isnt there a better way to do this using the static blocks in the CMS? Then you can insert using drop downs.

  23. Talski

    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

  24. Haroon Ali Shah

    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”‘);

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

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

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

  28. martinus

    Can anyone confirm that setting up a category called featured works on 1.1.6?

  29. Vibhor

    works perfectly in 1.1.6, thanks for this tutorial…

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

  31. Carl

    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.

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

  33. CVivek

    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

  34. 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 “&nbsp;” 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!!

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

  36. Mal Payne

    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!

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

  38. 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!

  39. Nemo
  40. Hisham

    Does this tutorial works with 1.2 ?

  41. vikramjeet

    thanks for the tutorials

  42. jillies

    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 :

  43. jillies

    ii) Line 22 : && should be replaced by &&

  44. 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 .. ;)

  45. Kuldip gayan

    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

  46. scyllar

    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.

  47. David

    Hi scyllar,

    Please repost the link cause the download limit has been reached. Thanks for your help.

  48. David

    Hi Tomislav Bilic,

    Can you just post the files please. Im getting some troubles installing this.

    appreciate your time.

  49. nice, works like a charm. and gives me a deeper insight the magento-system. thanks!

  50. david

    q-pain can you post files please ?

1 2 3

Add Your Comment

Please wrap all source codes with [code][/code] tags.
Top