Wednesday, April 10, 2013

Add color picker in Magento Admin Configuration Page

4/10/2013

Sometimes you may want to add color picker in the admin configuration page of your Magento module or extension. You may think this as a big task but believe me this is as simple as anything. Few lines of XML code will do it for you. Here are the exact steps to do this.

I hope you know how to add custom configuration options in Magento. If not, read this tutorial: Creating Custom Configuration Options in Magento Admin.
Namespace: Color
Module name: Picker

1. In adminhtml/default/default/layout directory, create the layout XML file for your module. Lets name it as picker.xml. Write following content in picker.xml:

<?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. Declare the layout file in your module's config.xml as:

<config>
...
 <adminhtml>
  <layout>
   <updates>
    <basket>
     <file>picker.xml</file>
    </basket>
   </updates>
  </layout>
 </adminhtml>
...
</config>
3. In your module's system.xml, add the color picker field as:

<config>
...
 <sections>
   <myconfig module="picker" translate="label">
   ...
   <groups>
    <my_group translate="label">
     ...
      <my_color>
       <label>Background Color</label>
       <frontend_type>text</frontend_type>
       <validate>color</validate> <!-- This is important -->
       <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>
       <comment>Specify the background color.</comment>
      </my_color>
    <my_group>
   </groups>
   <myconfig>
 </sections>
...
</config>
This is it and you are done.

Written by

Arvind is a web developer, programmer and blogger. He has expertise in PHP, Magento, WordPress, jQuery, JavaScript, HTML5 and CSS3. He loves to develop good looking websites with strong backend.

2 comments :

  1. Before following this I was thinking this as a tough part but now realized rather than to listen to others should look for a solution whether it is easy or hard.

    ReplyDelete
  2. Thank you soo much.. this article is really simple and helpfull..

    ReplyDelete

We would love to hear from you...

 

© 2014 Web Speaks . All rights resevered. Designed by Templateism