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.
1. Creating an input text
You can use an input text for short text values, for example, a telephone number or a link. Consider the following screenshot:
To create an input text option, you can use the following code:
<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>
2. Creating textarea
You can use the Textarea for larger text values, such as a paragraph in which a company is talked about. Consider the following screenshot:
To create a textarea option, you can use the following code:
<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>
3. Creating a dropdown with Yes/No values
You can use the dropdown to enable or disable something. Consider the following screenshot:
To create a Yes/No option, you can use the following code:
<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>
4. 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:
To create an Enable/Disable option, you can use the following code:
<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>
5. 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.
6. 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:
To create the File Upload option, you can use the following code:
<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>
We can use this field to create, for example, a logo upload field in our theme options inside the header group.
Source: Sacca Andrea (2014), Mastering Magento theme design, Packt Publishing; Illustrated edition.