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.

Topicko.com is a squidoo like application with more features that enable users to connect with each other.  This site was created using Drupal 6. Today, I’ll discuss one part of the application &mdash; how to build a site that allows users to add contents dynamically using squidoo modules.

Modules needed:

• CCK
• Flexifield
• other optional cck modules to your likings. In this example, we will use text, link and emfield

Our goal is to make a content type that enable writers and editors to dynamically add and reorder sections in their content. Sections in this page refers to the “modules” of squidoo, eg Amazon, Poll, RSS feed, Guest book, Text module and Youtube vids.

Steps:

1. First is to install CCK, flexifield and the optional modules (text, link, emfield). For emfield, you may just select the video media.

2. Flexifield only accepts valid content types and not individual cck modules. In order to utilize flexifield, create separate content types for the text, link and emfield which only contains their respective contents for simplicity. You can add more once you are familiar with the steps.

3. Create your primary content type, in this example we will use “squidoo” as our content type. Add a new flexifield. In the flexifield system settings, select the boxes for the Text, Link and Emfield content types. Set the Number of Values to unlimited.

4. Add a new squidoo content.

The following is a shot taken from the actual topicko’s add topic. It will show you how to add new fields and reorder them.