1. Tutorial: How to Develop
A Basic Magento Extension
How to create your own blocks and templates in
Magento Commerce using Extensions.
Hendy Irawan
@hendyirawan ­ magentoadmin.blogspot.com
CTO, Bippo

2. Magento Extension
Project Folder Structure

3. Project Folder Structure
(design & skin)

4. Filename Mapping Conventions
 code/{Company}/{Module}
-> app/code/community/{Company}/{Module}
 design/frontend/base/default/...
-> app/design/frontend/base/default/...
 skin/frontend/base/default/...
-> skin/frontend/base/default/...
 {Company}_{Module}.xml
-> app/etc/modules/{Company}_{Module}.xml

5. Creating a Basic Block + Template

6. Module etc/config.xml (Basic)
<?xml version="1.0" encoding="UTF-8"?>
<config>
<modules>
<Bippo_Twitter>
<version>1.0.0</version>
</Bippo_Twitter>
</modules>
</config>
code/Bippo/Twitter/etc/config.xml

7. Block & Helper config.xml
<config>
...
<global>
<models/>
<blocks>
<bippotwitter >
<class>Bippo_Twitter_Block </class>
</bippotwitter >
</blocks>
<helpers>
<bippotwitter >
<class>Bippo_Twitter_Helper </class>
</bippotwitter >
</helpers>
</global>
</config>
code/Bippo/Twitter/etc/config.xml

8. Helper class
<?php
class Bippo_Twitter_Helper_Data
extends Mage_Core_Helper_Abstract
{
}
code/Bippo/Twitter/Helper/Data.php

9. Block Class Skeleton
<?php
/**
* Twitter Profile Stream.
*
* @category Bippo
* @package Bippo_Twitter
* @author Rully Lukman <rully@bippo.co.id>
*/
class Bippo_Twitter_Block_Profilestream
extends Mage_Core_Block_Template
{
}
code/Bippo/Twitter/Block/Profilestream.php

10. Block Class Implementation
class Bippo_Twitter_Block_Profilestream
extends Mage_Core_Block_Template {
public function __construct() {
parent::__construct();
// template
$this->setTemplate('bippotwitter/twitter-box.phtml');
}
}
code/Bippo/Twitter/Block/Profilestream.php

11. Template File
<div class="twitterbox">
<script
src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
...
}
}).render().setUser('bippoindonesia').start();
</script>
</div>
design/frontend/base/default/
template/bippotwitter/twitter-box .phtml

12. How to Use
Usage in CMS Content Editor
{{block type="bippotwitter/profilestream"}}
Usage in CMS Design tab / Layout XML
<reference name="content">
<block type="bippotwitter/profilestream"
name="twitterbox1"/>
</reference>

13. Making the Block Configurable

14. Adding Properties
private $twitterUsername ;
public function __construct() {
parent::__construct();
// property default values
$this->twitterUsername = 'bippoindonesia';
// template
$this->setTemplate('bippotwitter/twitter-box.phtml');
}
public function getTwitterUsername () {
return $this->twitterUsername ;
}
public function setTwitterUsername($twitterUsername) {
$this->twitterUsername = $twitterUsername ;
}
code/Bippo/Twitter/Block/Profilestream.php

15. Using Properties
<div class="twitterbox">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
...
}
}).render()
.setUser('<?php echo $this->getTwitterUsername() ?> ')
.start();
</script>
</div>
design/frontend/base/default/
template/bippotwitter/twitter-box .phtml

16. Usage in CMS Content
{{block type="bippotwitter/profilestream"
twitterUsername="hendyirawan"}}

17. Usage in CMS Design tab /
Layout XML
<reference name="content">
<block type="bippotwitter/profilestream"
name="twitterbox2">
<action method="setTwitterUsername">
<twitterUsername>
soluvas
</twitterUsername>
</action>
</block>
</reference>

18. Supporting
Admin Panel > System > Configuration

19. Bippo Twitter Configuration :)

20. Adminhtml Input Fields
<?xml version="1.0"?>
<!--
/**
* Bippo Twitter
*
* @category Bippo
* @package Bippo_Twitter
* @copyright Copyright (c) 2011 Bippo.co.id
*/
-->
<config>
<tabs>
<bippo>
<label>Bippo</label>
<sort_order>196</sort_order>
</bippo>
</tabs>
...
code/Bippo/Twitter/etc/system.xml

21. Tabs in Configuration Page
<?xml version="1.0"?>
<!--
/**
* Bippo Twitter
*
* @category Bippo
* @package Bippo_Twitter
* @copyright Copyright (c) 2011 Bippo.co.id
*/
-->
<config>
<tabs>
<bippo>
<label>Bippo</label>
<sort_order>196</sort_order>
</bippo>
</tabs>
...
code/Bippo/Twitter/etc/system.xml

22. Sections
<config>
...
<sections>
<bippotwitter translate="title"
module="bippotwitter">
<label>Twitter</label>
<tab>bippo</tab>
<frontend_type>text</frontend_type>
<sort_order>73</sort_order>
<show_in_default>1</show_in_default>
<show_in_website>1</show_in_website>
<show_in_store>1</show_in_store>
<groups>
...
code/Bippo/Twitter/etc/system.xml

23. Groups
<config>
...
<sections>
<bippotwitter translate="title"
module="bippotwitter">
...
<groups>
<general translate="label">
<label>General</label>
<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>
<fields>
...
code/Bippo/Twitter/etc/system.xml

24. Fields
<config>
...
<sections>
<bippotwitter ...>
...
<groups>
<general ...>
...
<fields>
<custom_twitter_id translate="label">
<label>Twitter ID</label>
<comment><![CDATA[Twitter username]]></comment>
<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>
</custom_twitter_id>
<number_of_tweets translate="label">
...
code/Bippo/Twitter/etc/system.xml

25. Access Control
<?xml version="1.0"?>
<config>
<acl>
<resources>
<admin>
<children>
<system>
<children>
<config>
<children>
<bippotwitter translate="title" module="bippotwitter">
<title>Twitter</title>
</bippotwitter>
</children>
</config>
</children>
</system>
</children>
</admin>
</resources>
</acl>
</config>
code/Bippo/Twitter/etc/adminhtml.xml

26. Default Configuration Values
<config>
...
<default>
<bippotwitter >
<general>
<custom_twitter_id >bippoindonesia</custom_twitter_id >
<number_of_tweets >5</number_of_tweets>
<live>1</live>
</general>
</bippotwitter >
</default>
...
</config>
code/Bippo/Twitter/etc/config.xml

27. Need More Resources?
 Magento eCommerce Development Blog
magentoadmin.blogspot.com
 Follow @hendyirawan on Twitter
 Follow ceefour on Slideshare
www.slideshare.net/ceefour
Hendy Irawan