Category: Theme admin module

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

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

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 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

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:

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:
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:

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
A helper is an object that extends Mage_Core_Helper_Abstract. On this helper contains functions and you can call from anywhere. 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:

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:

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:

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:

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: