how to develop a basic magento extension tutorial

Tutorial: How to DevelopA Basic Magento Extension

How to create your own blocks and templates in Magento Commerce using Extensions.

Hendy Irawan@hendyirawan magentoadmin.blogspot.comCTO, Bippo

http://twitter.com/hendyirawan

http://magentoadmin.blogspot.com/

http://www.bippo.co.id/?utm_source=slideshare&utm_medium=slides&utm_content=basic-magento-extension&utm_campaign=magento

Magento ExtensionProject 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>



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');}

}



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

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>


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;}



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>


SupportingAdmin Panel > System > Configuration


Bippo Twitter Configuration :)


Adminhtml Input Fields<?xml version="1.0"?><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"?><config> <tabs> <bippo> <label>Bippo</label> <sort_order>196</sort_order> </bippo> </tabs>...

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> ...



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> ...



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"> ...



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>



Need More Resources?

Magento eCommerce Development Blogmagentoadmin.blogspot.com

Follow @hendyirawan on Twitter

Follow ceefour on Slidesharewww.slideshare.net/ceefour

Hendy Irawan

http://magentoadmin.blogspot.com/

http://twitter.com/hendyirawan

http://www.slideshare.net/ceefour


how to develop a basic magento extension tutorial

Technology