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