3. Advanced options features

Advanced options features:
There are some features that you can add to the options to create a very modular and advanced configuration panel, such as the dependent field and the option to add JavaScripts inside the comment tag. Let’s analyze these features.

A dependent field: It’s very important topic <depends>
One of the advanced features is the <depends> tag to create dependent fields. When navigating the configuration of Magento, you may have noticed that sometimes when you switch from Yes to No, some options disappear and if you select Yes,they reappear.

depends1

In the preceding screenshot, you can see some options after the first one, and in the following screenshot, you can see that by selecting No, some options below it disappear:

depends2

The options disappear because that field depends on the first one. Any field can
depend on another one.
To create a dependent file, you simply need to add the following code to one of the
fields that you want to make visible or not:

<depends>
	<field>1</field>
</depends>

its value. For example, let’s take the <topheader_enable> field which is a Yes/No option field as shown in the following code:

<topheader_enable translate="label">
	<label>Enable Top Header</label>
	<comment>Enable or Disable the top header bar</comment>
	<frontend_type>select</frontend_type>
	<sort_order>01</sort_order>
	<show_in_default>1</show_in_default>
	<show_in_website>1</show_in_website>
	<show_in_store>1</show_in_store>
	<source_model>adminhtml/system_config_source_yesno</source_model>
</topheader_enable>

Then you have another field called topheader_color, which you want to show only if the topheader_enable option is set to Yes. Simply define the field and add the depends tag at the bottom of the code, with the value as given in the following code:

<topheader_color1 translate="label">
	<label>Top Header Background: </label>
	<comment>Comment…</comment>
	<frontend_type>text</frontend_type>
	<validate>color</validate>
	<sort_order>02</sort_order>
	<show_in_default>1</show_in_default>
	<show_in_website>1</show_in_website>
	<show_in_store>1</show_in_store>
	<depends>
		<topheader_enable>1</topheader_enable>
	</depends>
</topheader_color1>

As you can see in the highlighted portion of the preceding code, the <depends> tag includes the name of the field on which it depends. In other words, if the value of <topheader_enable> is 1 (Yes), the field will be displayed.

Please note that any field can depend on another. The main purpose of this one is to hide/show the field, depending on the state of some other field.

Adding JavaScripts inside the comment tag:
There is also one interesting cheat. You can use JavaScript inside the <comment> tag.To do this, simply wrap JavaScript in a CDATA tag; as shown in the following code:

<topheader_enable translate="label">
	<label>Enable Top Header</label>
	<comment>Enable or Disable the top header bar
		<![CDATA[
			<script type="text/javascript">
				Event.observe('bookstore_header_topheader_enable', 'change', function() {
					alert('Warning! This will hide the top bar!');
				})
			</script>
		]]>
	</comment>
	<frontend_type>select</frontend_type>
	<sort_order>01</sort_order>
	<show_in_default>1</show_in_default>
	<show_in_website>1</show_in_website>
	<show_in_store>1</show_in_store>
	<source_model>adminhtml/system_config_source_yesno</source_model>
</topheader_enable>

In this case, if you change the Enable Top Header field, an alert message will pop up

Advertisements

2. Customizing the frontend

Now it is very easy to customize the frontend, because you need to change the stuff in the frontend with the options you created and some conditions. Let’s start with a basic example: let’s set the telephone number in the header from the admin panel.

Getting the value of an input text field
To get the value of the input text field, we will perform the following steps:

1.Open the header.phtml file in app/design/frontend/bookstore/default/template/html
configuration field, change to:

<?php echo Mage::getStoreConfig('bookstore/header/telephone',Mage::app()->getStore()); ?>

This code will be put inside the header part <fields> tags

<telephone translate="label">
	<label>Telephone Number: </label>
	<comment>Insert here the Phone number of your company, will be displayed in the top header</comment>
	<frontend_type>text</frontend_type>
	<sort_order>04</sort_order>
	<show_in_default>1</show_in_default>
	<show_in_website>1</show_in_website>
	<show_in_store>1</show_in_store>
	<depends>
		<topheader_enable>1</topheader_enable>
	</depends>
</telephone>

2.Now, go in the backend and insert a custom phone number in the field: Header Settings [=== if you don’t see the telephone filed, I think you should do inspect elements and then you can see id=”row_bookstore_header_telephone” style=”display:none”, you can also seen input text have been disabled ===] why this happend,i can’t understand.

