The first one uses getConfigurableAttributesAsArray function. Applying it to every product can affect performance. The second way is – to use flat tables (it’s very interesting solution and such solution may be helpful in many situations).

However, it is time to describe another approach. While digging into core code you can notice that to generate associated product filters the getUsedProducts (see app/code/core/Mage/Catalog/Model/Product/Type/Configurable.php file) method is called for every configurable product. The collection of subproducts is being loaded here. What we are going to do is to use catalog_product_collection_load_after event (dispatched in _afterLoad()) related to this collection to store all needed options for the particular configurable product. We create a simple model to store options data grabbed from the subproducts collection. So, when the time to display products comes up we will have all needed options in our storage. To make it clearer let’s put some code. In this example let’s display the available product colours.
Config file:

<?xml version="1.0"?>
<!--
/app/code/local/Atwix/ProductOptions/etc/config.xml 
-->
<config>
    <modules>
        <Atwix_ProductOptions>
            <version>1.0.0</version>
        </Atwix_ProductOptions>
    </modules>
    <global>
        <helpers>
            <atwix_productoptions>
                <class>Atwix_ProductOptions_Helper</class>
            </atwix_productoptions>
        </helpers>
        <models>
            <atwix_productoptions>
                <class>Atwix_ProductOptions_Model</class>
            </atwix_productoptions>
        </models>
    </global>
    <frontend>
        <events>
            <catalog_product_collection_load_after>
                <observers>
                    <atwix_productoptions>
                        <class>atwix_productoptions/observer</class>
                        <method>storeAttributes</method>
                    </atwix_productoptions>
                </observers>
            </catalog_product_collection_load_after>
        </events>
    </frontend>
</config>

Observer:

<?php
/* /app/code/local/Atwix/ProductOptions/Model/Observer.php */
class Atwix_ProductOptions_Model_Observer
{
    /**
     * Checks if needed collection catched and passes it to Storage Model to store options
     * @param $observer
     * @return $this
     */
    public function storeAttributes($observer)
    {
        $collection = $observer->getCollection();
        if ($collection instanceof Mage_Catalog_Model_Resource_Product_Type_Configurable_Product_Collection)
        {
            $storageModel = Mage::getSingleton('atwix_productoptions/storage');
            $storageModel->storeData($collection);
        }
        return $this;
    }
}

Model used to store options:

<?php
/* /app/code/local/Atwix/ProductOptions/Model/Storage.php */
class Atwix_ProductOptions_Model_Storage extends Mage_Core_Model_Abstract
{
    /**
     * options will be stored in this array 
     * @var null|array
     */
    protected $_attributes = null;

    /**
     * options labels
     * @var null|array
     */
    protected $_options = null;

    /**
     * Puts Color options to $_attributes array 
     * @param $collection
     * @return $this
     */
    public function storeData($collection)
    {
        foreach($collection->getItems() as $item){
            if ($color = $item->getColor()){
                $this->_attributes[$item->getParentId()]['color'][$color] = $this->getOptionLabel('color', $color);
            }
        }
        return $this;
    }

    /**
     * Retrieves option label by attribute name and value
     * stores all labels in array on first calling 
     * @param $attrName
     * @param $value
     * @return mixed
     */
    public function getOptionLabel($attrName, $value){
        if (!isset($this->_options[$attrName])){
            $attribute = Mage::getModel('eav/config')->getAttribute('catalog_product', $attrName);
            $optArray = $attribute->getSource()->getAllOptions(false);
            foreach($optArray as $item){
                $this->_options[$attrName][$item['value']] = $item['label'];
            }
        }
        return $this->_options[$attrName][$value];
    }

    /**
     * Returns options for products 
     * @param product id $id  
     * @param $code
     * @return bool|array
     */
    public function getOptions($id, $code)
    {
        if (isset($this->_attributes[$id][$code])){
            return $this->_attributes[$id][$code];
        }
        return false;
    }
}

Helper class:

<?php
/* /app/code/local/Atwix/ProductOptions/Helper/Data.php */
class Atwix_ProductOptions_Helper_Data extends Mage_Core_Helper_Abstract
{
    protected $_storageModel = null;

    public function  __construct()
    {
        $this->_storageModel = Mage::getSingleton('atwix_productoptions/storage');
    }

    /**
     * gets options from storage and generates string
     * @param $id
     * @param $code
     * @return string
     */
    public function getConfigurableProductAttributeOptions($id, $code)
    {
        $values = $this->_storageModel->getOptions($id, $code);
        if ($values){
            return implode(', ',$values);
        }
        return '';
    }
}

And finally, if you place the following line:

<b><?php echo Mage::helper('atwix_productoptions')->getConfigurableProductAttributeOptions($_product->getId(), 'color'); ?></b></br>

to your template file (in our case it is app/design/frontend/base/default/template/catalog/product/list.phtml) somewhere after the construction:

<?php if($_product->isSaleable()): ?>

you will get something like this:

The complete module code can be found here. If you know better/alternative way of getting configurable product options in the product list, you’re welcome to share your knowledge in the comments below.

