How to create featured products on Magento frontpage?

What is a featured product?

A featured product is an item of sale provided with a specific attribute from the administrative UI. The products positioned as featured usually fit into such groups as 'best value', 'on sale', 'speciality', etc.

Why do you need a featured product?

Placing a product on a store’s homepage makes it even more fascinating for buyers. It’s a proven way to attract customer’s attention and bring it to this particular product. The possibility boosts sales and traffic exponentially.   

How to create a featured product on the frontpage?

The featured product can’t be created through the use of standard tools, therefore you’ll need a customized code for the purpose. Besides, you can apply the Easy Content Block extension for displaying desired information blocks on any page of your website.

1. Create a new featured attribute

Go to Catalog - Attributes - Manage Attributes - Add New Attribute

Set the next properties for the attribute: 

  • 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

Set the following properties for the front end:

  • 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

Once the newly-created attribute is saved, enter the Catalog - Attributes - Manage Attributes Sets and add it to the default feature set. Being displayed in Unassigned attribute the featured product attribute should be dragged and dropped in Groups - General tab:

magento-edit-attribute-set-groups-general

2. Create a new block class

The new block is required for the featured product instantiation. For this reason, you need to make a new file and directories:

Go to 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;
}
}
?>

 

3. Enlarge Mage_Page-Block-Html

Go to 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');
}

 

4. Make new blocks for the app/etc/local.xml

The config global tag should be expanded with the following code: 

<blocks>
<catalog>
<rewrite>
<product_featured>MyCompany_Catalog_Block_Product_Featured</product_featured>
</rewrite>
</catalog>
</blocks>;

 

5. Add the code to the file app/design/frontend/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>

 

6.The featured products block should be added to the frontpage

Now the featured product box should be placed to the frontpage.

Enter CMS - Manage Pages and choose homepage( or another page if you don’t want the featured product to be placed on the homepage).

Then place the code in the Content area:

magento-featured-product-code

So, this’s all you should do for configuring the featured product.

Rate the answer?