Showing featured categories in homepage is one of the requirement on my ongoing magento project (ongoing at the time i’m posting this blog). The one way i could use to achieve this is via adding custom category field in magento categories. And while fetching category collection using that custom field filter. This is how it looks like featching categories with filter of custom field value

$categories = Mage::getModel('catalog/category')
    ->getCollection()
    ->addFieldToFilter('is_featured', array('eq'=>1))
    ->addAttributeToSelect('*');

Note : i suppose is_featured is the name of added custom field of type yes/no.

But i’m not going through this way. i’m going through module technique that would allow you to just multiselect categories from system configuration. This way looks nice to me as i don’t need to create custom field on magento default, and go though all categories to select if is featured or not. This would allow admin to select/unselect categories from a single place.

For this i’m going to need these file for our module

  • `Sumankcdotcom_Customconfig.xml` – to enable our module (`app/code/etc/modules/`)
  • `config.xml` – our module configuration file (`app/code/local/Sumankcdotcom/Customconfig/etc/`)
  • `system.xml` – xml file to write configuration option for our module (`app/code/local/Sumankcdotcom/Customconfig/etc/`)
  • `Options.php` – a model file to populate options for our custom field (`app/code/local/Sumankcdotcom/Customconfig/Model/`)
  • `Data.php` – helper file just to make sure, magento translation works properly, it’s more a convention (`app/code/local/Sumankcdotcom/Customconfig/Helper/Data.php`)

Step 1: For this first i’m going to register a module. (If you have some existing custom module you can use that).

File location : app/code/etc/modules/Sumankcdotcom_Customconfig.xml

<?xml version="1.0"?>
<config>
  <modules>
    <Sumankcdotcom_Customconfig>
      <active>true</active>
      <codePool>local</codePool>
    </Sumankcdotcom_Customconfig>
  </modules>
</config>

Step 2: Writing our module configuration file config.xml

<?xml version="1.0"?>
<config>
    <modules>
        <Sumankcdotcom_Customconfig>
            <version>1.0</version>
        </Sumankcdotcom_Customconfig>
    </modules>
    <global>
        <helpers>
            <customconfig>
                <class>Sumankcdotcom_Customconfig_Helper</class>
            </customconfig>
        </helpers>
        <models>
             <customconfig>
                <class>Sumankcdotcom_Customconfig_Model</class>
             </customconfig>
        </models>
    </global>
    <adminhtml>
        <acl>
            <resources>
                <admin>
                    <children>
                        <system>
                            <children>
                                <config>
                                    <children>
                                        <customconfig_options>
                                            <title>Custom Configuration Section</title>
                                        </customconfig_options>
                                    </children>
                                </config>
                            </children>
                        </system>
                    </children>
                </admin>
            </resources>
        </acl>
    </adminhtml>
</config>

This declares the model and helper classes as per the magento class declaration convention. and the <adminhtml> tag is used to define resource for the admin.

Step 3: Create our backend config via system.xml file with following content

<?xml version="1.0"?>
<config>
    <tabs>
        <customconfig translate="label" module="customconfig">
            <label>Sumankcdotcom</label>
            <sort_order>1</sort_order>
        </customconfig>
    </tabs>
     
    <sections>
        <customconfig_options translate="label" module="customconfig">
            <label>Sumankcdotcom Config</label>
            <tab>customconfig</tab>
            <frontend_type>text</frontend_type>
            <sort_order>1</sort_order>
            <show_in_default>1</show_in_default>
            <show_in_website>1</show_in_website>
            <show_in_store>1</show_in_store>
            <groups>
                <featured_categories translate="label">
                    <label>Featured Categories (Homepage)</label>
                    <frontend_type>text</frontend_type>
                    <sort_order>2</sort_order>
                    <show_in_default>1</show_in_default>
                    <show_in_website>1</show_in_website>
                    <show_in_store>1</show_in_store>                
                    <fields>
                        <select_cat>
                            <label>Select featured Categories</label>
                            <frontend_type>multiselect</frontend_type>
                            <source_model>customconfig/options</source_model>
                            <sort_order>3</sort_order>
                            <show_in_default>1</show_in_default>
                            <show_in_website>1</show_in_website>
                            <show_in_store>1</show_in_store>
                            <comment>Multiselect for multiple featured categories</comment>
                        </select_cat>
                    </fields>
                </featured_categories>
            </groups>
        </customconfig_options>
    </sections>
</config>

In this file we created backend configuration. We created a multiselect field where we will populate categories.

Step 4: Populating categories in previously created multiselect field. And this is what we do via our model file Options.php

<?php
class Sumankcdotcom_Customconfig_Model_Options
{
  /**
   * Provide categories name and id as a label/value array
   *
   * @return array
   */
  /*
    public function toOptionArray(){
      $collection=Mage::getResourceModel('catalog/category_collection')->addAttributeToSelect('entity_id')->addAttributeToSelect('name'); //->addAttributeToFilter('level',2);
      $catgories=$collection->load()->toArray(array('entity_id','name'));
        $Array = array();
          foreach($catgories as $_category) {
            $Array[] = array('value'=>$_category['entity_id'], 'label'=>$_category['name']);  
          }

     return $Array;
    }
}

And finally the remaining file from the list above Data.php, an empty file just to make sure magento translation system works properly.

<?php
/**
 * Sample Widget Helper
 */
class Sumankcdotcom_Customconfig_Helper_Data extends Mage_Core_Helper_Abstract{
}

Till now we completed creating backend configuration and populating categories inside multiselect in custom option which looks like this

custom-config-backend

Now as we select/unselect categories name from this multiselect configuration, we could get those selected values in phtml file via getStoreConfig. (in our case this line gives the selected categories array Mage::getStoreConfig(‘customconfig_options/featured_categories/select_cat’))

Step 5 : Frontend

we are going to create a phtml file which would fetch those selected categories. (app/design/frontend/<Your_package>/<Your_theme>/template/catalog/category/featured-categories.phtml)

<?php if(Mage::getStoreConfig('customconfig_options/featured_categories/select_cat')): ?>
    <div class="featured-categories">
    <?php 
    $selected_categories = explode(',',Mage::getStoreConfig('customconfig_options/featured_categories/select_cat'));
        echo '<ul>';
    foreach($selected_categories as $cat){
        $Category=Mage::getModel('catalog/category')->load($cat);
        echo '<li><a href="'.$Category->getUrl().'">
        <span class="featured-image"><img src="'.$Category->getImageUrl().'" alt="'.$Category->getName().'" /></span>
        <span class="category-name">'.$Category->getName().'</span></a></li>';
    }
        echo '</ul>';
    ?>
    </div>
<?php else: ?>
    <p class="no-featured-categoires"></p>
<?php endif; ?>

In this file above we are fetched system config and now we are populating categories image, url and name in ul list.

Now as we have created this core/template file, we are going to embed in homepage via xml. In backend > cms > pages> homepage : Design section > Layout Update XML update with

<block type="core/template" name="featuredCategories" after="home_manufacturers_list" 
   template="catalog/category/featured-categories.phtml"/>

Or you can embed on other layout handles via your `local.xml` file.

Suman K.C

eCommerce Developer, writes about stuff related to eCommerce development. Currently based in Kathmandu, loves reading about startups & new technology, introvert nature, fond of traveling & playing futsal.

More Posts