5. 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 module.

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.

[don’t understand]
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.
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).
——!>

Summary:
In this chapter, we have seen how to create a custom and powerful theme options panel. With this great tool you created, the theme can be easily used by everyone,including the store manager who doesn’t have programming knowledge.Let’s create your own admin panel with all the options you have in mind and render your theme unique and powerful!

In the next chapter, we will have a quick recap of all the files and how to collect them in a single ZIP file, and selling it in famous marketplaces such as ThemeForest.

Advertisements

4. Visual color picker in admin

Creating a visual color picker in admin:
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:

1.Create the bookstore_themeoptions.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>

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

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

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

As you can see in the preceding screenshot, the background color of the top header switched from black to cyan.

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

2. Customizing the frontend

Now it is very easy to customize the frontend, because you need to change the stuff in the frontend with the options you created and some conditions. Let’s start with a basic example: let’s set the telephone number in the header from the admin panel.

Getting the value of an input text field
To get the value of the input text field, we will perform the following steps:

1.Open the header.phtml file in app/design/frontend/bookstore/default/template/html
configuration field, change to:

<?php echo Mage::getStoreConfig('bookstore/header/telephone',Mage::app()->getStore()); ?>

This code will be put inside the header part <fields> tags

<telephone translate="label">
	<label>Telephone Number: </label>
	<comment>Insert here the Phone number of your company, will be displayed in the top header</comment>
	<frontend_type>text</frontend_type>
	<sort_order>04</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>
</telephone>

2.Now, go in the backend and insert a custom phone number in the field: Header Settings [=== if you don’t see the telephone filed, I think you should do inspect elements and then you can see id=”row_bookstore_header_telephone” style=”display:none”, you can also seen input text have been disabled ===] why this happend,i can’t understand.

3.Then, save the configuration. Go to the frontend and you can see the telephone number is shown in the screen

Conditional options:
Let’s suppose that you want to show content if the options are filled and other options in case of the opposite. To do this, add a simple condition in the frontend as follows:

<?php if(Mage::getStoreConfig('bookstore/header/telephone',Mage::app()->getStore())):
	echo Mage::getStoreConfig('bookstore/header/telephone',Mage::app()->getStore());
	else:
	echo 'You need to fill in the options in the System Config';
	endif;
?>

Done! In this way, the user who installs the theme will be alerted in the frontend that he or she needs to edit some parts.

Accessing a Yes/No dropdown:
Let’s see another example that will explain better with a Yes/No field. Let’s suppose that we want to enable or disable the top bar (the black bar in the header).We already created the option in the system.xml file as follows:

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

Go to admin and select No and save the configuration.
[This is not respose , when this implemented Now, reopen the header.phtml file and wrap the top header div inside the following code, to enable or disable the top header, depending on the options:]

<?php if(Mage::getStoreConfig('bookstore/header/topheader_enable',Mage::app()->getStore())==1): ?>	
<?php endif ?>

Getting the uploaded image file:
To get an uploaded image file, the process is the same. Now we are going to see a live example with the logo field we created.In system.xml, the logo field is defined in the following way:

<logo translate="label" module="themeoptions">
	<comment></comment>
	<label>Logo</label>
	<frontend_type>file</frontend_type>
	<backend_model>adminhtml/system_config_backend_file</backend_model>
	<upload_dir>media/bookstore</upload_dir>
	<sort_order>00</sort_order>
	<show_in_default>1</show_in_default>
	<show_in_website>1</show_in_website>
	<show_in_store>1</show_in_store>
</logo>

Now, open the header.phtml file located in app/design/frontend/bookstore/default/template/html.
Here we have the default logo URL.which is always defined in the admin in System Configuration | Design.

But the uploader is always a better solution for customers, and if they find all the options to customize the theme in one place, it is better! So now that you have opened the header.phtml file, find the line where the logo is declared in the following code:


<div class="logo col-md-4 col-sm-5">
	<a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>">
	<img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" class="img-responsive" /></a>
</div>

Replace the preceding code with the following code:

<div class="logo col-md-4 col-sm-5">
	<a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>">
		<?php if(Mage::getStoreConfig('bookstore/header/logo',Mage::app()->getStore())): $logourl = $media . 'media/bookstore/' . Mage::getStoreConfig('bookstore/header/logo',Mage::app()->getStore());
		else:
			$logourl = $this->getLogoSrc();
		endif;
		?>
		<img src="<?php echo $logourl ?>" alt="<?php echo $this->getLogoAlt()?>" class="img-responsive" />
	</a>
</div>

What we’ve done here is a simple condition that displays the uploaded logo if present. Try to upload a custom logo now, and you will see that it appears in the site header

To remove the uploaded logo, return to the admin theme options and select the Delete File checkbox and save the configuration

[=== perfectly done, and perfectly shown the logo, but when you click the logo url then you can’t see logo because url changed to index.php ===] so why this happeing i don’t know.

1. Creating the advanced admin options panel

Now that you got all the basics for options, let’s see how to organize and create powerful and custom admin panel options for your theme.
Before starting, let’s organize the groups that you want to create. This is an important phase of the process that will help you to organize the module and the project workflow better.
In this case, we are going to create the following groups of options:
• Typography settings
• Header settings
• Footer settings

To create the main structure of the options group, let’s start by creating all the groups inside the <bookstore> sections in the <groups> tags, which is always in the system.xml file. Perform the following steps:

1.Create the group for the TYPOGRAPHY options as follows:

<!-- TYPOGRAPHY GROUP -->
<typography translate="label" module="themeoptions">
	<label>Typography</label>
	<frontend_type>text</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>
	<fields>
	<!-- insert the option fields here -->
	</fields>
</typography>

2.Then, create the group for the HEADER options as follows:

<!-- HEADER GROUP -->
<header translate="label" module="themeoptions">
	<label>Header Settings</label>
	<frontend_type>text</frontend_type>
	<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>
	<fields>
	<!-- insert the option fields here -->
	</fields>
</header>

3.Finally, create the group for the FOOTER options as follows:

<!-- FOOTER GROUP -->
<footer translate="label" module="themeoptions">
	<label>Social Settings</label>
	<frontend_type>text</frontend_type>
	<sort_order>03</sort_order>
	<show_in_default>1</show_in_default>
	<show_in_website>1</show_in_website>
	<show_in_store>1</show_in_store>
	<fields>
	<!-- insert the option fields here -->
	</fields>
</footer>

The first group of options called Typography contains only custom drop-down options and, as I promised previously, I will now show you how to create these useful options.

Creating a custom dropdown field:
To create a custom dropdown options field, such as the selection of a family font or the font size, we need to perform the following steps:

1.Create a new field, include this code inside the typhography this code as follows:

<font_text translate="label">
	<label>Text Font: </label>
	<comment>Custom Source model Font</comment>
	<frontend_type>select</frontend_type>
	<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>
	<source_model>themeoptions/source_font</source_model>
</font_text>

2.Now, we need to create our custom model where we will insert all the dropdown options. So, navigate into the module in app/code/local/BookStore/ThemeOptions/Model and create the Source folder. Inside
the Source folder, create the Font.php file with the following code:

<?php
class BookStore_ThemeOptions_Model_Source_Font
	{
		public function toOptionArray()
		{
			return array(
				array('value' => 'serif', 'label' =>
				Mage::helper('themeoptions')->__('Georgia,
				Times New Roman, Times, serif')),
				array('value' => 'sansserif', 'label' =>
				Mage::helper('themeoptions')->__('Arial, Helvetica,
				sans-serif')),
				array('value' => 'monospace', 'label' =>
				Mage::helper('themeoptions')->__('"Courier New",
				Courier, monospace'))
			);
		}
	}

?>

The result in the admin will be the following dropdown selection of Text Font:

Done! Now we will also create a font size selection with the same method by creating a new field in system.xml with a custom source model, as follows:

<font_text_size translate="label">
	<label>Text Font Size: </label>
	<comment>Custom Source Model Fontsize</comment>
	<frontend_type>select</frontend_type>
	<sort_order>2</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>themeoptions/source_fontsize</source_model>
</font_text_size>

Create a new source model file called Fontsize.php in the Source folder with the following code:

<?php
	class BookStore_ThemeOptions_Model_Source_Fontsize
	{
		public function toOptionArray()
		{
			return array(
				array('value' => '12px', 'label' =>
				Mage::helper('themeoptions')->__('12px')),
				array('value' => '13px', 'label' =>
				Mage::helper('themeoptions')->__('13px')),
				array('value' => '14px', 'label' =>
				Mage::helper('themeoptions')->__('14px')),
				array('value' => '15px', 'label' =>
				Mage::helper('themeoptions')->__('15px')),
				array('value' => '16px', 'label' =>
				Mage::helper('themeoptions')->__('16px'))
			);
		}
	}

?>	

The result is a dropdown with font size selection as shown.

If you understand the power and the flexibility of the fields, you can create a custom admin panel with a lot of configurations.

Interfacing the admin panel with the theme
Now that we have a full working theme admin panel, and you know how to create any type of option, we need to show the values in the frontend.

Retrieving the data saved in your configuration is quite easy. You can use the following code:

<?php echo Mage::getStoreConfig(bookstore/general/options,Mage::app()->getStore()); ?php>