Certainly, we know that Magento has a great event system and this knowledge will help us to make changes in the System Configuration.
For our purposes, we will create a new module and call it ‘SystemConfig’. It consists of three files. First of them is for initialing our module:
app/etc/modules/Atwix_SystemConfig.xml

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

Afterwards, we need to create module configuration file. That is the second one:

app/code/local/Atwix/SystemConfig/etc/config.xml

<?xml version="1.0"?>
<config>
    <modules>
        <Atwix_SystemConfig>
            <version>1.0.0</version>
        </Atwix_SystemConfig>
    </modules>
    <global>
        <models>
            <atwix_systemconfig>
                <class>Atwix_SystemConfig_Model</class>
            </atwix_systemconfig>
        </models>
        <events>
            <adminhtml_init_system_config>
                <observers>
                    <atwix_init_system_config>
                        <class>atwix_systemconfig/observer</class>
                        <method>changeSystemConfig</method>
                    </atwix_init_system_config>
                </observers>
            </adminhtml_init_system_config>
        </events>
    </global>
</config>

However, let’s check what we have now. So, in the configuration file we define model, configure event, and also, the event ‘adminhtml_init_system_config’ which makes possible to work with System Configuration data.

And, the third  one, the last file – it is an observer, where we do all the magic:
app/code/local/Atwix/SystemConfig/Model/Observer.php

<?php

class Atwix_SystemConfig_Model_Observer
{
    public function changeSystemConfig(Varien_Event_Observer $observe)
    {
        $config = $observe->getConfig();

        return $this;
    }
}

Okey, we put debug breakpoint to the line with the return statement and have a good inspect of the picture being used:

Check this out!
In the config, there are all the tabs and sections, and in the section – groups and fields, but what about to try some changes. For example, let’s change sort order and label for ‘advanced’ tab and add a comment to the ‘Startup Page’ field.

Thuswise, at first – change code in the observer:

app/code/local/Atwix/SystemConfig/Model/Observer.php

<?php

class Atwix_SystemConfig_Model_Observer
{
    public function changeSystemConfig(Varien_Event_Observer $observer)
    {
        //get init sections and tabs
        $config = $observer->getConfig();

        //get tab 'advanced', change sort order and label
        $advancedTab = $config->getNode('tabs/advanced');
        $advancedTab->sort_order = 1;
        $advancedTab->label .= ' (on top)';

        //get field 'page', add comment
        $config->getNode('sections/admin/groups/startup/fields/page')->comment = 'after successful login you will see this page';

        return $this;
    }
}

Great, advanced tab on the top!
After what, it is possible to make a lot of changes.
Moreover, we can also create tabs and section, group and field, besides that, using Mage_Core_Model_Config_Element class we are able to work with elements: create, edit, append, extend, etc. And the next example shows us how to add a new group with the fields to the ‘admin’ section. In this case, the observer should have the following code:

app/code/local/Atwix/SystemConfig/Model/Observer.php

<?php

class Atwix_SystemConfig_Model_Observer
{
    public function changeSystemConfig(Varien_Event_Observer $observer)
    {
        //get init sections and tabs
        $config = $observer->getConfig();

        //get tab 'advanced', change sort order and label
        $advancedTab = $config->getNode('tabs/advanced');
        $advancedTab->sort_order = 1;
        $advancedTab->label .= ' (on top)';

        //get field 'page', add comment
        $config->getNode('sections/admin/groups/startup/fields/page')->comment = 'after successful login you will see this page';

        //add new group with fields in section 'admin'
        $adminSectionGroups = $config->getNode('sections/admin/groups');
        $new_group_xml = new Mage_Core_Model_Config_Element('
            <atwix_new_group>
                <label>New Group</label>
                <sort_order>99</sort_order>
                <show_in_default>1</show_in_default>
                <show_in_website>1</show_in_website>
                <show_in_store>1</show_in_store>
                <fields>
                        <disable_message>
                            <label>Disable Message</label>
                            <frontend_type>select</frontend_type>
                            <source_model>adminhtml/system_config_source_yesno</source_model>
                            <sort_order>10</sort_order>
                            <show_in_default>1</show_in_default>
                            <show_in_website>1</show_in_website>
                            <show_in_store>1</show_in_store>
                        </disable_message>
                        <message>
                            <label>Message</label>
                            <frontend_type>text</frontend_type>
                            <sort_order>20</sort_order>
                            <show_in_default>1</show_in_default>
                            <show_in_website>1</show_in_website>
                            <show_in_store>1</show_in_store>
                            <depends>
                                <disable_message>0</disable_message>
                            </depends>
                        </message>
                </fields>
            </atwix_new_group>
        ');
        $adminSectionGroups->appendChild($new_group_xml);

        return $this;
    }
}

But, if we wish it is possible to implement a lot of things and reinvent the wheel =)

At the same time, it will be highly helpful to make some changes in the System Configuration while using the observer.

You’re always welcome to leave your comments below if you found this post helpful! Thanks for reading our blog!

