ECommerce Insights Blog

Stay on top of it all and get ahead with useful articles, how-tos, tips and tricks on e-commerce.

How To Add Color Picker In Your Custom Magento Extension?

colorpicker
Looking to add color picker in your custom Magento module? Well, this isn’t as tough or complicated as it may sound. I have seen various custom Magento modules, extensions facilitating store owners to choose colors for various options.

In most of our Responsive themes we offer color picker to choose colors for various parts, when we started building that module, the choices were few but we slowly stumbled upon http://jscolor.com/. This nifty JavaScript helps you create a custom color picker which can easily be integrated in your Magento extension, Magento module.

So, if you are looking to have a custom color picker just follow the code given below along with jscolor script to create cool color picker inside your Magento extension.

How To Add Color Picker In Your Magento Module

Adding color picker inside your custom module or extension is just like breeze, simply add a custom field called color and assign a class name colorpicker then add this code in your extension’s code

$fieldset->addField('filename','text',array(
'label' => Mage::helper('color')->__('Choose Color'),
'required' => true,
'name' => 'filename',
'class' => 'colorpicker',
'value' => $value
)
);

Don’t forget to include JavaScript file in your adminhtml custom module as without this colorpicker won’t show. This will be something like this
You can anytime modify the path as per your Magento extension’s requirement.

You can take a look at the demo url to see how it will appear just click here.

Let me know how you have implemented Color Picker inside your Magento extension, please leave me a comment and let me know.