X
    Categories: Magento 1 How-tos, Theme and Extension ReviewsMagento Tutorials, Tips and Guides

How to Create Custom 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. Content blocks generate all the content which appears at the frontend of Magento. Given this, every Magento developer should know how to create custom widget in Magento.

Widget development in Magento is a custom front-end extension that gives the facility for non-technical 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. This article includes the following steps:

  1. Create Module Activation File
  2. Create Config File
  3. Create Widget File
  4. Create Helper Class
  5. Create Main Block File
  6. Create Widget Instance

Note: You can set your own directory name and your own widget directory pathname. I have set Cwdons as the directory name and CwWidget as widget directory pathname.

Create Module Activation File

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/Cw_Widget.xml. I have set my filename as Cw_Widget.xml.

Here is your module activation file code.

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

Once, we have created our module activation file, we will now move on to the next step.

Create Config File

After creating module activation file, we need to create the 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/Cwdons/CwWidget/etc/config.xml

<?xml version="1.0"?>
<config>
  <modules>
    <Cwdons_CwWidget>
      <version>0.1.0</version>
    </Cwdons_CwWidget>
  </modules>
  <global>
    <blocks>
      <CwWidget>
        <class>Cwdons_CwWidget_Block</class>
      </CwWidget>
    </blocks>
    <helpers>
    <CwWidget>
        <class>Cwdons_CwWidget_Helper</class>
      </CwWidget>
    </helpers>
  </global>
</config>

Create Widget File

After creating the 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/Cwdons/CwWidget/etc/widget.xml

<?xml version="1.0"?>
<widgets>
  <CwWidget_topsearches type="CwWidget/topsearches">
    <name>Top Searching Terms</name>
    <description type="desc">Lists Top Searches</description>
  </CwWidget_topsearches>
</widgets>

Create Helper Class

Now create an empty helper class in app/code/local/Cwdons/CwWidget/ Helper/data.php

<?php
class Cwdons_CwWidget_Helper_Data 
   extends Mage_Core_Helper_Abstract
{
}

Create Main Block File

Now, we need to create our main block file which will render the output contents of the widget.

Create Topsearches.php in app/code/local/Cwdons/CwWidget/ Block/Topsearches.php

<?php
class Cwdons_CwWidget_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 Searches</div>';
  foreach($searchCollection as $search){
     $html .= '<div class="widget-topsearches-searchtext">' . $search->query_text . "</div>";
   }
   $html .= "</div>";
   return $html;
 }
};

After the Topsearches.php file coding process is over, you now need to create widget instance in Magento admin for rendering it on the front-end pages.

Create Widget Instance

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. I selected widget “Top Search Term”. 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 testing website:

Conclusion

This was a basic tutorial on how to create custom widget for your Magento store. I hope this tutorial would help you in developing your custom widget. If you face any problem during development, then you can ask me in the comment section, I would be glad to help you.

Cloudways: Cloudways is a European MSP that provides custom cloud design, deployment and management solutions on leading cloud providers.