When we get deal with JS file it is only needed to add after file name the following chars “?1″, look through example:

<reference name="head">
    <action method="addJs"><script>atwix/test.js?1</script></action>
</reference>

But we can’t apply this way for CSS cache, as Magento doesn’t want to include CSS file described that way (since Magento only checks for file existing but can’t find the file with regular file name plus extra symbols).

That’s why it is necessary to find how to implement it without file renaming. The first way can be enabling merging of CSS. Then, you just clear the cache and a new merged file will be created with a new file name (this ability can be found here: System -> Configuration -> Developer -> CSS settings -> Merge CSS Files ).  But as far as we know, the hash code of the merged CSS file stays the same even if the underlying files changed – but only when the new files are added to the set of merged files, the hash changes. So, that way is not applicable especially you just changed existing file.

Let’s check another way – it is when instead of using layout.xml, we just put them in our page/html/head.phtml or, create a block that contains the <style> tag with version number and put it in the XML in our head – so we can have it load in only specific pages and still sticking to using the XML layouts. We guess that it’s not very helpful either, so we have found one more solution. We need to create our own functionality that allows to include the CSS file with revision number. First of all, we should create block, thus you can check the following code:

class Atwix_Css_Block_Test extends Mage_Core_Block_Text
{
    /** @var string Current theme url */
    private $_url;

    /**
     * Get current theme url
     */
    public function _construct()
    {
        $this->_url = Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_SKIN) .
            'frontend' . DS .
            Mage::getSingleton('core/design_package')->getPackageName() . DS .
            Mage::getDesign()->getTheme('frontend') . DS;
    }

    /**
     * Generate code that is needed to insert into head block
     * 
     * @param $file string file name
     */
    public function setCss($file)
    {
        $this->setText('<link rel="stylesheet" type="text/css" href="' . $this->_url . $file . '" media="all"/>');
    }
}

then, you should use the functionality of this block in your layout, see the following code as well:

<reference name="head">
    <block type="atwixcss/test" name="test">
        <action method="setCss">
            <css><![CDATA[atwix/test.css?1]]></css>
        </action>
    </block>
</reference>

That’s it, after all steps you can just change the revision number when your CSS/JS-file has been edited.
At the same time, you are able to use different modules that allow to rule CSS/JS files, in this case, you will find them on the Magento website.

Hope this article will be helpful. Good luck!

2011-01-12T14:16:52+00:00 DEBUG (7): HEADERS ALREADY SENT:

Call stack is here..

As you may already know, it can take a lot of time to find the place where the issues like this one appeared. So, let’s investigate why it happens and what we can do to speed up the bug fixing process.

PHP has such definition as session. Session, it’s a global data which stores only on the server’s side. In other words, it’s a small temporary ‘storage’ with a predefined lifetime which contains data available globally for PHP scripts on the server side. Session provides opportunity to save an information which is required between requests from client to server. For example, if customer is logged in, his information (name, email, group etc..) stores in the session and becomes available between different scripts.

To get/set the session’s data PHP uses global variable $_SESSION by default. Actually, $_SESSION it’s an array, so you can access the data via array indexes i.e $_SESSION[‘customer’], $_SESSION[‘customer’][‘email’] etc.. PHP sessions have one singularity: you need to ‘start’ the session for each request to the server to initialize a current session and make $_SESSION variable available. For this purpose, PHP has built in function session_start(). However, you can’t initialize the session everywhere you want. You have to do it only before the server send some data to the client’s browser. Practically, you need to start the session before echo(), print(), readfile() and other output functions. If you don’t follow that rule your session won’t be initialized and, in addition, you’ll have PHP notice that says about sent headers.

Thereby, we are getting messages in Magento system.log about sent headers because of incorrect session initialization described above. The problem is the place of echo() might be everywhere and finding the place which is causing that error might cost you a whole day. Fortunately, Magento has a controller responsible for sending responses to a client side. As you may guess, we can use this controller to collect additional data that will help us to find the error’s place.

Let’s do a bad thing: make changes directly in the core file. Since it’s just a temporary change, we don’t have to create a copy of that file in the local codepool or create our own extension. Just modify the file directly and don’t forget to remove the changes after the debug process will be finished.

Open the following file with favourite text editor of yours: app/code/local/Mage/Core/Controller/Response/Http.php

and find the line says:

Mage::log('HEADERS ALREADY SENT: '.mageDebugBacktrace(true, true, true));

Then, insert the following line before the previous one:

Mage::Log(print_r(get_included_files(),true));

Save the file and move forward.

As you have already guessed, that change allows you to view the list of included files in the log. So, now you can open each of these files and search for echo(), print(), readfile() and other output functions.

The last thing: do not forget to roll back your changes after you’ll be finished. Otherwise you’ll be wondered how big the logs might be

As you should already know, for creating own tab, section, group or field we need to use the system.xml file. So, let’s try to customize System Configuration elements in it.

For example, we need to do the following steps:

