A stepwise guideline on creating a Magento widget


By -

A stepwise guideline on creating a Magento widget

The urge for gaining an extensive control over the front-end behavior of your Magento e-store might have definitely encouraged you to hop onto several techniques. One such technique is developing a widget. This is what I’ll be looking into in this tutorial.

What all you’ll find in this tutorial?

Here, I’ll be offering you a stepwise description of the process associated with creation of a Magento widget. As you read through the post, you’ll find that developing a widget is quite different from developing a traditional Magento extension.

So, let’s now cover the steps involved with creation of a Magento widget

Step 1- Create an empty module

For initiating a new Magento module, you need to create a module code folder which contains a module configuration file named as config.xml along with a default module helper. Follow the below steps for creating the empty Magento module:

  • Define the “enabler” file

Within this “enabler” file, you need to define the code pool along with module dependencies. By specifying dependencies, you guarantee that the respective module would be installed only after the module, your e-store depends on. With this file, you’ll be able to specify whether the module should be enabled or disabled. The code snippet associated with this step is shown below:

  • Create the default module helper

For defining the default module helper, all you need to do is simply define a class which extends Mage_Core_Helper_Abstract. Here is how it goes like:

  • Create the configuration file

Here, you need to define the module version in the configuration file. Also, you need to define a helper along with blocks base class using the code snippet shown below:

Step 2- Declare the widgets

You need to declare the widgets(available within module) in the widget.xml file available under the Magento module’s folder(this is the same one which contains the module configuration file config.xml). Every widget declared here must include the following:

  • A node with a unique name
  • type=”…” attribute, also referred to as a block reference
  • Widget name declaration
  • A short description of the widget

Here is the code associated with declaration of widgets:

Step 3- Create front-end blocks for widgets

As per this step, you need to create a widget block which is basically a class that implements Mage_Widget_Block_Interface and the interface declaration includes the following three methods:

  • toHtml()- this is used for producing the actual output
  • addData(array $arr), setData($key, $value=null)- this is used for enabling Magento to assign the widget configuration parameters to a particular widget instance

The code for this step is displayed below:

Next, you need to create the widget frontend block by making the following moderations in the app/code/local/Sample/WidgetOne/Block/Digg.php file:

If you look at the above code, you’ll find the method toHtml() has been implemented in Mage_Core_Block_Abstract; the methods addData() and setData() have been implemented in Varien_Object i.e the parent class of Mage_Core_Block_Abstract.

Next, you can override the _toHtml() method that’s called internally for producing the initial HTML. The code for the same is shown below:

Step 4-Add widget instances in admin panel using the content editor

Now that you’re done with the programming part, it’s time to go to the admin panel in order to check the addition of widgets. For this, simply go to CMS-> Pages in your admin panel, select the page for which you want to add the widget and click on “Content” tab for the chosen page. Start adding widget instances for the selected page as shown in the below screen-shots:

guideline on creating a Magento widget_Step 4

Next are the screen-shots for the widget in the CMS Page content available in two modes viz: in WYSIWYG and plain text mode:

guideline on creating a Magento widget_WYSIWYG and plain text mode


guideline on creating a Magento widget_image3Here’s a look at how the added Magento widget (marked in Red) will look like, in the front-end:

guideline on creating a Magento widget_image4

That’s it!


Final Thoughts

With the aforementioned steps, we’re done with creating a new widget for the Magento e-store. So, get going with adding handy and highly useful widgets by following the approach covered above.

Isabella Morris is currently employed with a renowned custom Magento development company and is also engaged in writing informative articles on best tools and tricks for Magento development. Her write-ups have proved beneficial for a wider group of Magento developers across the globe.

Comments are closed.