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