1. Tab ‘Catalog’ – move to the top.
2. Section ‘General’ – change a label in ‘General Information’.
3. Group ‘Store Information’ (section ‘General’) – add a new field ‘Show VAT Number’ (dropdown yes/no).
4. Fields ‘VAT Number’ and ‘Validate VAT Number’ – add them dependence on the ‘Show VAT Number’ field.
5. Section ‘Moneybookers’ – change a label in ‘Phoenix Moneybookers’.

Now, create a new module ’SystemConfig’ for experiments, here is the initial and module configuration files:

app/etc/modules/Atwix_SystemConfig.xml

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

app/code/local/Atwix/SystemConfig/etc/config.xml

<?xml version="1.0"?>
<config>
    <modules>
        <Atwix_SystemConfig>
            <version>1.0.0</version>
        </Atwix_SystemConfig>
    </modules>
</config>

Also, note please – in the system configuration file we should put nodes of those elements (tabs, sections, groups, fields) that are also needed to be changed:

app/code/local/Atwix/SystemConfig/etc/system.xml

<?xml version="1.0"?>
<config>
    <tabs>
        <!-- 1 -->
        <catalog>
            <sort_order>1</sort_order>
        </catalog>
    </tabs>

    <sections>
        <general>
            <!-- 2 -->
            <label>General Information</label>
            <groups>
                <store_information>
                    <fields>
                        <!-- 3 -->
                        <show_vat>
                            <label>Show VAT Number</label>
                            <frontend_type>select</frontend_type>
                            <source_model>adminhtml/system_config_source_yesno</source_model>
                            <sort_order>26</sort_order>
                            <show_in_default>1</show_in_default>
                            <show_in_website>1</show_in_website>
                            <show_in_store>1</show_in_store>
                        </show_vat>
                        <!-- 4 -->
                        <merchant_vat_number>
                            <depends>
                                <show_vat>1</show_vat>
                            </depends>
                        </merchant_vat_number>
                        <validate_vat_number>
                            <depends>
                                <show_vat>1</show_vat>
                            </depends>
                        </validate_vat_number>
                    </fields>
                </store_information>
            </groups>
        </general>
        <!--5-->
        <moneybookers>
            <label>Phoenix Moneybookers</label>
        </moneybookers>
    </sections>
</config>

After all, let’s check what we have:

As you can see, everything works fine except the last task, what means that in the ‘Moneybookers’ section the label wasn’t changed. Besides that, we did not get the desired result, because system configuration file app\code\community\Phoenix\Moneybookers\etc\system.xml has loaded only after our file app/code/local/Atwix/SystemConfig/etc/system.xml and our values were overwritten. Therefore, for solving this problem we can choose one of the following options:

1. First, add ‘depends’ function to our initial configuration files:

app/etc/modules/Atwix_SystemConfig.xml

<?xml version="1.0"?>
<config>
    <modules>
        <Atwix_SystemConfig>
            <active>true</active>
            <codePool>local</codePool>
            <depends>
                <Phoenix_Moneybookers/>
            </depends>
        </Atwix_SystemConfig>
    </modules>
</config>

