How to Create Widget in Magento?

Widgets are one of the strongest features of Magento store. They are useful for displaying static information or dynamic content from the database. Every content which is displayed in the front end of Magento is generated by content blocks.

Widget development in Magento is a custom front-end extension that gives the facility for nontechnical users to create dynamic content easily for their website. Every widget has some configuration options. Creating widget in Magento is very similar to creating a module, the only difference is that it has some more additional files. In this article, I am going to show you how to develop custom widgets in Magento.

Note: You can set your own directory name and your own widget directory path. I have set 'Customdir' as a directory name and 'CustomWidget' as widget directory path.

Step 1: At first, you need to create your module activation file. With this custom module file, you will create a widget that shows in the frontend. For creating your module activation file, go to app/etc/modules/Custom_Widget.xml. I have set my filename as Custom_Widget.xml.

Put the below code in the file.

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

 Step 2: After creating module activation file, we need to create config.xml file and specify blocks and helper class names in config.xml. The config.xml file needs to be created in app/code/local/Customdir/CustomWidget/etc/config.xml

<?xml version="1.0"?>
<config>
  <modules>
    <Customdir_CustomWidget>
      <version>0.1.0</version>
    </Customdir_CustomWidget>
  </modules>
  <global>
    <blocks>
      <CustomWidget>
        <class>Customdir_CustomWidget_Block</class>
      </CustomWidget>
    </blocks>
    <helpers>
    <CustomWidget>
        <class>Customdir_CustomWidget_Helper</class>
      </CustomWidget>
    </helpers>
  </global>
</config>

 Step 3: After creating config.xml file we also need to create another file widget.xml in the same directory. The widget.xml should be placed in app/code/local/Customdir/CustomWidget/etc/widget.xml

<?xml version="1.0"?>
<widgets>
  <CustomWidget_topsearch type="CustomWidget/topsearch">
    <name>Top Searching Terms</name>
    <description type="desc">Lists Top Searches</description>
  </CustomWidget_topsearch>
</widgets>

 Step 4: Now create an empty helper class in app/code/local/Customdir/CustomWidget/Helper/data.php

<?php
class Customdir_CustomWidget_Helper_Data 
   extends Mage_Core_Helper_Abstract
{
}

Step 5: Now, we need to create our main block file which will render the output contents of the widget. Create Topsearch.php in app/code/local/Customdir/CustomWidget/Block/Topsearch.php

<?php
class Customdir_CustomWidget_Block_Topsearch
 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-topsearch-container">' ;
   $html .= '<div class="widget-topsearch-title">Top Search</div>';
  foreach($searchCollection as $search){
     $html .= '<div class="widget-topsearch-searchtext">' . $search->query_text . "</div>";
   }
   $html .= "</div>";
   return $html;
 }
};

Now need to create widget instance in Magento admin for rendering it on the frontend pages.

Login to your Magento admin and go to CMS -> Widget and click on the top “Add New Widget Instance” button.

In the Type field, select your widget. In Design Package Theme, select your Magento store theme. Now click on the Continue button.

 Set your Widget Instance Title as per your requirement, With the “Display on” option you can select your pages where you want to show your widget. If you want to show your widget in all the pages, then select all pages. After this, click on the Save button and you are done.

Here is what the final result looks like on the website.

 If you face any problems or need our professional services, please email us at [email protected]