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

<?xml version="1.0" ?>
<config>
  <modules>
        <Mydons_Widgetdemo>
                  <active>true</active> 
local
            <depends>
               <Mage_Cms /> 
             </depends>
        </Mydons_Widgetdemo>
  </modules>
  </config>

<?xml version="1.0" ?>

<Mydons_Widgetdemo>

local

<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

<?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>

<?xml version="1.0"?>

<Mydons_Widgetdemo>

</Mydons_Widgetdemo>

</modules>

<class>Mydons_Widgetdemo_Block</class>

</widgetdemo>

</blocks>

<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

<?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>

<?xml version="1.0"?>

<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

<?php

class Mydons_Widgetdemo_Helper_Data 
     extends Mage_Core_Helper_Abstract
{

}

<?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

<?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;
 }

};

<?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:-