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>