3. Advanced options features

Advanced options features:
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.

A dependent field: It’s very important topic <depends>
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 switch from Yes to No, some options disappear and if you select Yes,they reappear.

depends1

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:

depends2

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>

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.

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>Enable or Disable the top header bar
		<![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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s