How To Create Custom Widget In Magento

Magento widgets are one of the strongest features of the platform. 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 Magento widget.

Magento widget development 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 Magento widget 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 create custom Magento widgets. 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 Magento widget for your online store. I hope this tutorial would help you in developing your custom widget. While working on backend or frontend development, loading issues can become a problem. This is why it is important to opt for an efficient Magento hosting service that guarantees fast response times and loading speed.

If you face any problem during the development, you can reach out in the comment section and I’d be happy to help.

Abdur Rahman

Abdur Rahman is the Magento whizz at Cloudways. He is growth ambitious, and aims to learn & share information about Ecommerce & Magento Development through practice and experimentation. He loves to travel and explore new ideas whenever he finds time. Get in touch with him at [email protected]

Get Connected on: Twitter Community Forum