Add Featured Products to Home Page

Last modified by firstvapor on Mon, October 18, 2010 20:43
Source|Old Revisions  

- Create a category to contain the featured products. Call it e.g. “Featured” or “Home Page”. Set “Is Active” to No. That way, it won’t display in the catalog menu. - After saving the category, please note what ID it gets. You can see it in the last part of the URL. If the URL ends with catalog_category/edit/id/8/, the ID is 8. On later version, the ID is next to the category name: - Add products for the home page to the new category. - Edit the Home Page (CMS → Manage Pages → Home Page) and add the following content, where 8 should be replaced by your category ID:

{{block type="catalog/product_list" category_id="8" template="catalog/product/list.phtml"}}

If your product/list.html references $this→getColumnCount() you can vary the column count (e.g. 4 columns) from the default (3) displayed by using:

{{block type="catalog/product_list" column_count="4" category_id="8" template="catalog/product/list.phtml"}}

Although displaying more than 3 columns in your template would likely require additional CSS/layout changes as well.

If you want a view that is different from the category lists, you can copy and modify list.phtml and change the path above. Following steps is an example.

Add Bestsellers to Home Page using the best-selling box of Blue Theme

In Blue Theme, there is a sample HTML code in the content box (Admin → CMS → Manage Pages → Home Page) that displays a list of Best Selling Products. You can easily modify list.phtml to reuse the skin of the best-selling box. Adding featured products to Home Page is a matter of clicking to select the required products in the category (Admin → CMS → Manage Categories → Category Products tab) as outlined in the above method and there is no need to mess with the HTML code in the CMS.

  1. Copy the following code to your preferred text editor
    <?php $_productCollection=$this->getLoadedProductCollection() ?>
    <?php if(!$_productCollection->count()): ?>
    <div class="note-msg">
        <?php echo $this->__('There are no products matching the selection.') ?>
    </div>
    <?php else: ?>
    <div class="box best-selling">
    <?php $_collectionSize = $_productCollection->count() ?>
    <table border="0" cellspacing="0">
    <tbody>
        <?php $i=0; foreach ($_productCollection as $_product): ?>
            <?php if($i++%2==0): ?>
            <tr>
            <?php endif; ?>
                <td>
                    <a href="<?php echo $_product->getProductUrl() ?>" >
                    <img class="product-img" src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(95, 95); ?>" width="95" height="95" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" />
                    </a>
                    <div class="product-description">
                    <p><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>"><?php echo $this->htmlEscape($_product->getName()) ?></a></p>
                    <?php echo $this->getPriceHtml($_product, true) ?>
                    <?php if($_product->getRatingSummary()): ?>
                        <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
                    <?php endif; ?>
                    <?php echo nl2br($_product->getShortDescription()) ?>
                    <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>"><small><?php echo $this->__('Learn More') ?></small></a>
                </td>
            <?php if($i%2==0 || $i==$_collectionSize): ?>
            </tr>
            <?php endif; ?>
        <?php endforeach ?>
        <script type="text/javascript">decorateGeneric($$('tr'), ['last', 'odd', 'even']);</script>
    </tbody>
    </table>
    </div>
    <?php endif; //$_productCollection->count() ?>
    
  2. Name it homelist.phtml and save it in location app/design/frontend/default/blue/template/catalog/product, create the folders where necessary
  3. Edit the Home Page (CMS → Manage Pages → Home Page) and add the following content, where 19 should be replaced by your category ID:
<h3>Best Selling Products</h3>
{{block type="catalog/product_list" category_id="19" template="catalog/product/homelist.phtml"}}  

How to Fix the Breadcrumbs of Inactive Categories

If you follow this Wiki, you’ll notice that the breadcrumbs in the Product Page include the inactive category in the middle (Home/Inactive/Product) and if you click on the category, you’ll be served with a 404. Following steps show you how to hide the inactive category.

  1. Rename your category by adding a prefix ‘0’(Admin → Catalog → Manage Categories → select the inactive category → Name), if your category name is Bestsellers, then rename it 0Bestsellers. This only works if names of other active categories do not start with ‘0’.
  2. Edit breadcrumbs.phtml located in app/design/frontend/default/default/template/page/html by adding this <?php if($_crumbInfo[’label’][0]!=’0’): ?> to line 31 and this <?php endif; ?> at line 44. (The line numbers are based on version 1.2.0.2) The complete code:
    <?php if($crumbs && is_array($crumbs)): ?>
    <h4 class="no-display"><?php echo $this->__("You're currently on:") ?></h4>
    <ul class="breadcrumbs">
        <?php foreach($crumbs as $_crumbName=>$_crumbInfo): ?>
          <?php if($_crumbInfo['label'][0]!='0'): ?>  
            <li class="<?php echo $_crumbName ?>">
            <?php if($_crumbInfo['link']): ?>
                <a href="<?php echo $_crumbInfo['link'] ?>" title="<?php echo $_crumbInfo['title'] ?>"><?php echo $_crumbInfo['label'] ?></a>
            <?php elseif($_crumbInfo['last']): ?>
                <strong><?php echo $_crumbInfo['label'] ?></strong>
            <?php else: ?>
                <?php echo $_crumbInfo['label'] ?>
            <?php endif; ?>
            </li>
            <?php if(!$_crumbInfo['last']): ?>
            <li> / </li>
            <?php endif; ?>
          <?php endif; ?> 
        <?php endforeach; ?>
    </ul>
    <?php endif; ?>
    
  3. Save the file to the Blue Theme directory here: app/design/frontend/default/blue/template/page/html (If you are using other theme, then save it in the corresponding directory.)

Please note: In order to make this work for more than one block of products with different category IDs on the same page, you need to add the following code at the end of your phtml file(s):

<?php
//unset catalog to allow using template for multiple categories on single page
Mage::unregister("_singleton/catalog/layer");
?>

Alternative way:

If you are on 1.4 or greater or 1.7EE or greater then this post is no longer valid as magento has moved to using widgets. You can find a featured product commercial widget here: http://www.magewidgets.com/featured-products-widget.html

If you want more in depth way, try to view this post: http://inchoo.net/ecommerce/magento/featured-products-on-magento-frontpage/

If you’re using Magento v1.1.5 or later, you might want to use these code snippets instead: http://www.magentocommerce.com/boards/viewthread/4780/P15/#t44262 This approach uses core functions instead of using Zend DB to figure out how to build a query statement.




 

Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs