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.
1. A dependent field
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 you switch from Yes to No, some options disappear and if you select Yes, they reappear.
This is illustrated in the following screenshot:
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:
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>
Inside the depends tag, you have to define the field on which it must depend and 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.
2. 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>
<![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 as shown in the following screenshot:
Source: Sacca Andrea (2014), Mastering Magento theme design, Packt Publishing; Illustrated edition.