Featured products on Magento frontpage

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

You made it all the way down here so you must have enjoyed this post! You may also like:

Build your 2017 Magento SEO strategy with these tips Ivona Namjesnik
Ivona Namjesnik, | 9

Build your 2017 Magento SEO strategy with these tips

Create unique coupon code in Magento Stanislav Mihic
Stanislav Mihic, | 18

Create unique coupon code in Magento

How to improve your web shop conversion rates Toni Anicic
, | 7

How to improve your web shop conversion rates

131 comments

  1. Heyy Toni! Thanks for the quick reply. Actually I saw the extension but I would want this one since I do not like installing extensions.

    I think the error might be coming from the Featured.php. I’ve been searching since 2 days and nothing.

    Please help me out!

  2. Hi, I’ve used the code and products are showing up on the homepage. But when I click on the product itself to go to its page, it says 404 error. The link structure is like so localhost/magento/index.php/catalog/product/view/id/5/s/some-product/.

    How can I remove this part “product/view/id/5/s/some-product” from the link?

    Please help me out, I badly need to get this to work.

  3. for everyone who have follow all the steps above and doesn’t show anything in the home, be sure that you have replaced all the doble quotation marks ( ” ) in the step 6, because the copy paste don’t work well.

    {{block type=”catalog/product_featured” name=”product_featured” as=”product_featured” template=”catalog/product/featured.phtml}}

  4. As usual, I had to give up and post for me to find the problem. I had a mistake in config.xml. Thank you for the great code!

  5. I can’t get it to work with 1.3.2.4 either. No code shows up in home page. I do have the featured attrib in all sets. Any other ideas?

  6. Hi guys,

    Does anyone know if this feature works with grouped products. I have a similar solution, but it wont work with “Grouped Products” and only “Simple”

    Thanks

    Mark

  7. Thanks, it really works!

    to Mike Pence – dont forget to
    “Save the new attribute and go to Catalog -> Attributes -> Manage Attributes Sets to add the attribute to the default feature set.”

  8. I have followed “ALL” of the above instructions and made the noted changes (above). When I go into Catalog -> Manage Products, WHERE is it that you set a Product to be “Featured” Nothing appears when using {{block type=”catalog/product_featured” name=”product_featured” as=”product_featured” template=”catalog/product/featured.phtml”}}

    I really want to use this feature, ANY help would be much appreciated.

  9. Hello Every One,

    First of all you would clear or refresh the cache and then in Step one change the class name

    MyCompany_Catalog_Block_Product_Featured

    to

    Mage_Catalog_Block_Product_Featured

    then you will see the whole featured products on home page

  10. Great Article, and I’ve got the code implemented into a clients with no problems, so much appreciated.

    Has anyone else come across the situation where the product is set to disabled but the site administrator hasn’t unset the Featured attribute. Is it possible to extend the query to check the products status value as well?

    If I find a solution, I’ll post it here first.

    thanks

    Simon

  11. This i what i got out of this on both front and backend:

    dbModel read resource does not implement Zend_Db_Adapter_Abstract
    Trace:
    #0 /var/www/compuworld.dk/public_html/app/code/core/Mage/Core/Model/Mysql4/Collection/Abstract.php(68): Varien_Data_Collection_Db->setConnection(false)
    #1 /var/www/compuworld.dk/public_html/app/code/core/Mage/Core/Model/Config.php(1086): Mage_Core_Model_Mysql4_Collection_Abstract->__construct(Object(Mage_Core_Model_Mysql4_Website))
    #2 /var/www/compuworld.dk/public_html/app/code/core/Mage/Core/Model/Config.php(1119): Mage_Core_Model_Config->getModelInstance(‘core_mysql4/web…’, Object(Mage_Core_Model_Mysql4_Website))
    #3 /var/www/compuworld.dk/public_html/app/Mage.php(347): Mage_Core_Model_Config->getResourceModelInstance(‘core/website_co…’, Object(Mage_Core_Model_Mysql4_Website))
    #4 /var/www/compuworld.dk/public_html/app/code/core/Mage/Core/Model/Abstract.php(200): Mage::getResourceModel(‘core/website_co…’, Object(Mage_Core_Model_Mysql4_Website))
    #5 /var/www/compuworld.dk/public_html/app/code/core/Mage/Core/Model/Abstract.php(205): Mage_Core_Model_Abstract->getResourceCollection()
    #6 /var/www/compuworld.dk/public_html/app/code/core/Mage/Core/Model/App.php(405): Mage_Core_Model_Abstract->getCollection()
    #7 /var/www/compuworld.dk/public_html/app/code/core/Mage/Core/Model/App.php(268): Mage_Core_Model_App->_initStores()
    #8 /var/www/compuworld.dk/public_html/app/Mage.php(434): Mage_Core_Model_App->init(”, ‘store’, Array)
    #9 /var/www/compuworld.dk/public_html/app/Mage.php(455): Mage::app(”, ‘store’, Array)
    #10 /var/www/compuworld.dk/public_html/index.php(65): Mage::run()
    #11 {main}

  12. And forgot the last one- featured.phtml, there is an extra forward slash.

    It should be:

    … $this->helper …

    instad of:

    … $this-/>helper …

    cheers

  13. Thanks for the tutorial, great work!

    I had a few minor problems with this code due to some typos that I was able to fix fairly easily.

    First, there should never be a break between “<" and "?php", e.g. use "<?php" instead of "< ?php".

    Second, there was a problem with this line in featured.phtml:

    For some reason there are way too many ampersands there. It should look like this:

    Hope this helps you guys.
    cheers

  14. I tried the directions from above and the following shows up on my front page:

    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=”feature_product”‘); $res = $read->fetchAll($select); return $res; } } ?>

    How can I fix this? What does it mean?

  15. I tried out the steps, but suddently I got the following error:
    SQLSTATE[42S01]: Base table or view already exists: 1050 Table ‘
    core_resource’ already exists

    Nothing works anymore, I cannot login into the admin panel.
    The Link report/?id=737849206772&s=default changes the id every second and reloads, but nothing happens.
    Any hints?

    Markus

  16. Hi, thanks A LOT for this tutoorial!
    Its perfect ..

    Working perfect on Magento 1.3.2.2

    Hi everybody,

    can anyone help me to create drag an drop functionality in magento shoping cart. i mean !!
    Just drag the product and drop into the cart!!!!

    if any one know please send me some file or appropriate link for same.

    Thanks

    & regards
    akki

  17. Ok, I must have missed something here. I followed everything as explained, which there was a missing ending php tag in the html.php code…which I fixed, but I still see nothing on the home page. I downloaded the zip file left on here from rapid share and I still see nothing…. 🙁

    I’m guessing I’m placing the block in the CMS incorrectly or something? I’m not getting any warnings just a blank spot on my page where it’s supposed to display. I’m using 1.3.2.2.

  18. It will Also work if u would not follow step 3 and 4…..Well thnx for this nice wrk..:)

  19. If anyone is getting this error:

    Fatal error: Class ‘MyCompany_catalog_Block_Product_Featured”’ not found in /var/www/html2/magento8/app/code/core/Mage/Core/Model/Layout.php on line 345

    and you have changed the folder in the app/code/local/MyCompany to be whatever your website or project name is make sure you change the class names as well in Featured.php and Html.php to represent this.

    The joys of MVC!.

  20. nor featured products nor best sellers are working :/ i think i ve done everything according instructions and .. Im starting to pull out my hair .. Soon i will totally hate myself for starting working with Magento.. but i must finish current project because my client waits so long … and i cant get it done … grrr….

  21. Nice work, team at Inchoo. We always appreciate your skills.

    Do you think it would be easier to allow the Admin to manage the Home Page Featured Products just like any other category? Feel free to check out this tutorial as an alternative method that mentions how to do so: http://eliasinteractive.com/blog/magento-featured-products-a-more-convenient-way-to-display-featured-products-on-the-home-page/

    Nonetheless, it’s just another approach. Thanks for sharing your thoughts!

    Cheers,
    Lee

  22. now i want featured-products list show at navigation var as drop down list is it possible i works magento 3.0 any one can help me about this.

  23. @Jefte – I tried it just now too fully and absolutely no results. I even tried using the code directly from the new.php to select products but even that doesn’t give a result.

  24. I have followed this tutorial methodically and get no products to render at all. At this point I would kill someone for this thing to render even an error, anything to let me know why its not functioning.

    Does this method work with versions 1.2.1 to 1.3.1?

  25. Hi, I’m trying to create a block that I can add to layout/catalog.xml so that on each category, there’s a box showing featured product for its category.

    Looks like I’m gonna need to add more filter in getFeaturedProduct(), can you give me some tips on that?

  26. hi,

    Its working fine in magento 1.2.0.2.
    But i don’t need to display all featured products in home page.
    I need to display only 4 products in random manner.
    how can i do this?
    please help me

  27. hi

    that wonder full but i will need “fetatured product particular category not all” and name of the category of the product

    can any body help me…………………………………………………………………

  28. I think I followed everything here and am getting no output on my homepage

    Maybe there’s some trick to getting an attribute to show the info. Caching is off so I think that’s not it.

    Any thoughts from people who got no output at all then figured it out?

  29. Thanks for the post, I’ve had it up and running for some time. However I am trying to give my client more control over updating the static pages through the CMS tool so I installed TinyMCE for him. However this ruins the code block added to the home page as it parses it as HTML.

    Is there a way to add this code instead to the Custom Design > Layout Update XML field?

    Thanks.

  30. I fallow steps by step this tutorial, i don’t have code error and i receive this error :

    Parse error: syntax error, unexpected ‘/’ in /home/emitro/public_html/app/design/frontend/default/default/template/catalog/product/featured.phtml on line 16

    My featured.phtml is like this :

    getFeaturedProducts(); ?>

    __(‘Featured Products’) ?>

    load($_res[‘product_id’]); ?>

    <a href=”getProductUrl() ?>” title=”htmlEscape($_product->getName()) ?>”>
    <img class=”product-image” src=”helper(‘catalog/image’)->init($_product, ‘small_image’)->resize(135, 135); ?>” width=”135″ height=”135″ alt=”htmlEscape($_product->getName()) ?>”>

    <a class=”product-name” href=”getProductUrl() ?>” title=”htmlEscape($_product->getName()) ?>)”>htmlEscape($_product->getName()) ?>
    getReviewsSummaryHtml($_product, ‘short’) ?>

    &nbsp;

    decorateTable(‘product-list-table’)

    PLEASE HELP ME !

  31. hi
    thks it works for me but now i want to create one more named as advertised product so how can i do that….im new in this so i dont have good knowledge oh php…. so pls me out….

    thanks in advance

  32. Can anyone confirm or deny that this works with version 1.3.0? I followed to the letter, and nothing is displayed on page.

  33. Hi there,

    I almost there(using 1.2.1) but I have this error:
    Parse error: syntax error, unexpected ‘;’ in /home/andatech/public_html/ozinnovations.com.au/app/design/frontend/default/default/template/catalog/product/featured.phtml on line 22

    which is this code:

    If I remove them, I can display the product but it seems something is missing.

    Any help ?

  34. I dont get it to work in 1.2.1.
    Followed the steps precisely and downloaded the files from rapidshare.
    But nothing shows up on the frontpage.

  35. Working perfect on Magento ver. 1.2.1

    Thanks for the Contribution

    Also having price would be a good one for me also.

  36. Hi,

    Great contribution. Is there a way to also show the price under each featured product? For me it is really important.

    I have tried to add the following line in featured.phtml
    getPriceHtml($_product, true) ?>

    But it doesn’t work. I guess I also need to add something to a xml file? or call something somewhere .. help or hints are really really appreciated! Thanks

  37. how do I format the product short description such that such that it stays within the image boundaries ..

    see http://www.clickbao.com under Featured products

    Click to the last image from the right arrow button.i notice that the last description for the last image always displayed in one line compared to the product images before.

  38. Hi!
    I’m a newbie to magento and I wonder is it possible to show the featured products within the callouts in the sidebar?
    Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.

Tell us about your project

Drop us a line. We'd love to know more about your project.