3.Then, save the configuration. Go to the frontend and you can see the telephone number is shown in the screen

Conditional options:
Let’s suppose that you want to show content if the options are filled and other options in case of the opposite. To do this, add a simple condition in the frontend as follows:

<?php if(Mage::getStoreConfig('bookstore/header/telephone',Mage::app()->getStore())):
	echo Mage::getStoreConfig('bookstore/header/telephone',Mage::app()->getStore());
	else:
	echo 'You need to fill in the options in the System Config';
	endif;
?>

Done! In this way, the user who installs the theme will be alerted in the frontend that he or she needs to edit some parts.

Accessing a Yes/No dropdown:
Let’s see another example that will explain better with a Yes/No field. Let’s suppose that we want to enable or disable the top bar (the black bar in the header).We already created the option in the system.xml file as follows:

<topheader_enable translate="label">
	<label>Enable Top Header</label>
	<comment>Enable or Disable the top header bar</comment>
	<frontend_type>select</frontend_type>
	<sort_order>01</sort_order>
	<show_in_default>1</show_in_default>
	<show_in_website>1</show_in_website>
	<show_in_store>1</show_in_store>
	<source_model>adminhtml/system_config_source_yesno</source_model>
</topheader_enable>

Go to admin and select No and save the configuration.
[This is not respose , when this implemented Now, reopen the header.phtml file and wrap the top header div inside the following code, to enable or disable the top header, depending on the options:]

<?php if(Mage::getStoreConfig('bookstore/header/topheader_enable',Mage::app()->getStore())==1): ?>	
<?php endif ?>

Getting the uploaded image file:
To get an uploaded image file, the process is the same. Now we are going to see a live example with the logo field we created.In system.xml, the logo field is defined in the following way:

<logo translate="label" module="themeoptions">
	<comment></comment>
	<label>Logo</label>
	<frontend_type>file</frontend_type>
	<backend_model>adminhtml/system_config_backend_file</backend_model>
	<upload_dir>media/bookstore</upload_dir>
	<sort_order>00</sort_order>
	<show_in_default>1</show_in_default>
	<show_in_website>1</show_in_website>
	<show_in_store>1</show_in_store>
</logo>

Now, open the header.phtml file located in app/design/frontend/bookstore/default/template/html.
Here we have the default logo URL.which is always defined in the admin in System Configuration | Design.

But the uploader is always a better solution for customers, and if they find all the options to customize the theme in one place, it is better! So now that you have opened the header.phtml file, find the line where the logo is declared in the following code:


<div class="logo col-md-4 col-sm-5">
	<a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>">
	<img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" class="img-responsive" /></a>
</div>

Replace the preceding code with the following code:

<div class="logo col-md-4 col-sm-5">
	<a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>">
		<?php if(Mage::getStoreConfig('bookstore/header/logo',Mage::app()->getStore())): $logourl = $media . 'media/bookstore/' . Mage::getStoreConfig('bookstore/header/logo',Mage::app()->getStore());
		else:
			$logourl = $this->getLogoSrc();
		endif;
		?>
		<img src="<?php echo $logourl ?>" alt="<?php echo $this->getLogoAlt()?>" class="img-responsive" />
	</a>
</div>

What we’ve done here is a simple condition that displays the uploaded logo if present. Try to upload a custom logo now, and you will see that it appears in the site header

To remove the uploaded logo, return to the admin theme options and select the Delete File checkbox and save the configuration

[=== perfectly done, and perfectly shown the logo, but when you click the logo url then you can’t see logo because url changed to index.php ===] so why this happeing i don’t know.

1. Creating the advanced admin options panel

Now that you got all the basics for options, let’s see how to organize and create powerful and custom admin panel options for your theme.
Before starting, let’s organize the groups that you want to create. This is an important phase of the process that will help you to organize the module and the project workflow better.
In this case, we are going to create the following groups of options:
• Typography settings
• Header settings
• Footer settings

To create the main structure of the options group, let’s start by creating all the groups inside the <bookstore> sections in the <groups> tags, which is always in the system.xml file. Perform the following steps:

1.Create the group for the TYPOGRAPHY options as follows:

<!-- TYPOGRAPHY GROUP -->
<typography translate="label" module="themeoptions">
	<label>Typography</label>
	<frontend_type>text</frontend_type>
	<sort_order>01</sort_order>
	<show_in_default>1</show_in_default>
	<show_in_website>1</show_in_website>
	<show_in_store>1</show_in_store>
	<fields>
	<!-- insert the option fields here -->
	</fields>
</typography>

2.Then, create the group for the HEADER options as follows:

<!-- HEADER GROUP -->
<header translate="label" module="themeoptions">
	<label>Header Settings</label>
	<frontend_type>text</frontend_type>
	<sort_order>02</sort_order>
	<show_in_default>1</show_in_default>
	<show_in_website>1</show_in_website>
	<show_in_store>1</show_in_store>
	<fields>
	<!-- insert the option fields here -->
	</fields>
</header>

3.Finally, create the group for the FOOTER options as follows:

<!-- FOOTER GROUP -->
<footer translate="label" module="themeoptions">
	<label>Social Settings</label>
	<frontend_type>text</frontend_type>
	<sort_order>03</sort_order>
	<show_in_default>1</show_in_default>
	<show_in_website>1</show_in_website>
	<show_in_store>1</show_in_store>
	<fields>
	<!-- insert the option fields here -->
	</fields>
</footer>

The first group of options called Typography contains only custom drop-down options and, as I promised previously, I will now show you how to create these useful options.

Creating a custom dropdown field:
To create a custom dropdown options field, such as the selection of a family font or the font size, we need to perform the following steps:

1.Create a new field, include this code inside the typhography this code as follows:

<font_text translate="label">
	<label>Text Font: </label>
	<comment>Custom Source model Font</comment>
	<frontend_type>select</frontend_type>
	<sort_order>1</sort_order>
	<show_in_default>1</show_in_default>
	<show_in_website>1</show_in_website>
	<show_in_store>1</show_in_store>
	<source_model>themeoptions/source_font</source_model>
</font_text>

2.Now, we need to create our custom model where we will insert all the dropdown options. So, navigate into the module in app/code/local/BookStore/ThemeOptions/Model and create the Source folder. Inside
the Source folder, create the Font.php file with the following code:

