Magento Developper’s Guide (Lesson 13) – Add a field on System Configuration in magento

This tutorial is the 13th of many tutorials . If you have not read the first articles yet, I strongly advise you to do so. We have made good progress on this series of tutorial and I already want to congratulate you for having arrived so far;) Today we will see how to add a configuration field in the backoffice (System> Configuration) and how to use it. We will take the example of a field where we will put card numbers

Create a new plugin to store information about Payment card in System > Configuration

We will add on a side bar a « CARDS » section and a « cards » group with a tab « Config » and in it we will add a field to store your card numbers.

First start by creating the structure of your project (declare it in Easylife_All.xml, create your controllers folder, config …) then start to set it up (in config.xml of course;) )
The XML:

<?xml version="1.0"?>

<config>

    <modules>

        <Easylife_Ecard>

            <version>1.0.0</version>

            <depends>

            <!-- no dependencies -->

            </depends>

        </Easylife_Ecard>

    </modules>

    <frontend>

           <routers>

              <route_ecard>

                  <use>standard</use>

                  <args>

                     <module>Easylife_Ecard</module>

                     <frontName>ecard</frontName>

                  </args>

               </route_ecard>

           </routers>

        </frontend>

     <adminhtml>

      <acl>

        <resources>

            <admin>

                <children>

                    <system>

                        <children>

                            <config>

                                <children>

                                    <ecard_section translate="title">

                                        <title>My Section </title>

                                        <sort_order>100</sort_order>

                                    </ecard_section>

                                </children>

                            </config>

                        </children>

                    </system>

                 </children>

            </admin>

        </resources>

    </acl>

     </adminhtml>

</config>

 

Now awe will declare our menu by creating etc/system.xml, at this level of the tutorial I think explaining to you what are theses xml doing is not important;) Basically the first xml said: « In adminhtml (so..in the admin) in system create a new block …  »

 

<?xml version="1.0" ?>

<config>

    <tabs>

        <ecard_tab translate="label">

            <label>Cartes</label>

            <sort_order>100</sort_order>

        </ecard_tab>

    </tabs>

    <sections>

        <ecard_section translate="label">

            <label>Cartes</label>

            <sort_order>200</sort_order>

            <show_in_default>1</show_in_default>

            <show_in_website>1</show_in_website>

            <show_in_store>1</show_in_store>

            <tab>ecard_tab</tab>

            <groups>

                <ecard_group translate="label">

                    <label>Config</label>

                    <comment>Card Configuration</comment>

                    <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>

                    <fields>

                        <ecard_field translate="label comment">

                            <label>Card Number</label>

                            <comment>a text to help</comment>

                            <show_in_default>1</show_in_default>

                            <show_in_website>1</show_in_website>

                            <show_in_store>1</show_in_store>

                            <frontend_input>text</frontend_input>

                        </ecard_field>

                    </fields>

                </ecard_group>

            </groups>

        </ecard_section>

    </sections>

</config>

 

This xml is used to add our tab in the menu on the side of System > Configuration, then to retrieve information from the fields we will use:

 

Mage::getStoreConfig('ecard_section/ecard_group/ecard_field');

 

to test it, create the controller in controllers/IndexController.php :

 

<?php

class Easylife_Ecard_IndexController extends Mage_Core_Controller_Front_Action

{

    /*

     * To test Ecards functions...

     */

    public function indexAction()

    {

        echo  Mage::getStoreConfig('ecard_section/ecard_group/ecard_field');

    }

}

 

then go testing your controller:
yoursite.com/index.php/ecard/index/index
You should see the information in your fields.

 



Congratulations you now know to create a configuration fields in the back-office!

WARNING:the ACL have to take effect so you must disconnect from the magento admin and login again.

thank you for following this tutorial and come back regularly on this blog… You want to help? Take 5 minutes to make a link to this article or about blog (or in twitter, google+ or more. :)

thank you very much;)
 

Find the summery of this tutorial