2. Or, you can create a new module with namespace that will take position after Phoenix namespace in alphabetical order.
3. Make change using the observer.
This post might help if you`ll face the similar situation. However, if you have any ideas or suggestions we would be glad to accept them. Comments are most welcome!

<routers>
    <atwixtest>
        <use>standard</use>
        <args>
            <module>Atwix_Test</module>
            <frontName>test-frontname</frontName>
        </args>
    </atwixtest>
</routers>

Yes, if you look to  <use>standard</use>  code, that means – Magento will use the standard router for processing requests and URLs,  and when you follow magento.dev/test-frontname URL, in this case, Magento says for the standard router that it should take action indexAction from IndexController from module Atwix_Test – it is not so complicated, we guess. Actually, when the requests come to Magento, then it calls all routers till one of them will response – otherwise, there 404 page will be displayed.

Now, let’s start creating own router. First of all, we need to declare router in config.xml:

<default>
    <web>
        <routers>
            <atwixtest>
                <area>frontend</area>
                <class>Atwix_Test_Controller_Router</class>
            </atwixtest>
        </routers>
    </web>
</default>

After this, we should create file that will contain class  Atwix_Test_Controller_Router app/code/local/Atwix/Test/Controller/Router.php:

class Atwix_Test_Controller_Router extends Mage_Core_Controller_Varien_Router_Standard
{
    public function match(Zend_Controller_Request_Http $request)
    {
        $request->setModuleName('test-frontname')
            ->setControllerName('index')
            ->setActionName('index');

        return true;
    }

}

The previous code explains Magento that it should transmit control to the indexAction function which is placed in app/code/local/Atwix/Test/controllers/IndexController.php., and your router will be called after admin and standard, but if these routers do not respond for the requests – then your router will be called.

So, now you can check request, proceed it and show page you want  before Magento will throw “Not found” page. Hope that simple tutorial will be useful. We are waiting for your comments and happy, non-crappy coding!

<reference name="left">
    <block type="core/template" name="test" template="at.phtml"></block>
</reference>

This block will be displayed after all content of the “left“ block. But, what if we need it to be displayed before all content – just add the “before” directive. See below such example:

<reference name="left">
    <block type="core/template" name="test" template="at.phtml" before="-"></block>
</reference>

In case, you need to place your block between first level children of the “left” one, you should add before=”name” or after=”name”, and check following code:

<reference name="left">
    <block type="core/template" name="test" template="at.phtml" after="tags_popular"></block>
</reference>

That was pretty easy, but when we deal with none first level blocks – supposing, it is necessary to insert the block after price on the category page, and for such implementation you should use the observer core_block_abstract_to_html_before. Besides that, don’t forget to declare model in your config.xml:

<?xml version="1.0"?>
<config>
    <global>
    <!-- ... -->
        <models> 
            <atwix_test>
                <class>Atwix_Test_Model</class>
            </atwix_test>
        </models>
    </global>
    <frontend>
        <events>
            <core_block_abstract_to_html_before>
                <observers>
                    <atwix_test>
                        <type>model</type>
                        <class>atwix_test/observer</class>
                        <method>insertBlock</method>
                    </atwix_test>
                </observers>
            </core_block_abstract_to_html_before>
        </events>
    </frontend>
</config>

The next step is creating the observer and your template file.
You can place the template to app/design/frontend/<package>/<theme>/at.phtml for example. For this, look at the observer’s code below:

<?php

class Atwix_Test_Model_Observer
{
    public function insertBlock($observer)
    {
        /** @var $_block Mage_Core_Block_Abstract */
        /*Get block instance*/
        $_block = $observer->getBlock();
        /*get Block type*/
        $_type = $_block->getType();
       /*Check block type*/
        if ($_type == 'catalog/product_price') {
            /*Clone block instance*/
            $_child = clone $_block;
            /*set another type for block*/
            $_child->setType('test/block');
            /*set child for block*/
            $_block->setChild('child', $_child);
            /*set our template*/
            $_block->setTemplate('at.phtml');
        }
    }
}

And finally, here is a template at.phtml code:

<?php echo $this->getChildHtml('child') ?>
<h1>Hello</h1>

The result is:

That’s all folks! However, if you know another good way how to insert the blocks, please share your knowledges with us.

Source Model – a model class that serves to get existing values (stored in the db or somewhere else) for further displaying inside the setting’s field.

Frontend Model – as a rule, it’s a block’s class. Methods of this class return html of setting’s field. To be more specific, the block had to have method _getElementHtml() described inside the class which returns the raw html of setting’s field.

Backend Model – a class which allows to operate with configuration data on the different stages (save, load). It contains three major methods respectively for each event: _afterLoad(), _beforeSave() and _afterSave().

If you are interested in, you can always find the working examples of each of them in the Magento core itself. But firstly, let’s try to look on some custom examples of these models. The following part describes how to create a drop down menu with the custom values:

Init setting’s field in your system.xml:

<color>
    <label>Color</label>
    <frontend_type>select</frontend_type>
    <source_model>Atwix_Shoppingbar_Model_Adminhtml_System_Config_Source_Color</source_model>
    <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>
</color>

Then, create the source model that was specified above:

class Atwix_Shoppingbar_Model_Adminhtml_System_Config_Source_Color
{
   public function toOptionArray()
   {
       $themes = array(
           array('value' => 'green', 'label' => 'Green'),
           array('value' => 'blue', 'label' => 'Blue'),
           array('value' => 'beige', 'label' => 'Beige'),
       );

       return $themes;
   }
}

As you can see, there’s only one method toOptionArray(). It returns an array with the items (value -> label) for the drop down menu. Nothing difficult is here Let’s look onto another example to find out how to use frontend and source models. The best point is to review editable items list setting since it has both. The setting described below operates with the text items. It allows to add/remove email addresses:

<addresses>
    <label>Blocked Email Addresses</label>
    <frontend_model>atwix_emailblocker/adminhtml_addresses</frontend_model>
    <backend_model>adminhtml/system_config_backend_serialized</backend_model>
    <sort_order>2</sort_order>
    <show_in_default>1</show_in_default>
    <show_in_website>0</show_in_website>
    <show_in_store>0</show_in_store>
    <can_be_empty>1</can_be_empty>
</addresses>

Frontend model is a block:

class Atwix_Emailblocker_Block_Adminhtml_Addresses extends Mage_Adminhtml_Block_System_Config_Form_Field
{
   protected $_addRowButtonHtml = array();
   protected $_removeRowButtonHtml = array();

   /**
    * Returns html part of the setting
    *
    * @param Varien_Data_Form_Element_Abstract $element
    * @return string
    */
   protected function _getElementHtml(Varien_Data_Form_Element_Abstract $element)
   {
       $this->setElement($element);

       $html = '<div id="emailblocker_addresses_template" style="display:none">';
       $html .= $this->_getRowTemplateHtml();
       $html .= '</div>';

       $html .= '<ul id="emailblocker_addresses_container">';
       if ($this->_getValue('addresses')) {
           foreach ($this->_getValue('addresses') as $i => $f) {
               if ($i) {
                   $html .= $this->_getRowTemplateHtml($i);
               }
           }
       }
       $html .= '</ul>';
       $html .= $this->_getAddRowButtonHtml('emailblocker_addresses_container',
           'emailblocker_addresses_template', $this->__('Add New Email'));

       return $html;
   }

   /**
    * Retrieve html template for setting
    *
    * @param int $rowIndex
    * @return string
    */
   protected function _getRowTemplateHtml($rowIndex = 0)
   {
       $html = '<li>';

       $html .= '<div style="margin:5px 0 10px;">';
       $html .= '<input style="width:100px;" name="'
           . $this->getElement()->getName() . '[addresses][]" value="'
           . $this->_getValue('addresses/' . $rowIndex) . '" ' . $this->_getDisabled() . '/> ';

       $html .= $this->_getRemoveRowButtonHtml();
       $html .= '</div>';
       $html .= '</li>';

       return $html;
   }

   protected function _getDisabled()
   {
       return $this->getElement()->getDisabled() ? ' disabled' : '';
   }

   protected function _getValue($key)
   {
       return $this->getElement()->getData('value/' . $key);
   }

   protected function _getSelected($key, $value)
   {
       return $this->getElement()->getData('value/' . $key) == $value ? 'selected="selected"' : '';
   }

   protected function _getAddRowButtonHtml($container, $template, $title='Add')
   {
       if (!isset($this->_addRowButtonHtml[$container])) {
           $this->_addRowButtonHtml[$container] = $this->getLayout()->createBlock('adminhtml/widget_button')
               ->setType('button')
               ->setClass('add ' . $this->_getDisabled())
               ->setLabel($this->__($title))
               ->setOnClick("Element.insert($('" . $container . "'), {bottom: $('" . $template . "').innerHTML})")
               ->setDisabled($this->_getDisabled())
               ->toHtml();
       }
       return $this->_addRowButtonHtml[$container];
   }

   protected function _getRemoveRowButtonHtml($selector = 'li', $title = 'Delete')
   {
       if (!$this->_removeRowButtonHtml) {
           $this->_removeRowButtonHtml = $this->getLayout()->createBlock('adminhtml/widget_button')
               ->setType('button')
               ->setClass('delete v-middle ' . $this->_getDisabled())
               ->setLabel($this->__($title))
               ->setOnClick("Element.remove($(this).up('" . $selector . "'))")
               ->setDisabled($this->_getDisabled())
               ->toHtml();
       }
       return $this->_removeRowButtonHtml;
   }
}

It’s pretty huge. We have described the full version to show what’s going on there. You can simple extend your block from Mage_GoogleCheckout_Block_Adminhtml_Shipping_Merchant and override the necessary methods.

Backend model, in this case, it’s a standard Magento model:

class Mage_Adminhtml_Model_System_Config_Backend_Serialized extends Mage_Core_Model_Config_Data
{
    protected function _afterLoad()
    {
        if (!is_array($this->getValue())) {
            $value = $this->getValue();
            $this->setValue(empty($value) ? false : unserialize($value));
        }
    }

    protected function _beforeSave()
    {
        if (is_array($this->getValue())) {
            $this->setValue(serialize($this->getValue()));
        }
    }
}

As you can see, it simply unserializes/serializes field’s values before load/save respectively. That’s all. You are always able to improvise with the models described below to get the best result. If you want non-trivial form element – use your own fronted model. To get available values for settings you should use the source model. And if you need to save/load data in your format or make some other actions on these events – feel free to use the backend model.
Good luck and graceful solutions

First of all, we would recommend you always place everything, that refers to Magento system settings, in the system.xml file, since it’s the main and the only role of this file.
If you need to create your own tab in the admin system settings, you should simply add the following lines to the file:

<config>
    <tabs>
        <atwix translate="label">
            <label>Atwix Extensions</label>
            <sort_order>150</sort_order>
        </atwix>
    </tabs>    
</config>

As a result, you’ll get the new group (tab) in the admin settings. When you need to complete the procedure of adding settings you should add the following items: section, settings groups and the settings (fields) themselves:

<config>
    <sections>
        <atwix_shoppingbar translate="label" module="atwix_shoppingbar">
            <class>separator-top</class>
            <label>Shopping Bar</label>
            <tab>atwix</tab>
            <sort_order>130</sort_order>
            <show_in_default>1</show_in_default>
            <show_in_website>1</show_in_website>
            <show_in_store>1</show_in_store>
            <groups>
                <quicksearch>
                    <label>Quick search</label>
                    <frontend_type>text</frontend_type>
                    <sort_order>20</sort_order>
                    <show_in_default>1</show_in_default>
                    <show_in_website>0</show_in_website>
                    <show_in_store>1</show_in_store>
                    <fields>
                        <quicksearch_enabled translate="label comment">
                            <label>Enable Quick Search</label>
                            <comment><![CDATA[Enable quick search block]]></comment>
                            <frontend_type>select</frontend_type>
                            <source_model>adminhtml/system_config_source_yesno</source_model>
                            <sort_order>1</sort_order>
                            <show_in_default>1</show_in_default>
                            <show_in_website>0</show_in_website>
                            <show_in_store>1</show_in_store>
                        </quicksearch_enabled>
                        <results_count translate="label comment">
                            <label>Results count</label>
                            <comment><![CDATA[Quick search results count (min 1, max 20)]]></comment>
                            <frontend_type>text</frontend_type>
                            <sort_order>5</sort_order>
                            <show_in_default>1</show_in_default>
                            <show_in_website>0</show_in_website>
                            <show_in_store>1</show_in_store>
                        </results_count>
                    </fields>
                </quicksearch>
            </groups>
        </atwix_shoppingbar>
    </sections>
</config>

Here is an illustration what means each of these terms:

Next question is how will the different settings in the xml config look like. As you already know, each setting is placed in the <fields> node, then follows the unique setting’s id and finally – setting’s attributes. Here is a small review of the most useful settings:

Text field

Simple input field for short text values:

 <text_field translate="label">
    <label>Text Field</label>
    <frontend_type>text</frontend_type>
    <sort_order>10</sort_order>
    <show_in_default>1</show_in_default>
    <show_in_website>1</show_in_website>
    <show_in_store>1</show_in_store>
</text_field>

Textarea

Wide input field for long text values:

<textarea translate="label">
    <label>Textarea</label>
    <frontend_type>textarea</frontend_type>
    <sort_order>20</sort_order>
    <show_in_default>1</show_in_default>
    <show_in_website>1</show_in_website>
    <show_in_store>1</show_in_store>
</textarea>

Drop down with Yes/No values

Drop down menu with the values “Yes” and “No”. Commonly it is used as a flag for enabling/disabling something:

<enabled translate="label">
    <label>Enabled</label>
    <frontend_type>select</frontend_type>
    <source_model>adminhtml/system_config_source_yesno</source_model>
    <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>
</enabled>

Drop down with Enable/Disable values

Almost the same as previous one, but instead of “Yes” and “No” you will get “Enable” and “Disable”:

<active translate="label">
    <label>Enable/Disable</label>
    <frontend_type>select</frontend_type>
    <sort_order>40</sort_order>
    <source_model>adminhtml/system_config_source_enabledisable</source_model>
    <show_in_default>1</show_in_default>
    <show_in_website>1</show_in_website>
    <show_in_store>1</show_in_store>
</active>

Drop down with custom values

Drop down with the custom set of values, generated by source model:

<default translate="label">
    <label>Select</label>
    <frontend_type>select</frontend_type>
    <!-- Source model for countries list. For custom list you need to use your own source model -->
    <source_model>adminhtml/system_config_source_country</source_model>
    <sort_order>50</sort_order>
    <show_in_default>1</show_in_default>
    <show_in_website>1</show_in_website>
    <show_in_store>1</show_in_store>
</default>

Multiselect with custom values

Field with the ability to select few items at the same time:

<multiselect translate="label">
    <label>Multiselect</label>
    <frontend_type>multiselect</frontend_type>
    <!-- Source model for countries list. For custom list you need to use your own source model -->
    <source_model>adminhtml/system_config_source_country</source_model>
    <sort_order>60</sort_order>
    <show_in_default>1</show_in_default>
    <show_in_website>1</show_in_website>
    <show_in_store>1</show_in_store>
    <can_be_empty>1</can_be_empty>
</multiselect>

File

Allows to choose a file for uploading. In this example the file will be saved in var/uploads directory:

<file translate="label comment">
    <label>File</label>
    <frontend_type>file</frontend_type>
    <backend_model>adminhtml/system_config_backend_file</backend_model>
    <upload_dir>var/uploads</upload_dir>
    <sort_order>70</sort_order>
    <show_in_default>1</show_in_default>
    <show_in_website>0</show_in_website>
    <show_in_store>0</show_in_store>
</file>

Time

Is used to create three drop down menus for setting up the hours, minutes and seconds respectively:

<time translate="label comment">
    <label>Time</label>
    <frontend_type>time</frontend_type>
    <sort_order>80</sort_order>
    <show_in_default>1</show_in_default>
    <show_in_website>1</show_in_website>
    <show_in_store>1</show_in_store>
</time>

Editable items list

Allows to add/remove text values for the setting:

<addresses>
    <label>Blocked Email Addresses</label>
    <frontend_model>atwix_emailblocker/adminhtml_addresses</frontend_model>
    <backend_model>adminhtml/system_config_backend_serialized</backend_model>
    <sort_order>90</sort_order>
    <show_in_default>1</show_in_default>
    <show_in_website>1</show_in_website>
    <show_in_store>1</show_in_store>
    <can_be_empty>1</can_be_empty>
</addresses>

Heading

Is used to entitle some settings inside the group:

<heading translate="label">
    <label>Heading</label>
    <frontend_model>adminhtml/system_config_form_field_heading</frontend_model>
    <sort_order>90</sort_order>
    <show_in_default>1</show_in_default>
    <show_in_website>1</show_in_website>
    <show_in_store>1</show_in_store>
</heading>

Dependent field

It can be any field. The main purpose of this one – it’s to hide/show the field depending on the state of  some other field. In the following example the field depends on the field’s enablemethod state. If enablemethod value is 1 – dependent_field will appear and vice versa:

<dependent_field translate="label">
    <label>Dependent Field</label>
    <frontend_type>textarea</frontend_type>
    <sort_order>100</sort_order>
    <show_in_default>1</show_in_default>
    <show_in_website>1</show_in_website>
    <show_in_store>1</show_in_store>
    <depends>
        <enablemethod>1</enablemethod>
    </depends>
</dependent_field>

There is also one interesting cheat. You are able to use javascript inside of the <comment></comment> node:

<specificerrmsg translate="label">
    <label>Displayed Error Message</label>
    <frontend_type>textarea</frontend_type>
    <comment>
    <![CDATA[
        <script type="text/javascript">
            Event.observe('carriers_flatrate_active', 'change', function() {
                alert('Be careful with this one');
            })
        </script>
    ]]>
    </comment>
    <sort_order>2013</sort_order>
    <show_in_default>1</show_in_default>
    <show_in_website>1</show_in_website>
    <show_in_store>1</show_in_store>
</specificerrmsg>

It might be useful for changing field’s value depending on different credentials. We would not recommend you to use it very often there, especially for the big javascript code.

Moreover, as you might have noticed, there are some attributes like source_model for the custom drop downs or, all the more so, frontend model for editable list which may disappoint a bit. We are going to describe how to operate with these models in our next article, which will see the light in the nearest future. Thank you for reading us

<!--file: app/code/local/Atwix/ExtendedGrid/etc/config.xml-->
<adminhtml>
    ...
    <layout>
        <updates>
            <atwix_extendedgrid>
                <file>atwix/extendedgrid.xml</file>
            </atwix_extendedgrid>
        </updates>
    </layout>
    ...
</adminhtml>

Note, this configuration is enough for adding fields from sales_flat_order_grid table (no sql joins are needed). But most likely, you will also need to add some field from the external table. For this purpose we use sales_order_grid_collection_load_before event to join extra tables. Here is how the observer configuration looks like:

<!--file: app/code/local/Atwix/ExtendedGrid/etc/config.xml-->
<adminhtml>
    ...
    <events>
        <sales_order_grid_collection_load_before>
            <observers>
                <atwix_extendedgrid>
                    <model>atwix_extendedgrid/observer</model>
                    <method>salesOrderGridCollectionLoadBefore</method>
                </atwix_extendedgrid>
            </observers>
        </sales_order_grid_collection_load_before>
    </events>
    ...
</adminhtml>

Then, add a function that handles our event to the observer:

/*file: app/code/local/Atwix/ExtendedGrid/Model/Observer.php*/
    /**
     * Joins extra tables for adding custom columns to Mage_Adminhtml_Block_Sales_Order_Grid
     * @param $observer
     */
    public function salesOrderGridCollectionLoadBefore($observer)
    {
        $collection = $observer->getOrderGridCollection();
        $select = $collection->getSelect();
        $select->joinLeft(array('payment'=>$collection->getTable('sales/order_payment')), 'payment.parent_id=main_table.entity_id',array('payment_method'=>'method'));
    }

As you can see, we join sales_flat_order_payment table to get a payment method field.

Now, it is time to add this field to the grid. We will use layout handles to call addColumnAfter method of sales_order.grid (Mage_Adminhtml_Block_Sales_Order_Grid) block. There are two handles that we are interested in: adminhtml_sales_order_index and adminhtml_sales_order_grid. The same code goes to both sections, so we will define a new handle sales_order_grid_update_handle and use update directive. And finally, here is how our layout file looks like:

<!--file: app/design/adminhtml/default/default/layout/atwix/extendedgrid.xml -->
<layout>
    <sales_order_grid_update_handle>
        <reference name="sales_order.grid">
            <action method="addColumnAfter">
                <columnId>payment_method</columnId>
                <arguments>
                    <header>Payment Method</header>
                    <index>payment_method</index>
                    <filter_index>payment.method</filter_index>
                    <type>text</type>
                </arguments>
                <after>shipping_name</after>
            </action>
        </reference>
    </sales_order_grid_update_handle>
    <adminhtml_sales_order_grid>
        <!-- apply layout handle defined above -->
        <update handle="sales_order_grid_update_handle" />
    </adminhtml_sales_order_grid>
    <adminhtml_sales_order_index>
        <!-- apply layout handle defined above -->
        <update handle="sales_order_grid_update_handle" />
    </adminhtml_sales_order_index>
</layout>

After all steps you should see your column:

Here is a source code of the completed module. I hope you will find this article useful! Thanks for reading us!