Greetings, developers of all colors!
First of all this tutorial assumes that you already know how to make a Magento extension. Now there are many ways to add a color picker in the Magento admin (or anywhere). Here’s one “correct” and “extendable” way to do it:
If you’ve spent about 10 seconds trying to look for a color picker, you’ve probably stumbled upon JsColor. I’ve read a few posts that show you how to integrate it into your Magento admin, but as always, I’ve not found anything that is thorough enough. So here’s my effort to simplify it for you. Here is a bare-bones extension to help you understand how this works:
Step 1: Download this file and extract it to /app/code/local
Step 2: Download this file and extract it to /app/etc/modules
Step 3: Download this file and extract is to /app/design/adminhtml/default/default/layout
Step 4: Download this file and extract it to /js
And you’re done! (Don’t forget to clear all caches, log out and log in etc.) . Navigate to System -> Configuration -> Your Module and choose your color!
First, we add the JSColor file in the admin head using this file: /app/design/adminhtml/default/default/layout/yourmodule.xml
Next, let’s explore the file: /app/code/local/Yourcompany/Yourmodule/Block/Adminhtml/System/Config/Color.php
The magic happens in this line:
$color->addClass( 'color ' . $element->getClass() );
JSColor requires that the input field have a class “color” for it to work. So we add it here in this line, along with any other classes that might be required on the field. The other classes might also include classes entered in the “validate” section of your field.
In the file /app/code/local/Yourcompany/Yourmodule/etc/system.xml
<my_color translate="label"> <label>My Color</label> <frontend_type>text</frontend_type> <frontend_model>yourmodule/adminhtml_system_config_color</frontend_model> <sort_order>10</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> <validate>required-entry</validate> </my_color>
The “required-entry” class is added to the field after the “color” class since it is added inside “validate”.
But wait …
I can’t see the JSColor’s image when I select the color! If you can, ignore the following.
dir : BLANK_URL.replace( 'blank.html', 'yourcompany/jscolor/' )