Lee Taylor

About: How To Show / Display Featured Products On The Home Page (Conveniently)

Who’s Interested: Informative to the technical gurus
What: An alternative direction on how to show featured products on your Magento storefront home page
Magento Version Relevance: Any
Magento Store Setup: Any

My thought: “Why not let the Admin choose what products to display on the home page like every other category?”

If you’ve been involved in the community dialogue that constantly evolves through the Magento boards, you may have run across a topic mainly focused on ways for developers to display featured products on the home page.

There have been many directions taken with this, including the following as only a few to mention:

1. Install a extension and configure
2. Create an attribute, assign each product a value for that attribute, and then display products based upon the value they contain for that attribute
3. Use the CMS template code to display a certain category

I didn’t want to override any other solutions, but simply offer another approach – one that does not do the following:

• Modify any core code
• Require per-product management
• Install any extension

After my review, I still wanted a way that was more convenient for our client/administrators to be able to manage the products that display on their home page. Going through each product can become cumbersome, so what if they had one specific category that gets displayed all the time, and any products within it show up on the home page? That’s what I went for, and came up with the following:

1. Create a new “structural block” within Magento (see example, thanks Inchoo)
2. Create a (hidden) category within the Magento Admin
3. Modify the structural block to display that category in a specific way
4. Set the Category Id

Here are the files/modifications:

Structural Block

• app/design/frontend/*/*/template/catalog/product/featured-products.phtml

/*
Magento

NOTICE OF LICENSE

This source file is subject to the Academic Free License (AFL 3.0) that is bundled with this package in the file LICENSE_AFL.txt. It is also available through the world-wide-web at this URL:
http://opensource.org/licenses/afl-3.0.php
If you did not receive a copy of the license and are unable to obtain it through the world-wide-web, please send an email to license@magentocommerce.com so we can send you a copy immediately.

DISCLAIMER

Do not edit or add to this file if you wish to upgrade Magento to newer versions in the future. If you wish to customize Magento for your needs please refer to http://www.magentocommerce.com for more information.

@category   design_default
@package    Mage
@copyright  Copyright (c) 2008 Irubin Consulting Inc. DBA Varien (http://www.varien.com)
@license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*/

<?php
/*
Product list template

@see Mage_Catalog_Block_Product_List
*/
?>

<?php //$_productCollection=$this->getLoadedProductCollection()

//var_dump($cModel); echo $cModel->getName(); die;

$cat_id = "7"; // category_id for "Featured Products"
$_productCollection = Mage::getResourceModel('catalog/product_collection')
->addAttributeToSelect(array('name', 'price', 'small_image'), 'inner')
->addCategoryFilter(Mage::getModel('catalog/category')->load($cat_id));

?>

<?php if(!$_productCollection->count()): ?>
<div class="padder">
<div class="note-msg">
<?php echo $this->__('There are no products matching the selection.') ?>
</div>
</div>
<?php else: ?>

<? // Removed List Mode ?>

<?php // Grid Mode ?>
<?php $_iterator = 0; ?>
<?php $_collectionSize = $_productCollection->count() ?>
<?php //var_dump($_productCollection->count()); ?>
<div class="listing-type-list catalog-listing padder">
<table cellspacing="0" class="generic-product-grid" id="product-list-table">
<?php $i=0; foreach ($_productCollection as $_product): ?>
<?php if ($i++%2==0): ?>
<tr>
<?php endif ?>
<td>
<p class="product-image">
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>">
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(95, 95); ?>" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" />
</a>
<h5><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>"><?php echo $this->htmlEscape($_product->getName()) ?></a></h5>
<?php //echo $this->getPriceHtml($_product, true) ?>

</p>
</td>
<?php if ($i%2==0 	&#37; $i!=$_collectionSize): ?>
</tr>
<?php endif ?>
<?php endforeach ?>
<?php for($i;$i%2!=0;$i++): ?>
<td class="empty-product">	&#37;</td>
<?php endfor ?>
<?php if ($i%2==0): ?>
</tr>
<?php endif ?>
</table>
<script type="text/javascript">decorateTable('product-list-table')</script>
</div>

<?php endif; ?>

• app/design/frontend/*/*/template/cms/home.phtml (modify path/to/your/cms/page/home.phtml to be specific to your needs)

<?php //Home Page View ?> <div>
<?php //display featured products ?>
<?php echo $this->getChildHtml('featured.products') ?>
</div>

• app/design/frontend/*/*/layout/page/page.xml

<?xml version="1.0"?>
<layout version="0.1.0">
<!-- Default layout, loads most of the pages -->
<!-- Insert into existing page.xml file, do not replace this with your current file -->
<default>
<block type="core/text_list" name="featured.products" as="featured.products"/>
</default>
</layout>

Create new Category

This ccould be called “Featured Products”) and set the Admin->Catalog->Manage Categories->specificCategoryName->General Information->”Is Active” = “No”.

Display structural block

Either via CMS page or .phtml page through the CMS page:
(modify path/to/your/cms/page/home.phtml to be specific to your needs)

• CMS Page: {{block type=”core/template” template=”path/to/your/cms/page/home.phtml”}}
• .phtml page: inside CMS page->Custom Design:

<reference name="content">
<remove name="cms_page" />
<block name="home_page" type="core/template" template="path/to/your/cms/page/home.phtml">
<block name="featured.products" type="catalog/product_list" template=
"catalog/product/featured-products.phtml" />
</block>
</reference>
<reference name="root">
<action method="setTemplate">
<template>page/1column.phtml</template>
</action>
</reference>

Set Your Category Id

Now you should be able to checkout the code in the featured-products.phtml, and match the “7” to your actual product category id. (see category id within the Admin->Catalog->Manage Categories->Your Category).

Now, any product inside that category gets displayed on the home page!

Please feel free to download the structural block files and place into your theme structure relative to the root Magento directory.

And take a look at the site we’ve used it on with our client, Keramikos Kitchen.

Let us know your thoughts!

Appreciative,
Lee