Simple magento widget development

Introduction

Magento widget development is a custom frontend extension that gives the facility for Non Technical Business users to easily create dynamic content to their website. A Widget comes with some configuration options. Basically creating a Widget is very similar to creating a module with a few more additional files. In this Blog post we will see how to create a Simple magento widget with an example.

Magento Widget Development for displaying Top Search Queries

Step 1: First create a module activation file. This custom module will create a widget that will show up in frontend. The only dependency we have is with CMS pages. app/etc/modules/Mydons_Widgetdemo.xml [crayon-590ad17c9a3fd475450724/]   Step 2: We need to specify the blocks and helper classnames in config.xml. The custom module's config.xml file needs to be created in app/code/local/Mydons/Widgetdemo/etc/config.xml [crayon-590ad17c9a40c881672028/]   Step 3: In Addition to the config.xml we also need to create another file called widget.xml in the same directory. The widget.xml should be placed at app/code/local/Mydons/Widgetdemo/etc/widget.xml [crayon-590ad17c9a412485103578/]   Here widgetdemo_topsearches tag is the widgets unique system name. type="widgetdemo/topsearches" - This is the blockname of the frontend widget. Name - Display Name of the widget in admin panel Description - A short description of what the widget does. Step 4: create an Empty helper class in app/code/local/Mydons/Widgetdemo/Helper/Data.php [crayon-590ad17c9a418010976338/]   Step 5: Now we will create the main block which will render the output contents of the widget. The _toHtml method should return the html content of the widget. The Block Class is named as Topsearches and it should extend Mage_Core_Block_template class and implment Mage_Widget_Block_Interface app/code/local/Mydons/Widgetdemo/Block [crayon-590ad17c9a41e578593984/]   For the sake of code readability i have removed the inline styles associated with the output html, feel free to add your own styles there. Note:- The widget can even be extended to include configuration options, but for the sake of simplicity i kept it short. In the future articles i will include the advanced stuff. Step 6: Now the coding portion is over, we now need to create widget instance and render it on any of the frontend page. Navigate to CMS->Widgets and click AddNewWidgetInstance Button in Admin Panel Give a name to your widget instance and configure in which page you want to show the widget. for my example i wanted to show it in leftcolumn of All CMS Pages Final Output:-