2. Creating a widget with options

Creating a widget with options
If you select one of the existing widgets, you can see that some of them come with configurations options. The widget we created is very basic and now we are going to see how to add some simple options that will allow the store manager to customize the frontend block. The plan is to allow the user to choose which services to display on the frontend.
The options we are going to insert are as follows:
• One checkbox option that shows or hides the shares count bubble
• One input textbox that allows you to insert a block title

Adding options to our widget.xml
To add some options to our widget, you need to edit the widget.xml file by adding the following parameters:
• required: This is used to define if an option is required or not
• visible: This is used to set the visibility of an option
• label: This is used to set the option title
• type: This is used to set the type of the option (checkbox, text, and so on)

To start adding options to the widget, return to the widget.xml file and inside the first widget, insert the following highlighted code just after the

 </socialwidget_icons> 
<!-- Adding option to the widgets -->
	<socialwidget_share type="socialwidget/share" translate="name description" module="socialwidget">
		<name>Social Sharing Widget (with options)</name>
		<description type="desc">Adds social sharing services</description>
		<parameters>
			<block_title translate="Block Title">
				<required>1</required>
				<visible>1</visible>
				<label>Block Title</label>
				<type>text</type>
			</block_title>
			<show_count>
				<visible>1</visible>
				<label>Show Share Count Bubble</label>
				<type>checkbox</type>
				<value>true</value>
			</show_count>
		</parameters>
	</socialwidget_share>
<!-- widget option end -->

Creating the frontend widget block
As we have seen previously, we need to create a block that generates the code in the frontend. In this case, we insert some conditions to display the user choice. To create the block, perform the following steps:
1.Open or create the Share.php file in app/code/local/BookStore/SocialWidget/Block and insert the following code:

<?php
	class BookStore_SocialWidget_Block_Share extends Mage_Core_Block_Abstract implements Mage_Widget_Block_Interface{
		protected function _toHtml() {
			
		}
	}
?>	

2.Then, inside the _toHtml function, we first retrieve the data from the options
we created in the XML file, in the following way:

$block_title = $this->getData('block_title');
$show_count = $this->getData('show_count');	

3.Then, we create a condition to check the checkbox value to enable or disable the social count bubble:

$bubblecode = "";
if($show_count=='true')$bubblecode = "<a class='addthis_counter addthis_bubble_style'></a>";

4.Finally, we generate the output in HTML with the following variables:

$html = '<div class="social-share">
	<div class="block-title">
		<strong>'. $block_title.'</strong>
	</div>';
	$html .='<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
		<a class="addthis_button_facebook"></a>
		<a class="addthis_button_twitter"></a>
		<a class="addthis_button_pinterest_share"></a>
		<a class="addthis_button_google_plusone_share"></a>
		<a class="addthis_button_compact"></a>'.$bubblecode.'
	</div>
	<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-52cae78918520295"></script>
</div>';
return $html;	

We are done! We have created our widget with options! The full code of the Share. php file is as follows:

<?php
	class BookStore_SocialWidget_Block_Share extends Mage_Core_Block_Abstract implements Mage_Widget_Block_Interface{
		protected function _toHtml() {
			$block_title = $this->getData('block_title');
			$show_count = $this->getData('show_count');
			$bubblecode = "";
			if($show_count=='true')$bubblecode = "<a class='addthis_counter addthis_bubble_style'></a>";
			$html = '<div class="social-share">
				<div class="block-title">
					<strong>'. $block_title.'</strong>
				</div>';
				$html .='<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
					<a class="addthis_button_facebook"></a>
					<a class="addthis_button_twitter"></a>
					<a class="addthis_button_pinterest_share"></a>
					<a class="addthis_button_google_plusone_share"></a>
					<a class="addthis_button_compact"></a>'.$bubblecode.'
				</div>
				<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-52cae78918520295"></script>
			</div>';
			return $html;
		}
	}
	
?>

Now that the widget has been created, let’s perform the following steps to add it in the admin panel:
1. Let’s go to CMS | Pages in the admin panel and add a widget instance to the About Us page in a WYSIWYG editor or plain text mode, and select the new widget Social Sharing Widget (with options).
2. Insert the title that you prefer into the block.
3. Then, leave Show Share Count Bubble unchecked.
4. Click the Insert Widget button, and the following code will be added into the page code:

{{widget type="socialwidget/share" block_title="Inser here your social share Title!"}}

5. Now, save the page and go to the frontend. You will see the social sharing options with the custom title and the social share count bubble disabled

As you can see, it is not so hard to create a Magento widget. The Magento widgets allow you to insert neat add-ons that will add value to your theme.This is a very simple example of what you can do with widgets. You can try to create a more advanced and complex one that includes more options and customizable fields!

Advertisements

1. Developing a widget

Magento widgets allow the administrator of the store with no technical knowledge to easily add dynamic content (for example, including product data) to the pages in Magento stores.

The method of developing a widget does not differ much from that of developing a regular Magento module.We will start by creating a sample module that provides one simple widget.

Creating an empty module
Let’s start by creating the module’s directory structure and the main files.The module folder must be located into app/code. Here, you have to decide in which code pool you want to create the module.Usually, you can create your module under the local code pool. Never create a module inside the core folder of Magento and never edit the files inside the core.

