Magento Modules And Widgets

Now that we know what Magento widgets are, let us see how easily we can Clich?s them. We have discussed previously that widgets are just like Magento extensions which allow us to add any content to front end dynamically and easily. Any extension can have any number of widgets. Let us create a widget by implementing Magento module.

Directory Structure:

For Screen Shot Please click the snapshots link at the Bottom

What we have done above is that we have defined a name for our Magento module that is ”Sample”, and then we defined our first widget called ”FirstWidget”. Within FirstWidget, XML configuration file was 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 code pool ”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 makes the translation subsystem work properly. Below code just defines a default helper class.

- app/code/local/Sample/FirstWidget/Helper/Data.php:

For Screen Shot Please click the snapshots link at the bottom

Now that we have completed these two items, let us start with our module’s configuration. We do this by working with ”etc” folder within FirstWidget. We will enter the version name of our modules, define helper and block’s base class names because we are using custom modules.

For Screen Shot Please click the snapshots link at the Bottom

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 familyguyquestforstuffhacksz is present). When declaring widgets following points are important,

1. The name of the node must be unique

2. Reference of the block is to be provided by using attribute ”type”

3. Declare widget name

4. Short description

For Screen Shot Please click the snapshots link at the Bottom

As we have discussed previously, widgets are to be placed on front end anywhere. Anywhere means any block on front end (because Magento breaks up front end into several blocks). You can create a new block where the widgets shall be placed. 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

For Screen Shot Please click the snapshots link at the Bottom

Now let us open up our Facebook.php file and create a frontend block for widget,

For Screen Shot Please click the snapshots link at the Bottom

Methods of this interface have already been defined in parent classes, so we don’t need to redefine them here, method named ”toHtml()” has been implemented in Mage_Core_Block_Abstract; ”addData()” and ”setData()” have been implemented in Varien_Object which is the parent class of Mage_Core_Block_Abstract. So extending all front end blocks from Mage_Core_Block_Abstract makes your work easy as most of the methods required to deal with front end 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 by using Magento extensions, we will see in the next post how to insert this widget by using Magento admin panel.