Tutorial: How to Develop

A Basic Magento Extension

Howtocreateyourownblocksandtemplatesin
MagentoCommerceusingExtensions.

HendyIrawan
@hendyirawanmagentoadmin.blogspot.com
CTO,Bippo

Magento Extension
Project Folder Structure

Project Folder Structure

(design & skin)

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

Creating a Basic Block + Template

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

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

Helper class
<?php
class Bippo_Twitter_Helper_Data
extends Mage_Core_Helper_Abstract
{
}

code/Bippo/Twitter/Helper/Data.php

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

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

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

How to Use
UsageinCMSContentEditor
{{block type="bippotwitter/profilestream"}}

UsageinCMSDesigntab/LayoutXML
<reference name="content">
<block type="bippotwitter/profilestream"
name="twitterbox1"/>
</reference>

Making the Block Configurable

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

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

Usage in CMS Content

{{block type="bippotwitter/profilestream"
twitterUsername="hendyirawan"}}

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>

Supporting
Admin Panel > System > Configuration

Bippo Twitter Configuration :)

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

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

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

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

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

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

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

Need More Resources?

MagentoeCommerceDevelopmentBlog
magentoadmin.blogspot.com
Follow@hendyirawanonTwitter
FollowceefouronSlideshare
www.slideshare.net/ceefour

HendyIrawan