MagentoWeb Development

How to add a color picker in the Magento admin or anywhere

By July 21, 2014 8 Comments
How to add a color picker in the Magento admin or anywhere

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:

First, we would need a color picker. This color picker should not use any JavaScript framework so it fits in easily with Prototype, which is used in Magento. If you don’t already know this: Magento has switched to jQuery from version 2 onwards. So it would be nice to have a color picker that would work basically anywhere.

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!

Explanation:

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.

Magento has a “Merge JavaScript” option under System -> Advanced -> Developer . When this option is enabled, JSColor would break, and not show the color picker image because it can’t find the JSColor directory where the image is located. Which is why we’ve modified the JSColor file at /js/yourcompany/jscolor/jscolor.js

dir : BLANK_URL.replace( 'blank.html', 'yourcompany/jscolor/' )

Magento has a JavaScript variable called “BLANK_URL” both in the admin and front end. It points to /js/blank.html . We can use this to find out the path to the JS folder. So what we’ve done is removed “blank.html” and replaced it with “yourcompany/jscolor/” so the string would now be /js/yourmodule/jscolor/ which can now be used by JSColor to load the image.


Happy coloring!

8 Comments

  • Nanda says:

    Hi, I need to include in color picker in new product creation page under custom options. How can i includes your code to get the corresponding results ?

    • junaid says:

      Hi Nanda,
      In the layout file you can change “adminhtml_system_config_edit” to “adminhtml_catalog_product_edit” . This will make the JS file load in the product edit page.

      After that, just use the fields from system.xml . I’m sorry I can’t go into detail with this.

  • Nanda says:

    Hi Junaid,
    I have changed in my template. How can i edit my system.xml file it condraticts withn mycode?

  • Alexander says:

    Thanks for best sample!

  • Kenneth says:

    Hi there,

    I get the following error on my modules section:
    Notice: Undefined variable: format in /var/www/moduler.devshop.dk/public_html/app/code/local/TRIC/NotificationBar/Block/Adminhtml/System/Config/Color.php on line 12.

    Where does this variable refer to? I can’t see a definition for $format in the code anywhere.

  • Fanel says:

    Thanks man. You’re the best

  • Smitendrasinh Rajput says:

    Hello Friend.

    Really Useful Post. Thanks for Valuable Code.

  • Natalie says:

    Thanks for a great tutorial. Worked like a charm.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.