Tutorial: How To Develop A Basic Magento Extension

The document describes how to create a basic Magento extension to display a Twitter profile stream. It covers setting up the module configuration files, creating block and template files, making the block configurable, and adding configuration options in the Magento admin panel.

Uploaded by

aks09

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

193 views

Tutorial: How To Develop A Basic Magento Extension

Uploaded by

aks09

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 27

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 <[email protected]>
*/
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>
...