Simple magento widget development

By

October 16, 2013MagentoNo comments

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

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

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

Here widgetdemo_topsearches tag is the widgets unique system name.
type=”widgetdemo/topsearches”This is the blockname of the frontend widget.
NameDisplay Name of the widget in admin panel
DescriptionA short description of what the widget does.

Step 4: create an Empty helper class in app/code/local/Mydons/Widgetdemo/Helper/Data.php

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

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

Newwidgetinstance

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

WidgetLayoutupdates

Final Output:-

Widgetoutput

Leave a Reply