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 && $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}}

About Tomislav Bilic

Founder and CEO

Tomislav is a founder and CEO at Inchoo. Enjoys traveling - especially quick getaways, traditional cuisine (from most cultures), good wine and strong rakija.

Read more posts by Tomislav / Visit Tomislav's profile

130 comments

  1. How can I get the ORIGINAL TUTORIAL LINK??
    If it placed featured products in each category to the top of category display, this is exactly what i need.
    Please help me to find this tutorial!

  2. For the error in the line 16 fearured.phtml
    use this code
    <a href="getProductUrl() ?>” title=”stripTags($_product->getName(), null, true) ?>” class=”product-image”><img src="helper(‘catalog/image’)->init($_product, ‘small_image’)->resize(210) ?>” alt=”stripTags($_product->getName(), null, true) ?>” />

  3. echo $this-/>helper(‘catalog/image’)
    above line should be “echo $this->helper(‘catalog/image’)”
    / is the issue for error
    on line no:16

  4. there is a mistake in this please remove it for others line 16 extra -/> this is the error

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

    thanks
    Piyush rana

    1. <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()) ?>” />

  5. Fatal error: Class ‘Mage_Page_Block_Html’ not found in D:\mukul\xampp\htdocs\magento\app\code\local\Mage\Page\Block\Html.php on line 4

    i follow this guide but up level errore show anybody can help me

  6. Error in Step 4: Add new blocks to the app/etc/local.xml it gives parse error
    I follow all points but no use

  7. hi i followed all steps properly but it is not showing anything on home page i am using magento v 1.9.1.0 please help

  8. Hello, i try in magento 1.9 it shows blank on homepage, anyone know to fix this issue ?

    Thanks

  9. i installed the instruction above on my localhost magento 1.8 and it worked
    but when i move my project to online server featured products not displayed in my home page

  10. I need see my featured product in different manner.
    every third raw change the product , mean 2 raws show same product next 2 raw show other products

  11. hi iam new for magento… can u plz tell me is it work for magento 1.5 version? can u plz tell to me any free feature product extension for magento 1.5….

    Thanks.

  12. Hello!

    I want to use the featured products extension.
    The installation worked out smooth!

    But now it just shows four random products and not only the featured ones…. So all my products are featured!

    I’m running Magento 1.4.2
    And i got no clue how to solve it.

    Please help me out!

    Thanx a lot in advance!

    Grtz,
    Tyn

  13. Hi
    I m tanveer Abbas. i m new new user in magneto. i want to facing some problems

    1- plz help me how i can create new menu and any place of page
    2- plz help me how i create catalog and show products in front page.
    3- plz help me how i can manage front hand in breadcrum and products

    i m sure and confident that u will help me in solving this problems and u will teach me and tell me step by step. i shall be thankful

    your faithful Tanver Abbas
    my email address is that tanveerabbas123@yahoo.com

    PLZ REPLY ME AS SOON AS POSSIBLE

  14. @Jessica,

    This code is really old (like 2008 old) and has not been tested with Magento 1.4, we have no idea if it will work at all. This is why you should use the extension instead.

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