Now that we know what Magento widgets are, let us see how easily we can implement them. We have discussed previously that widgets are just like Magento extensions which allow us to add any content to frontend dynamically and easily. Any extension can have any number of widgets. Let us create a widget by implementing Magento module.
Directory Structure:
What we have done above is that we have defined a name for our new module that is “Sample”, and then we defined our first widget called “FirstWidget”. Within FirstWidget, XML configuration file is defined in “etc” folder and a default helper file in “helper” folder. The configuration file will define page blocks such as content blocks, structural blocks, event observers and anything you will be using. On the other hand directly beneath “app” is another “etc” folder under which “Sample_FirstWidget.xml” is defined which is also called “enabler” file. This configuration file is necessary for Magento to learn about your module or widget such as where it is residing, what is the name etc?
Let us first see now what does this enabler file defines?
What we have done in above code is that we have defined our module structure such as the codepool “app-code-local” for our module named “Sample” and within it we defined our first widget. Also we defined what type of widget this would be by indicating the dependencies.
Now let us turn toward helper class. Each module has default helper class such as “Data.php”. Helper classes as the name suggests helps you create methods that you can use anywhere in your program. But we do not define any method in default helper class. It just makes the translation subsystem work properly. Below code just defines a default helper class.
– app/code/local/Sample/FirstWidget/Helper/Data.php:
Now that we are done with these two items, let us start with our module’s configuration. We do this by working with “etc” folder within First Widget. We will enter the version name of the our module, define helper and block’s base class names because we are using custom module..
We have created our basic module and now we are ready to define our widget. If we are implementing widget through Magento modules then we need to declare them in widget.xml file in “etc” folder of the module (the one in which configuration file is located). When declaring widgets following points are important,
1. The name of the node should be unique
2. Reference of the block is provided by using attribute “type”
3. Declare widget name
4. Short description
As we have discussed previously, widgets are placed on frontend anywhere. Anywhere means any block on frontend (because Magento breaks up frontend into several blocks). You can create a new block where the widget will be placed or use existing location. Let us create a new block,
If your module creator has not created a folder “Block” within “FirstWidget”, then you can yourself create it. In this folder create a block file e.g. Facebook.php. These block classes must implement Mage_Widget_Block_Interface which has three methods in its declaration.
- toHtml() — This method is used to render output to the browser
- addData(array $arr), setData($key, $value = null) — You can pass any parameter to widget object by using these methods.
– Interface Mage_Widget_Block_Interface
Now let us open up our Facebook.php file and create a frontend block for widget,
Methods of this interface have already been defined in parent classes, so we don’t need to redefine them here, method named “toHtml()” is implemented in Mage_Core_Block_Abstract; addData() and setData() are implemented in Varien_Object which is the parent class of Mage_Core_Block_Abstract. So extending all frontend bocks from Mage_Core_Block_Abstract makes your work easy as most of the methods required to deal with frontend have already been defined. If you want to use templates in your widgets then extend it from Mage_Core_Block_Template or one of its ancestors instead.
Now that we have created our first widget in magento plateform, we will see in the next post how to insert this widget by using Magento admin panel and have a look on the amazing modules developed by Fme Extensions Team……
Best Magento Extensions 