How To Create a Featured Product

Last modified by PeterHowitt on Fri, June 25, 2010 09:32
Source|Old Revisions  

This is an old revision of the document!

This tutorial will show you how to implement a Featured Product feature. 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.

I’ll explain each step I took to make this custom feature. Please forgive me if I left anything out.

Note: For me the featured product only showed up if the category was not an anchor.

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) Add Block configuration to catalog.xml

Open MyCompany/app/design/frontend/default/default/layout/catalog.xml. We want to add a new <block> right above the product list block in the default category layout.

Insert the block configuration on line 73 (default catalog.xml).

  1.     <block type="catalog/product_featured" name="product_featured" as="product_featured" template="catalog/product/featured.phtml"></block>

Step 3) 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

  1. <?php
  2. class MyCompany_Catalog_Block_Product_Featured extends Mage_Catalog_Block_Product_Abstract
  3. {
  4.     public function getFeaturedProduct()
  5.     {
  6.         // instantiate database connection object
  7.         $storeId = Mage::app()->getStore()->getId();   
  8.         $categoryId = $this->getRequest()->getParam('id', false);
  9.         $resource = Mage::getSingleton('core/resource');
  10.         $read = $resource->getConnection('catalog_read');
  11.         $categoryProductTable = $resource->getTableName('catalog/category_product');
  12.         //$productEntityIntTable = $resource->getTableName('catalog/product_entity_int'); // doesn't work :(
  13.         $productEntityIntTable = (string)Mage::getConfig()->getTablePrefix() . 'catalog_product_entity_int';
  14.         $eavAttributeTable = $resource->getTableName('eav/attribute');
  16.         // Query database for featured product
  17.         $select = $read->select()
  18.                        ->from(array('cp'=>$categoryProductTable))
  19.                        ->join(array('pei'=>$productEntityIntTable), 'pei.entity_id=cp.product_id', array())
  20.                        ->joinNatural(array('ea'=>$eavAttributeTable))
  21.                        ->where('cp.category_id=?', $categoryId)
  22.                        ->where('pei.value=1')
  23.                        ->where('ea.attribute_code="featured"');
  25.         $row = $read->fetchRow($select);
  26.         return Mage::getModel('catalog/product')->setStoreId($storeId)->load($row['product_id']);
  27.     }
  28. }
  29. ?>

We’re almost there!

Step 4) Extend Mage_Catalog_Block_Category_View

Create a new file, and directories, called app/code/local/MyCompany/Catalog/Block/Category/View.php. We’re extending the core class here so our module will be separate from the core code base. When upgrading, we won’t have to worry about our code not working or having to patch files.

  1. <?php
  2.     class MyCompany_Catalog_Block_Category_View extends Mage_Catalog_Block_Category_View
  3.     {
  4.         public function getFeaturedProductHtml()
  5.         {
  6.             return $this->getBlockHtml('product_featured');
  7.         }
  8.     }
  9. ?>

Step 5) Modify the templates

Edit app/design/frontend/default/default/template/catalog/category/view.phtml and add the following code:

  1.     <?=$this->getFeaturedProductHtml()?>

right above this line:

  1.     <?=$this->getProductListHtml()?>

Create app/design/frontend/default/default/template/catalog/product/featured.phtml and add some product info HTML to show the featured product. Here is an example that simply displays a link to the product:

  1. <?php $_product=$this->getFeaturedProduct() ?>
  2. Check this out: <a href="<?php echo $_product->getProductUrl() ?>"><?php echo $this->htmlEscape($_product->getName()) ?></a>

Step 6) Add new blocks to the app/etc/local.xml

Add the following inside the config global tag:

  1.     <blocks>
  2.         <catalog>
  3.             <rewrite>
  4.                 <product_featured>MyCompany_Catalog_Block_Product_Featured</product_featured>
  5.            </rewrite>
  6.             <rewrite>
  7.                 <category_view>MyCompany_Catalog_Block_Category_View</category_view>
  8.             </rewrite>
  9.          </catalog>
  10.     </blocks>

I hope this helps you add a “Featured Product” feature. It certainly feels thorough, but if I left anything out, please let me know and I’ll be happy to help.



We have a problem which causes the right side column on a product page to be shifted down and to the right. Tried to retrace our steps on this code but to no avail.