<?php
class BookStore_ThemeOptions_Model_Source_Font
	{
		public function toOptionArray()
		{
			return array(
				array('value' => 'serif', 'label' =>
				Mage::helper('themeoptions')->__('Georgia,
				Times New Roman, Times, serif')),
				array('value' => 'sansserif', 'label' =>
				Mage::helper('themeoptions')->__('Arial, Helvetica,
				sans-serif')),
				array('value' => 'monospace', 'label' =>
				Mage::helper('themeoptions')->__('"Courier New",
				Courier, monospace'))
			);
		}
	}

?>

The result in the admin will be the following dropdown selection of Text Font:

Done! Now we will also create a font size selection with the same method by creating a new field in system.xml with a custom source model, as follows:

<font_text_size translate="label">
	<label>Text Font Size: </label>
	<comment>Custom Source Model Fontsize</comment>
	<frontend_type>select</frontend_type>
	<sort_order>2</sort_order>
	<show_in_default>1</show_in_default>
	<show_in_website>1</show_in_website>
	<show_in_store>1</show_in_store>
	<source_model>themeoptions/source_fontsize</source_model>
</font_text_size>

Create a new source model file called Fontsize.php in the Source folder with the following code:

<?php
	class BookStore_ThemeOptions_Model_Source_Fontsize
	{
		public function toOptionArray()
		{
			return array(
				array('value' => '12px', 'label' =>
				Mage::helper('themeoptions')->__('12px')),
				array('value' => '13px', 'label' =>
				Mage::helper('themeoptions')->__('13px')),
				array('value' => '14px', 'label' =>
				Mage::helper('themeoptions')->__('14px')),
				array('value' => '15px', 'label' =>
				Mage::helper('themeoptions')->__('15px')),
				array('value' => '16px', 'label' =>
				Mage::helper('themeoptions')->__('16px'))
			);
		}
	}

?>	

The result is a dropdown with font size selection as shown.

If you understand the power and the flexibility of the fields, you can create a custom admin panel with a lot of configurations.

Interfacing the admin panel with the theme
Now that we have a full working theme admin panel, and you know how to create any type of option, we need to show the values in the frontend.

Retrieving the data saved in your configuration is quite easy. You can use the following code:

<?php echo Mage::getStoreConfig(bookstore/general/options,Mage::app()->getStore()); ?php>

2. Getting started with options fields

Now that we created the left tab, the section button, and the default group with a test option field, we are going to explore how to create a custom options panel with groups and options.Before starting, let’s take a look at the following screenshot that shows you the module we created with Tabs, Sections, Groups, and Fields:have to add an images

options-fields

As we have seen, we need to set the groups and fields inside the <groups></groups> tags, and also set the real options of the module / theme options panel.

A group can contain several fields, as you can see in the example shown in the following code, where we create two fields, an input field, and a drop-down select Yes/No field: inside group tag

<mygroup translate="label" module="themeoptions">
	<label>My test group title</label>
	<frontend_type>text</frontend_type>
	<sort_order>01</sort_order>
	<show_in_default>1</show_in_default>
	<show_in_website>1</show_in_website>
	<show_in_store>1</show_in_store>
	<fields>
		<my_input_field translate="label">
			<label>My Input Field: </label>
			<comment>This is a comment</comment>
			<frontend_type>text</frontend_type>
			<sort_order>20</sort_order>
			<show_in_default>1</show_in_default>
			<show_in_website>1</show_in_website>
			<show_in_store>1</show_in_store>
		</my_input_field>
		<my_select_field translate="label">
			<label>My Dropdown: </label>
			<comment>Source model provider Magento's default Yes/No values</comment>
			<frontend_type>select</frontend_type>
			<sort_order>90</sort_order>
			<show_in_default>1</show_in_default>
			<show_in_website>1</show_in_website>
			<show_in_store>1</show_in_store>
			<source_model>adminhtml/system_config_source_yesno</source_model>
		</my_select_field>
	</fields>
</mygroup>

Overviewing the System.xml fields
If you take a look at the code created previously, you can see that the fields are grouped inside the <fields></fields> tags, and each field includes many parts; let’s explain them.

The following code is an example of single input field:

<input_field translate="label">
		<label>My Input Field: </label>
		<comment>This is a comment</comment>
		<frontend_type>text</frontend_type>
		<sort_order>20</sort_order>
		<show_in_default>1</show_in_default>
		<show_in_website>1</show_in_website>
		<show_in_store>1</show_in_store>
	</input_field>

The elements used in the code are explained as follows:
• <input_field>: This is the unique node name of the option
• <Label>: This is the title of the field, displayed on the left
• <Comment>: This is useful to provide extra descriptions or information for the store manager
• <frontend_type>: This is the type of the option (you can see more details about this in the following lines)
• <sort_order>: This is used to order the fields inside the group
• <show_in…>: This is used to enable the option to make the field editable for each store/website scope

As said before, frontend_type is the type of the options that you can use; for example, an input text, a text area, and a drop-down list. All of them are defined in /lib/Varien/Data/Form/Element/ directory.
The following are the most used options:
• Input text field
• Textarea
• Dropdown with Yes/No values
• Dropdown with Enable/Disable values
• Dropdown with custom values
• Multiselect
• File upload
• Time
• Editable items
• Heading

As you can see, we have many types of fields, and this allows us to create a custom admin panel with all the options that you need. The more options you insert in your theme, the more possibilities you give the store manager to customize the theme without editing the code. Now, we will discuss the most used fields in detail.

Creating an input text:
You can use an input text for short text values, for example, a telephone number or a link.To create an input text option, you can use the following code: you have to be put this code system.xml file <fileds> tag

<text_field translate="label">
	<label>Text Field</label>
	<frontend_type>text</frontend_type>
	<sort_order>10</sort_order>
	<show_in_default>1</show_in_default>
	<show_in_website>1</show_in_website>
	<show_in_store>1</show_in_store>
</text_field>

Creating textarea:
You can use the Textarea for larger text values, such as a paragraph in which a company is talked about.

<textarea_field translate="label">
	<label>Textarea</label>
	<frontend_type>textarea</frontend_type>
	<sort_order>20</sort_order>
	<show_in_default>1</show_in_default>
	<show_in_website>1</show_in_website>
	<show_in_store>1</show_in_store>
</textarea_field>

Creating a dropdown with Yes/No values:
You can use the dropdown to enable or disable something.

<yes_no_field translate="label">
	<label>Dropdown Yes No</label>
	<frontend_type>select</frontend_type>
	<source_model>adminhtml/system_config_source_yesno</source_model>
	<sort_order>1</sort_order>
	<show_in_default>1</show_in_default>
	<show_in_website>1</show_in_website>
	<show_in_store>1</show_in_store>
</yes_no_field>

Creating a dropdown with Enable/Disable values:
Almost the same as the previous one, but instead of Yes and No, you will get Enable and Disable:

<enable_disable_field translate="label">
	<label>Dropdown Enable/Disable</label>
	<frontend_type>select</frontend_type>
	<sort_order>40</sort_order>
	<source_model>adminhtml/system_config_source_enabledisable </source_model>
	<show_in_default>1</show_in_default>
	<show_in_website>1</show_in_website>
	<show_in_store>1</show_in_store>
</enable_disable_field>

Creating a dropdown with custom values:
The following is a custom dropdown with custom set of values generated by the source model:
The creation of a custom dropdown value is more complex than a Yes/No dropdown. But don’t worry, we will discuss this in the next topic.

Creating a File Upload option field
The File Upload option field allows us to choose a file to upload. You can set the destination folder too; in this example, the file will be saved in the [root]/media/bookstore directory:

<file translate="label comment">
	<label>File</label>
	<frontend_type>file</frontend_type>
	<backend_model>adminhtml/system_config_backend_file</backend_model>
	<upload_dir>media/bookstore</upload_dir>
	<sort_order>70</sort_order>
	<show_in_default>1</show_in_default>
	<show_in_website>1</show_in_website>
	<show_in_store>1</show_in_store>
</file>

1. Theme options module

we will learn how to create a theme admin panel with the same module structure, which allows a store manager to customize some important theme parts. The powerful admin theme will include options in a dedicated section in the Magento system configuration section in the backend.

Now that we have a full working theme, we are going to create a powerful admin theme options panel. Through this awesome panel, the store manager will have the option of configuring some settings of the theme without having programming knowledge.

To create the admin theme options panel, we need to develop a custom Magento module that will have the scope of creating options in the backend, which will make changes in the frontend.The following are the topics that will be covered in this chapter:

•Creating the theme options module
•Overviewing the System.xml fields
•Creating the advanced admin options panel
•Interfacing the admin panel with the theme
•Advanced options features
•Creating a visual color picker in admin
•Defining default values for options fields
•A quick theme option panel recap

Creating the theme options module:
We can use the same namespace used for the Widget module, BookStore,and create the module inside that folder. We are going to name it ThemeOptions.Let’s start creating the basic module. The following is the folder structure:

app
- code
	- local
		- BookStore
			- ThemeOptions
			- etc
			- Helper
			- Model
- etc

Activating the module
To activate the module, we need to do the following three simple operations:

1.Create the BookStore_ThemeOptions.xml file in app/etc/modules/with the following
code to activate the module:

<?xml version="1.0"?>
	<config>
		<modules>
			<BookStore_ThemeOptions>
				<active>true</active>
				<codePool>local</codePool>
				<depends>
					<Mage_Cms/>
				</depends>
			</BookStore_ThemeOptions>
		</modules>
	</config>

2.Then, Disable or Refresh the cache. To do this, go to admin and open System | Cache Management. Remember that once you create a theme,a module, and so on with Magento and you find some visualization issues or 404 errors, first check if the cache is disabled; if so, refresh and delete all the cache.

3.Then, in the admin panel, go to the System | Configuration | Advanced tab on the left-hand side and check if the module is present and enabled as shown in the following screenshot:

Creating the module helper
To make the module work correctly, you need to create the module helper file. This file is needed to make the system of translations work correctly. In fact, if you don’t create this file, you will get an error on the screen. So, let’s create the Data.php file in
app/code/local/BookStore/ThemeOptions/Helper/ with the following code:

<?php
/**
* BookStore Theme Options
*/
class BookStore_Themeoptions_Helper_Data extends Mage_Core_Helper_Abstract{
}

Creating the configuration file config.xml
The configuration file is very important for a Magento module, and in our case, it will show the tab in System | Configuration. In order to use Magento’s configuration section, you need to define models’ and helpers’ locations by performing the following steps:

1.Let’s create the config.xml file in app/code/local/BookStore/ThemeOptions/etc/ with the following basic code structure:

<config>
		<modules>
			<BookStore_ThemeOptions>
				<version>0.0.1</version>
			</BookStore_ThemeOptions>
		</modules>
</config>

2.Then, inside config, you need to define models and helpers locations as follows:

<!-- define models and helpers -->
	<global>
		<models>
			<themeoptions>
				<class>BookStore_ThemeOptions_Model</class>
			</themeoptions>
		</models>
		<helpers>
			<themeoptions>
				<class>BookStore_ThemeOptions_Helper</class>
			</themeoptions>
		</helpers>
	</global>

3.Finally, in order to avoid the “permission denied” problem, you need to always add the following code inside the

<config>and </config> tags:
	<!-- in order to avoid "404 and Permission Denied -->
		<adminhtml>
			<acl>
				<resources>
					<all>
						<title>Allow Everything</title>
					</all>
					<admin>
						<children>
							<system>
								<children>
									<config>
										<children>
											<bookstore>
												<title>Bookstore - All</title>
											</bookstore>
										</children>
									</config>
								</children>
							</system>
						</children>
					</admin>
				</resources>
			</acl>
		</adminhtml>	

The following is the full code of the config.xml file:

<?xml version="1.0" encoding="UTF-8"?>
	<config>
		<modules>
			<BookStore_ThemeOptions>
				<version>0.0.1</version>
			</BookStore_ThemeOptions>
		</modules>
		<!-- define models and helpers -->
		<global>
			<models>
				<themeoptions>
					<class>BookStore_ThemeOptions_Model</class>
				</themeoptions>
			</models>
			<helpers>
				<themeoptions>
					<class>BookStore_ThemeOptions_Helper</class>
				</themeoptions>
			</helpers>
		</global>
		<!-- in order to avoid "404 and Permission Denied -->
		<adminhtml>
			<acl>
				<resources>
					<all>
						<title>Allow Everything</title>
					</all>
					<admin>
						<children>
							<system>
								<children>
									<config>
										<children>
											<bookstore>
												<title>Bookstore - All</title>
											</bookstore>
										</children>
									</config>
								</children>
							</system>
						</children>
					</admin>
				</resources>
			</acl>
		</adminhtml>
	</config>

Creating the options file system.xml
Now we need to create a file that will manage all the options of our theme by performing the following steps:
1.Create the file system.xml in app/code/local/BookStore/ThemeOptions/etc/ with the following basic code:

<config>
	<tabs>
	. . .
	</tabs>
	<sections>
	. . .
	</sections>
</config>

2.Inside the <tabs></tabs> tags, you need to define the tab that will be displayed on the left in system configuration. In our case, we create the Bookstore tab and place it at the very top of the left sidebar with <sort_order>000</sort_order> as follows:

<bookstore translate="label">
	<label>BookStore Theme</label>
	<sort_order>000</sort_order>
</bookstore>

3.And now the fun part! Let’s create the options. Inside the <sections></section> tags, insert the following code that will define the section of our module’s tab:

<bookstore translate="label">
	<label>Theme Options</label>
	<tab>bookstore</tab>
	<frontend_type>text</frontend_type>
	<sort_order>1000</sort_order>
	<show_in_default>1</show_in_default>
	<show_in_website>1</show_in_website>
	<show_in_store>1</show_in_store>
	<groups>
				
	</groups>
</bookstore>

4.Now, to make the module appear in the admin, we need to insert at least one option. All the options are located inside the <groups></groups> tags that we defined in the previous step. Here, all the options must be organized in subgroups that you can name as you prefer. In this case, we are going to create a test field inside the group general with the following code:

<general translate="label" module="themeoptions">
	<label>Test Group</label>
	<frontend_type>text</frontend_type>
	<sort_order>01</sort_order>
	<show_in_default>1</show_in_default>
	<show_in_website>1</show_in_website>
	<show_in_store>1</show_in_store>
	<fields>
		<text_field translate="label">
			<label>Input Text Field</label>
			<frontend_type>text</frontend_type>
			<sort_order>00</sort_order>
			<show_in_default>1</show_in_default>
			<show_in_website>1</show_in_website>
			<show_in_store>1</show_in_store>
		</text_field>
	</fields>
</general>	

5.Now, go to System | Configuration in admin, and you should see the new BOOKSTORE THEME tab in the left-hand side column

If you want to add the section inside one of the present tabs, you need to indicate the tab inside the <tab /tabs> tag. Let’s suppose that you want to add a section Theme Options inside the General settings tab. To display the new section there, you need to define the general tab in the following way: <tab>general</tab>

Only for your reference, the following is the full code of the system.xml file that we have created:

<config>
	<tabs>
		<bookstore translate="label">
			<label>BookStore Theme</label>
			<sort_order>000</sort_order>
		</bookstore>
	</tabs>
	<sections>
		<bookstore translate="label">
			<label>Theme Options</label>
			<tab>bookstore</tab>
			<frontend_type>text</frontend_type>
			<sort_order>1000</sort_order>
			<show_in_default>1</show_in_default>
			<show_in_website>1</show_in_website>
			<show_in_store>1</show_in_store>
			<groups>
				<general translate="label" module="themeoptions">
					<label>Test Group</label>
					<frontend_type>text</frontend_type>
					<sort_order>01</sort_order>
					<show_in_default>1</show_in_default>
					<show_in_website>1</show_in_website>
					<show_in_store>1</show_in_store>
					<fields>
						<text_field translate="label">
							<label>Input Text Field</label>
							<frontend_type>text</frontend_type>
							<sort_order>00</sort_order>
							<show_in_default>1</show_in_default>
							<show_in_website>1</show_in_website>
							<show_in_store>1</show_in_store>
						</text_field>
					</fields>
				</general>
			</groups>
		</bookstore>
	</sections>
</config>

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!

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.

The transition effect

Multiple property changes
To add a transitional effect for more than one style, add more properties separated
by commas. This can be done as follows:

{transition: width 2s, height 2s, transform 2s;}

The CSS3 transition properties
The transition has the following four properties:
• transition-property
• transition-duration
• transition-timing-function
• transition-delay
You can specify all the properties, one on each line, as follows:

div {
	transition-property: opacity;
	transition-duration: 1s;
	transition-timing-function: linear;
	transition-delay: 2s;
	/* Safari */
	-webkit-transition-property: opacity;
	-webkit-transition-duration:1s;
	-webkit-transition-timing-function:linear;
	-webkit-transition-delay:2s;
	/* Mozilla */
	-moz-transition-property: opacity;
	-moz-transition-duration:1s;
	-moz-transition-timing-function:linear;
	-moz-transition-delay:2s;
}

Alternatively, you can specify all the properties in a single-line declaration using the shorthand transition property in the following way:

div {
	transition: opacity 1s linear 2s;
}

Mastering Theme

Andrea Saccà:
After his studies in Graphic and Web Design in Rome, he worked for a few renowned web agencies as a web designer, and in 2012, he started his freelance career. After two years of freelancing, he started his own web agency, 1604lab (www.1604lab.com) in Rome.

Mastering Idea:
1.It is absolutely important to know that you must not create a theme under the base package. you should create a custom package and place the  themes inside it.

2.Directory 1 – app
This directory contains the layout, translation, and template files. Various page types and blocks within each page type are defined in respective XML files. Using XML, you can also incorporate CSS files or JavaScript either to be loaded throughout the site or for specific pages.

3.The layout sub-directory
Each page, part, and block of the theme is defined by an XML file. Every page is defined by a handle. For the layout, there is no need to duplicate every single XML file to change appearance of a block; just insert a JavaScript file or CSS file. In fact, with the exception of template files, we can create a single XML file where we can declare all the information that will add or override information of the basic theme.

Read More »

15. continue and break

Continue: In the following example loop prints the value but for which condition becomes true it just skip the code and next value is printed.

break: The PHP break keyword is used to terminate the execution of a loop prematurely.

while ($foo) {
continue;            // return back loop
break ;                // stop line
}

Example: 1

<?php
	for($j = 1; $j <= 10; $j++){
		if($j == 6){
			continue;
		}
		echo $j."<br>";
	}
?>


Example: 2

<?php
	for($j = 1; $j <= 10; $j++){
		if($j == 6){
			break;
		}
		echo $j."<br>";
	}
?>