Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How to Develop a Basic Magento Extension Tutorial

40,529 views

Published on

Published in: Technology
  • Hi, we have dedicated magento developers for ecommerce website development, we have 11 years experience in Magento field. We also develop Medma Marketplace magento extension which have highest downloads. We are from Medma, the best Magento development company in India. You can hire dedicated Magento developer from Medma free for one week.If you have any query regarding Magento development open your ticket on support.medma.in or message us on magento-development.medma.net
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Thanks for sharing this detailed information on Magento extension development. It was really a useful read. Here’s how Magento extensions can help an ecommerce store owner to maximize the benefits of Magento development and business profits. Take a look! https://goo.gl/PhpKco
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice and easy tutorial. You can also find great tutorials for Magento on Magenticians blog and Magento docs. I recommend to try these sources as well.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Very helpful tutorial to develop an extension for magento. Thanks for sharing with us. Keep in touch.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Very helpful tutorial to develop an extension for magento. Thanks for sharing with us. Keep in touch.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×