Featured products on Magento frontpage

Posted by Tomislav Bilic under Magento @ 22nd JUL 2008

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; $i!=$_collectionSize): ?>
</tr>
< ?php endif ?>
< ?php endforeach ?>
< ?php for($i;$i%3!=0;$i++): ?>
<td class="empty-product">&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.

35 Responses to “Featured products on Magento frontpage”

Slavko Kuljanac Said on August 1st, 2008 at 2:13

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?

Alessandro Said on August 1st, 2008 at 10:15

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

Peter John Said on August 6th, 2008 at 9:39

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

reda Said on August 11th, 2008 at 12:07

Hi,

does this work with Magento 1.1.2 ??

Thank you

Tomislav Bilic Said on August 11th, 2008 at 17:15

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.

reda Said on August 11th, 2008 at 17:29

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

Jake Rutter Said on August 16th, 2008 at 20:06

I tried this too, couldnt get it working.

marek Said on August 27th, 2008 at 7:15

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

marek Said on August 27th, 2008 at 7:23

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

Tomislav Bilic Said on August 27th, 2008 at 7:43

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/

Ky Nguyen Said on August 28th, 2008 at 3:52

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

Zerax Said on August 29th, 2008 at 10:52

did you have updated the post for the latest version ?

thks

Tomislav Bilic Said on August 29th, 2008 at 11:57

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

marek Said on August 29th, 2008 at 17:18

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

Tomislav Bilic Said on August 29th, 2008 at 17:49

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.

Ben Said on September 3rd, 2008 at 2:10

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.

Naresh Vajawat Said on September 20th, 2008 at 16:06

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

ntk Said on September 25th, 2008 at 17:26

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

denis Said on September 27th, 2008 at 21:07

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

denis

Vitor Braga Said on October 10th, 2008 at 17:52

Man, thanks A LOT for this tuto!

Works perfectly, in Magento 1.1.6!

Thanks again!

Tomislav Bilic Said on October 10th, 2008 at 18:41

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.

Jake Rutter Said on October 14th, 2008 at 1:32

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

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

Haroon Ali Shah Said on October 22nd, 2008 at 11:38

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

thibault Said on October 22nd, 2008 at 11:53

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

thibault Said on October 23rd, 2008 at 14:13

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 ?

Katrina Youngman Said on October 27th, 2008 at 8:44

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.

martinus Said on October 28th, 2008 at 9:05

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

Vibhor Said on October 31st, 2008 at 9:00

works perfectly in 1.1.6, thanks for this tutorial…

Jake Said on November 5th, 2008 at 23:31

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?

Carl Said on November 10th, 2008 at 18:47

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.

Joel Said on November 13th, 2008 at 12:51

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

CVivek Said on November 14th, 2008 at 15:25

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

Alex Duffield Said on November 19th, 2008 at 17:42

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

Alex Duffield Said on November 19th, 2008 at 17:45

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