How to Develop a Basic Magento Extension Tutorial

37,202
-1

Published on

Published in: Technology
7 Comments
15 Likes
Statistics
Notes
No Downloads
Views
Total Views
37,202
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
688
Comments
7
Likes
15
Embeds 0
No embeds

No notes for slide

How to Develop a Basic Magento Extension Tutorial

  1. 1. Tutorial: How to Develop A Basic Magento ExtensionHow to create your own blocks and templates in  Magento Commerce using Extensions.Hendy Irawan@hendyirawan ­ magentoadmin.blogspot.comCTO, Bippo
  2. 2. Magento ExtensionProject Folder Structure
  3. 3. Project Folder Structure (design & skin)
  4. 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. 5. Creating a Basic Block + Template
  6. 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. 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. 8. Helper class<?phpclass Bippo_Twitter_Helper_Data extends Mage_Core_Helper_Abstract{}code/Bippo/Twitter/Helper/Data.php
  9. 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. 10. Block Class Implementationclass 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. 11. Template File<div class="twitterbox"><scriptsrc="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. 12. How to UseUsage 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. 13. Making the Block Configurable
  14. 14. Adding Propertiesprivate $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. 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. 16. Usage in CMS Content{{block type="bippotwitter/profilestream" twitterUsername="hendyirawan"}}
  17. 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. 18. SupportingAdmin Panel > System > Configuration
  19. 19. Bippo Twitter Configuration :)
  20. 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. 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. 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. 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. 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. 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. 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. 27. Need More Resources? Magento eCommerce Development Blog magentoadmin.blogspot.com Follow @hendyirawan on Twitter Follow ceefour on Slideshare www.slideshare.net/ceefourHendy Irawan
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×