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
1 2 3 4 5 6 7 8 9 10 11 12 |
<?xml version="1.0" ?> <config> <modules> <Mydons_Widgetdemo> <active>true</active> local <depends> <Mage_CMS /> </depends> </Mydons_Widgetdemo> </modules> </config> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?xml version="1.0"?> <config> <modules> <Mydons_Widgetdemo> <version>0.1.0</version> </Mydons_Widgetdemo> </modules> <global> <blocks> <widgetdemo> <class>Mydons_Widgetdemo_Block</class> </widgetdemo> </blocks> <helpers> <widgetdemo> <class>Mydons_Widgetdemo_Helper</class> </widgetdemo> </helpers> </global> </config> |
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
1 2 3 4 5 6 7 |
<?xml version="1.0"?> <widgets> <widgetdemo_topsearches type="widgetdemo/topsearches"> <name>Top Search Terms</name> <description type="desc">Lists the Top Search Queries</description> </widgetdemo_topsearches> </widgets> |
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
1 2 3 4 5 6 7 |
<?php class Mydons_Widgetdemo_Helper_Data extends Mage_Core_Helper_Abstract { } |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?php class Mydons_Widgetdemo_Block_Topsearches extends Mage_Core_Block_Template implements Mage_Widget_Block_Interface { protected function _toHtml() { $searchCollection = Mage::getModel('catalogsearch/query') ->getResourceCollection() ->setOrder('popularity', 'desc'); $searchCollection->getSelect()->limit(3,0); $html = '<div id="widget-topsearches-container">' ; $html .= '<div class="widget-topsearches-title">Top Search Terms</div>'; foreach($searchCollection as $search){ $html .= '<div class="widget-topsearches-searchtext">' . $search->query_text . "</div>"; } $html .= "</div>"; return $html; } }; |
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:-