Magento widget is one of strong feature of magento what you always need to do for any magento template. In the most case, your customers only require you implement magento widget to display some static information or dynamic content from database. In this case I am pretty sure this article will help you save a lot of time in your way to research how to implement magento widget.
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
HTML Code:
<?xml version="1.0" ?>
<config>
<modules>
<Mydons_Widgetdemo>
<active>true</active>
<codePool>local</codePool>
<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
HTML Code:
<?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 calledwidget.xml in the same directory. The widget.xml should be placed at
app/code/local/Mydons/Widgetdemo/etc/widget.xml
HTML Code:
<?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 inapp/code/local/Mydons/Widgetdemo/Helper/Data.php
PHP Code:
<?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 extendMage_Core_Block_template class and implmentMage_Widget_Block_Interface
app/code/local/Mydons/Widgetdemo/Block
PHP Code:
<?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:-
View more threads in the same category:
Develop a Magento Widget in Easiest way
Reply With Quote
Bookmarks