1.open the BookStore_SocialWidget.xml file located in the etc folder,and create the file that will enable the module with the following code:

<?xml version="1.0"?>
<config>
	<modules>
		<BookStore_SocialWidget>
			<active>true</active>
			<codePool>local</codePool>
			<depends>
				<Mage_Cms/>
			</depends>
		</BookStore_SocialWidget>
	</modules>
</config>
[---By changing <active>true</active> to <active>false</active>,you can enable or disable the module. This file is the same for each module; so, if you want to enable or disable some module,
you can do so in this way.---]

2.Now, let’s create the default module Helper. The default helper should be defined to make the translation subsystem work properly. You need not write any code here; you only need to define a class that extends the core helper, Mage_Core_Helper_Abstract.Open the Data.php file in app/code/local/BookStore/SocialWidget/Helper/ and insert the following code:

<?php
/**
* BookStore Social Widget
*/
class BookStore_SocialWidget_Helper_Data extends Mage_Core_Helper_Abstract{
}

[–If you don’t create this file with the preceding code, the system will generate an error.–]

3.Now to set up the module configuration, we need to create the configuration file called config.xml. Every module has this file and it contains a lot of information such as the module version and the default configurations.It is also used to define the helper and blocks’ base class names.So, let’s create the config.xml file in app/code/local/BookStore/SocialWidget/etc/ with the following code:

<?xml version="1.0"?>
<config>
	<modules>
		<BookStore_SocialWidget>
			<version>0.0.1</version>
		</BookStore_SocialWidget>
	</modules>
	<global>
		<helpers>
			<socialwidget>
				<class>BookStore_SocialWidget_Helper</class>
			</socialwidget>
		</helpers>
		<blocks>
			<socialwidget>
				<class>BookStore_SocialWidget_Block</class>
			</socialwidget>
		</blocks>
	</global>
</config>

4.Then, we need to declare the widgets. All the widgets provided by the module must be declared in the widget.xml file that is located inside the etc folder with the the config.xml file. In the widget.xml file you created,insert the following code that defines a single widget:

<?xml version="1.0"?>
<widgets>
	<socialwidget_icons type="socialwidget/icons">
		<name>Social Sharing Type: Icons</name>
		<description type="desc">Adds social sharing with Icons</description>
	</socialwidget_icons>
</widgets>

Of course you can define multiple widgets in the same file,for example:

<?xml version="1.0"?>
<widgets>
	<socialwidget_icons type="socialwidget/icons">
		<name>Social Sharing Type: Icons</name>
			<description type="desc">Adds social sharing with Icons</description>
		</socialwidget_icons>
	<socialwidget_buttons type="socialwidget/buttons">
		<name>Social Sharing Type: Buttons</name>
		<description type="desc">Adds social sharing with classics Buttons</description>
	</socialwidget_buttons>
</widgets>

Now we will work with a single widget definition as the first example.As you can see from the preceding code, the widget instance must contain the following information:
• A unique name node used in the system (in our case,socialwidget_icons)
• The widget name
• The type=”…” attribute
• A short description of the widget

5.We will now create the frontend blocks for our widgets.We will create the code that will return an output of the widget in the frontend. To do this, open the Icons.php file you created in app/code/local/BookStore/SocialWidget/Block/Icons.php and add the following code:

<?php
class BookStore_SocialWidget_Block_Buttons extends Mage_Core_Block_Abstract implements Mage_Widget_Block_Interface{
	protected function _toHtml(){
		$html = ' . . .';     // code to be displayed in the frontend
		return $html;
	}
}

We have just created a class that implements an interface, but we don’t have all the methods of that interface because they are already implemented in the ancestors of the method toHtml() class, which is implemented in Mage_Core_Block_Abstract.

6.Now that we have created the frontend block, we need to insert the expected output into HTML. As planned, we want to add the addthis code in the Icons.php file inside the $html variable.

<?php
class BookStore_SocialWidget_Block_Icons extends Mage_Core_Block_Abstract implements Mage_Widget_Block_Interface {
	protected function _toHtml() {
		$html ='<!-- AddThis Button BEGIN -->	
			<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
				<a class="addthis_button_facebook"></a>
				<a class="addthis_button_twitter"></a>
				<a class="addthis_button_pinterest_share"></a>
				<a class="addthis_button_google_plusone_share"></a>
				<a class="addthis_button_compact"></a><aclass="addthis_counter addthis_bubble_style"></a> 
			</div>
			<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-52cae78918520295"></script>
			<!-- AddThis Button END -->';
		return $html;
	}
}

7.Adding the widget to the CMS page
Now our first widget is completed, and we are done with programming. Let’s go to the admin panel and check if our brand new widget is available to be added to either a CMS page or a static block. To do this, follow these steps:

  1. Let’s go to CMS | Pages in the admin panel and add the widget instance on the About Us page. Open it from the list of CMS pages, and click on the Content tab on the left and click insert widget button,A widget selection and configuration pop-up opens with the options of all the available widgets.

  2. Select the new widget Social Sharing Type: Icons and click on the Insert Widget button.
    As you can see in the CMS page content, the result is a short piece of code that calls the widget:
    {{widget type=”socialwidget/icons”}}

  3. Open the page at the frontend and you will see the social sharing icons where you placed the widget. We are done! We’ve just created our first Magento widget.