Custom Widget Development in Magento  For some time now, Magento has been a benchmark set which, in the framework of e-commerce on the market. Credit goes it is equipped with a wealth of built-in features and basic framework itself too develop customized extensions scalability.

In this tutorial, you will learn the concept of widgets in Magento and how to use them. I will demonstrate how to create a custom widget, it is a really powerful way to insert additional functionality in Magento.

Introduction Gadgets

As a Magento developer or site administrator, you probably know the layout of the structure of the front end of the Magento. Magento is displayed in almost every one of the front end of the content is determined by the “content block” generated. Magento’s block is a very powerful way to build the content of the front end, and allows you to use XML file provides the flexibility to deal with them.

On the other hand, Widgets are small things, allows webmasters to make use of a predetermined set of configuration options in the front end of the new features. We can say that the widget more user-friendly compared to block administrators, because they do not have to deal with the short code block insert block. To insert a widget in a page, you only need to select the widget from the widget drop-down menu, and select the configuration option is provided.

Let’s try a simple example to understand this. In the information page of your site, you want to display “Print” and “Contact Us” link. “Print” link, users can print selected pages, and “Contact Us” link allows them to send an inquiry e-mail to the technical support department. To do this, we can simply develop a Magento plugin that allows site administrators to insert this widget into the site selection static pages.

Thus, did not waste any more time, let’s dig in and see in the end how to develop custom widgets! Yes, I will stick to the example just mentioned above.

Custom Widget Development

We will develop a custom control, which allows webmasters to “print” and CMS of the page “Contact Us” link. We will also provide a link member configured so that the administrator can select which CMS page links you want to display.

I assume you’re familiar with Magento’s modular structure. First, let us look, we need to implement the file structure our custom plug-ins.

  • app/etc/modules/Envato_All.xml: It’s a file used to enable our widget module.
  • app/code/local/Envato/WidgetLinks/etc/config.xml: It’s a module configuration file.
  • app/code/local/Envato/WidgetLinks/etc/widget.xml: It’s a widget declaration file which is used to declare widget information and parameters.
  • app/code/local/Envato/WidgetLinks/Model/Options.php: It’s a model file which provides the options for the configuration.
  • app/code/local/Envato/WidgetLinks/Helper/Data.php: It’s a file which is just there as per the standards.
  • app/code/local/Envato/WidgetLinks/Block/Links.php: The display logic for the widget goes here.

File Setup

As per the Magento conventions, first we need to create the module enabler file. Create app/etc/modules/Envato_All.xml and paste the following contents in that file. We’ve used “Envato” as our module namespace and “WidgetLinks” as our module name. It’ll enable our “WidgetLinks” module by default.

01
02
03
04
05
06
07
08
09
10
<!--­­ app/etc/modules/Envato_All.xml ­­-->
<?xml version="1.0"?>
<config>
  <modules>
    <Envato_WidgetLinks>
      <active>true</active>
      <codePool>local</codePool>
    </Envato_WidgetLinks>
  </modules>
</config>

From now on, we will create in the application / Code / local / ENVATO / WidgetLinks, which is required for our plug-in module path to the file. Create an application / Code / local / ENVATO / WidgetLinks the / etc / config.xml file and paste the following content in the file. As you can see, we have just announced the models, help, and block class name by Magento module XML conventions.

<!­­– app/code/local/Envato/WidgetLinks/etc/config.xml ­­–>
<?xml version=”1.0″?>
<config>
<modules>
<Envato_WidgetLinks>
<version>0.0.1</version>
</Envato_WidgetLinks>
</modules>
<global>
<helpers>
<widgetlinks>
<class>Envato_WidgetLinks_Helper</class>
</widgetlinks>
</helpers>
<blocks>
<widgetlinks>
<class>Envato_WidgetLinks_Block</class>
</widgetlinks>
</blocks>
<models>
<widgetlinks>
<class>Envato_WidgetLinks_Model</class>
</widgetlinks>
</models>
</global>
</config>

Now for the interesting stuff: let’s create the app/code/local/Envato/WidgetLinks/etc/widget.xml file and paste the following contents in it.

<!­­– app/code/local/Envato/WidgetLinks/etc/widget.xml ­­–>
<?xml version=”1.0″?>
<widgets>
<widgetlinks_links type=”widgetlinks/links” translate=”name description” module=”widgetlinks”>
<name>Print and Inquiry Options</name>
<description>Allows to add Print and Inquiry link options</description>
<parameters>
<link_options>
<label>Link Options</label>
<visible>1</visible>
<required>1</required>
<type>multiselect</type>
<source_model>widgetlinks/options</source_model>
</link_options>
</parameters>
</widgetlinks_links>
</widgets>

Let us know about the specific file. First, we use a unique identifier widgetlinks_links wrapped announce our widgets. Next, type attribute is used to map the assembly file, in our case, it will use the program / code / local / ENVATO / WidgetLinks / seat / Links.php name. Translation and module properties are not self-evident.

In addition, we want to plug in our configuration, we use the <parameter> tag to declare this. You can declare as many arguments, you want to offer, but in our case, it is named <link_options> only one parameter. This will be a simple multi-drop-down menu to select the two options: “Print” and “Contact Us.” Yes, in the <source_model> tag mapped to the application of the model file / Code / local / ENVATO / WidgetLinks / model / Options.php, from where we will get our Options drop-down.

Next, let’s application model file we created / Code / local / ENVATO / WidgetLinks / model / Options.php.

<?php
// app/code/local/Envato/WidgetLinks/Model/Options.php
class Envato_WidgetLinks_Model_Options {
/**
* Provide available options as a value/label array
*
* @return array
*/
public function toOptionArray() {
return array(
array(‘value’ => ‘print’, ‘label’ => ‘Print Button’),
array(‘value’ => ’email’, ‘label’ => ‘Inquiry Email Button’),
);
}
}

Does this need any explanation? It’s just used to return the configuration options for our pull-down!

Further, to create the application / Code / local / ENVATO / WidgetLinks / seat / Links.php file and insert the following code in the file.

<?php
// app/code/local/Envato/WidgetLinks/Block/Links.php
class Envato_WidgetLinks_Block_Links extends Mage_Core_Block_Abstract implements Mage_Widget_Block_Interface {
/**
* Produce links list rendered as html
*
* @return string
*/
protected function _toHtml() {
$html = ”;
$link_options = $this­>getData(‘link_options’);

if (empty($link_options)) {
return $html;
}

$arr_options = explode(‘,’, $link_options);

if (is_array($arr_options) && count($arr_options)) {
foreach ($arr_options as $option) {
Switch ($option) {
case ‘print’:
$html .= ‘<div><a href=”javascript: window.print();”>Print</a></div>’;
break;
case ’email’:
$html .= ‘<div><a href=”mailto:yourcompanyemail@domain.com&subject=Inquiry”>Contact Us</a></div>’;
break;
}
}
}

return $html;
}
}

This is the one that will do the actual work is displayed in a small window file link front end. First, we use the following code fragment extracted configuration value of variable link_options.

$ Link_options = The $> The getData (“link_options’);

This is just the selected options by the site administrator CMS provided in small parts of the page. The rest of the code is easy to understand, because we are just ready HTML output in accordance with the options configured.

Finally, we need only need to create an application / Code / local / ENVATO / WidgetLinks / assistant / Data.php documents to ensure Magento translation system work properly. It is almost a blank document, but it should be there! So let us create it.

<?php
// app/code/local/Envato/WidgetLinks/Helper/Data.php
/**
* Sample Widget Helper
*/
class Envato_WidgetLinks_Helper_Data extends Mage_Core_Helper_Abstract
{
}