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
1. 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 </description> tag:
<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>
<required>0</required>
<visible>1</visible>
<label>Show Share Count Bubble</label>
<type>checkbox</type>
<value>true</value>
</show_count>
</parameters>
</socialwidget_share>
As you can see, the <parameters> block contains the two options.
Our final widget.xml file should now contain the following code:
<?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_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>
</widgets>
2. 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:
- Open or create the 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() {
}
}
- 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’);
- 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>”;
- 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() {
// Get Widget Data
$block_title = $this->getData(‘block_title’);
$show_count = $this->getData(‘show_count’);
// Variable that contains the bubble count code
$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;
}
}
Source: Sacca Andrea (2014), Mastering Magento theme design, Packt Publishing; Illustrated edition.