Sometimes you may want to add color picker in the admin configuration page of your Magento module or extension. In our case, this is a must-have option for a theme configuration module. To do this, you don’t have to download or add new JavaScripts into the module, because Magento includes the jscolor picker by default. Perform the following steps:
- Create the xml file in app/design/adminhtml/ default/default/layout with the following code:
<?xml version=”1.0″?>
<layout version=”0.1.1″>
<adminhtml_system_config_edit>
<reference name=”head”>
<action method=”addJs”>
<file>jscolor/jscolor.js</file>
</action>
</reference>
</adminhtml_system_config_edit>
</layout>
- Open config.xml and inside the <adminhtml> tag, insert the following layout update to the jscolor script in the admin theme panel section:
<layout>
<updates>
<themeoptions>
<file>bookstore_themeoptions.xml</file>
</themeoptions>
</updates>
</layout>
Done! Now open the backend and go to the theme admin panel section; if you click on the top header background color, you can see that the color picker appears and you are allowed to select the color by clicking on it! Cool, isn’t it? You can see this in the following screenshot:
However, to make this happen, you need to pay attention to the field, which includes another tag: the <validate> </validate> tag. Take a look at one of the fields with the <validate>color</validate> tag, for example, see the following code:
<topheader_color1 translate=”label”>
<label>Top Header Background: </label>
<comment>Click to select the background color</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>
The preceding code allows the field to display the color picker. Now, you can retrieve the data in the frontend in the same way you did before.
In this case, the value is a CSS value, so to integrate the options in your theme, you can use the inline CSS injection, for example, use the following code:
<div id=”topbar” <?php if(Mage::
getStoreConfig(‘bookstore/header/topheader_color1’,Mage::app()-
>getStore())):
echo ‘style=”background-color:#’. Mage::
getStoreConfig(‘bookstore/header/topheader_color1’,Mage::app()-
>getStore()) .'”‘; endif; ?>>
In this case, when a user changes the top header background color from the backend, the style will be applied as you can see in the following screenshot:
As you can see in the preceding screenshot, the background color of the top header switched from black to cyan.
1. Validate options
You can use the <validate> tag to make sure that the user inserts the right value into the option field based on the type of option. This tag generates a script that makes a particular type of validation based on the type of validation you want.
The validation starts when you try to save configuration from the orange action button on the admin theme option panel.
The following are the several types of validation:
- validate-alpha: This checks if the value inserted is text.
- validate-alphanum: This checks if the value inserted is alphanumeric.
- validate-email: This checks if the value inserted is a valid e-mail address.
- validate-greater-than-zero: This checks if the value inserted is a number greater than zero.
- validate-not-negative-number: This checks if the value inserted is a non-negative number.
- validate-number: This checks if the value inserted is a number.
- validate-password: This checks if the value inserted has at least six characters.
- color: This particular validation is the one we inserted now in the It enables the color picker.
Let’s create an example with a validation for a number. If we want to validate the field for a telephone, just add the following code inside the <telephone></ telephone> tags:
<validate>validate-password</validate>
Once you save, go to admin and try to insert the word Hello inside the input text for Telephone Number. Try to save, and you will get an alert message prompt under the input as you can see in the following screenshot:
2. Defining default values for options fields
Another cool task that you can do with the module is set default options for the module. Doing this is very simple. Open the config.xml file and within the <config></config> node, insert the <default></default> tag and inside it, all the options you created with the default values that you want to set. For example, consider the following code:
<!– set default configurations –>
<default>
<themeoptions>
<header>
<menu_bg>CCCCCC</menu_bg>
</header>
</themeoptions>
</default>
In this case, the default value of the menu_bg field will be CCCCCC.
Note: If you set default options after you save the module configuration page at least once, you will no longer see the default value set because the system will store the empty value field (if you save an empty value field).
Source: Sacca Andrea (2014), Mastering Magento theme design, Packt Publishing; Illustrated edition.