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.

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