Magento Expert Forum - Improve your Magento experience

Results 1 to 2 of 2

Develop a Magento Widget in Easiest way

  1. #1
    Moderator speed2x's Avatar
    Join Date
    Mar 2013
    Location
    Hollywood, Florida, United States
    Posts
    88
    Thanks
    8
    Thanked 7 Times in 6 Posts

    Default Develop a Magento Widget in Easiest way

    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:


  2. #2
    Junior Member
    Join Date
    Sep 2018
    Location
    United Kingdom
    Posts
    576
    Thanks
    0
    Thanked 4 Times in 4 Posts

    Default

    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.

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •