Promet Knowledge Sharing

I was studying how to create a Magento extension and I found a great solution in this blog but I got stucked when I wanted to use my own html layout and templates. The documentation lacks but I found great help in the forum. I’ll summarize here what I did so far.

1. Create your directory structure

app/
  etc/
    modules/
      - GroupName_All.xml 
  code/
    local/
      GroupName/ 
        ExtensionName/ (Or whatever your module name might be)
          Block/
          controllers/
            - IndexController.php
          etc/
            - config.xml
  design/
    frontend/
      default/
        yourtemplate/
          layout/
            extensionname.xml
          template/
            extensionname/
              form/
                index.phtml

2. Create your config.xml at app/local/GroupName/ExtensionName/etc/config.xml

 XML | 
 copy code |
?
 
01
02
<config>
03
    <modules>
04
        <groupname_extensionname>
05
            <version>0.0.1</version>
06
        </groupname_extensionname>
07
    </modules>
08
 
09
    <frontend>
10
        <routers>
11
            <extensionname>
12
                <use>standard</use>
13
                <args>
14
                    <module>GroupName_ExtensionName</module>
15
                    <frontname>extensionname</frontname>
16
                </args>
17
            </extensionname>
18
        </routers>
19
    </frontend>
20
</config>

And another one at app/etc/modules/GroupName_All.xml . This one enables our extension.

 XML | 
 copy code |
?
 
01
02
<?xml version="1.0"?>
03
<config>
04
    <modules>
05
        <GroupName_ExtensionName>
06
            <active>true</active>
07
            <codePool>local</codePool>
08
        </GroupName_ExtensionName>
09
    </modules>
10
</config>
11

3. Create your first controller at app/local/GroupName/ExtensionName/controllers/IndexController.php

 PHP | 
 copy code |
?
 
1
<?php
2
class GroupName_ExtensionName_IndexController extends Mage_Core_Controller_Front_Action {
3
    public function indexAction() {
4
        $this->loadLayout();
5
        $this->renderLayout();
6
    }
7
}
8

You can access this page in http:/localhost/magento//extensionname/ but the complete url is http://localhost/magento/extensionname/{index}/{index} . by default, magento looks for IndexController and indexAction when they are not specified. Refresh your cache and visit the above URL. You should see the default 3-column layout with nothing in the middle. Our next step is to add our “Hello World” content using only a 1-column layout.

4. Reopen our config.xml and add the following inside the <frontend> tag and right after the <routers> tag

 XML | 
 copy code |
?
 
1
        
2
<layout>
3
            <updates>
4
                <extensionname module="GroupName_ExtensionName">
5
                    <file>extensionname.xml</file>
6
                </extensionname>
7
            </updates>
8
          </layout> 
9

The above settings tells Magento to look for extensionname.xml in our layout. Create that file in app/design/frontend/default/yourtemplate/layout/extensionname.xml

 XML | 
 copy code |
?
 
01
<?xml version="1.0"?>
02
<layout version="0.1.0">
03
    <default>
04
    </default>
05
    <extensionname_index_index>
06
        <reference name="root">
07
            <action method="setTemplate"><template>page/2columns-left.phtml</template></action>
08
        </reference>
09
        <reference name="content">
10
            <block type="core/template" name="extensionname_form_index" output="toHtml" template="extensionname/form/index.phtml" ></block>
11
        </reference>
12
    </extensionname_index_index>
13
</layout> 

Let me explain what happend here.
The tag extensionname_index_index is generated using the format:
ExtensionName frontname that you specified in the config.xml + the controller name + the action name.

 XML | 
 copy code |
?
 
1
<action method="setTemplate"><template>page/2columns-left.phtml</template></action>

- set our template to 1column layout. You can change it to 2columns-left, 2columns-right or 3columns.

 XML | 
 copy code |
?
 
1
<block type="core/template" name="extensionname_form_index" output="toHtml" template="extensionname/form/index.phtml" ></block>

- the template attribute tells where to look for the html file in our template directory. The type attribute is used to tell Magento where to look for Helper file while the name is the name of the block.

Now we need to create our HTML file. Create a file in app/design/frontend/default/yourtemplate/template/extensionname/form/index.phtml (see the similarity in the template attribute above?) and add the following

 HTML | 
 copy code |
?
 
1
Hello World!

Refresh your page and you should see a 1-column layout with a Hello world! Try the other columns and add more contents.

Next time, I’ll post how to add forms and use helpers.