Following code is a Installation script for the custom module. This code creates a category Attribute "catcolor".
It will be displayed when you manage categories.
It will be displayed when you manage categories.
<?php
$installer = $this;
$installer->startSetup();
$installer->addAttribute("catalog_category", "catcolor", array(
"type" => "varchar",
"backend" => "",
"frontend" => "",
"label" => "Color Category",
"input" => "text",
"class" => "",
"source" => "",
"global" => Mage_Catalog_Model_Resource_Eav_Attribute::SCOPE_GLOBAL,
"visible" => true,
"required" => false,
"user_defined" => false,
"default" => "",
"searchable" => false,
"filterable" => false,
"comparable" => false,
"input_renderer"=> 'colorcategories/adminhtml_helper_color',
'group' => 'General Information',
"visible_on_front" => false,
"unique" => false,
"note" => ""
));
$installer->endSetup();
?>
Create a file app\code\local\<NameSpace>\<ModuleName>\Block\Adminhtml\Helper\Color.php
Add the following script to this file.
<?php
class <NameSpace>_<ModuleName>_Block_Adminhtml_Helper_Color extends Varien_Data_Form_Element_Text
{
public function getElementHtml()
{
$html = '
<link rel="stylesheet" href="'.Mage::getBaseUrl('js') . 'colorpicker/css/colorpicker.css" type="text/css" />
<script type="text/javascript" src="' . Mage::getBaseUrl('js') . 'colorpicker/jquery.js' .'"></script>
<script type="text/javascript" src="' . Mage::getBaseUrl('js') . 'colorpicker/colorpicker.js' .'"></script>
<script type="text/javascript" src="' . Mage::getBaseUrl('js') . 'colorpicker/eye.js' .'"></script>
<script type="text/javascript" src="' . Mage::getBaseUrl('js') . 'colorpicker/utils.js' .'"></script>
';
$html .= parent::getElementHtml();
$html .= "<script type=\"text/javascript\">
var cjq = jQuery.noConflict();
(function(cjq){
cjq('#".$this->getHtmlId()."').ColorPicker({
onSubmit: function(hsb, hex, rgb, el) {
cjq(el).val('#'+hex);
cjq(el).ColorPickerHide();
},
onBeforeShow: function () {
cjq(this).ColorPickerSetColor(this.value);
}
}).bind('keyup', function(){
cjq(this).ColorPickerSetColor(this.value);
});
})(jQuery);
</script>";
return $html;
}
/**
* Procolor JS code to display color picker
*
* @see http://procolor.sourceforge.net/examples.php
* @param string $htmlId
* @return string
*/
protected function _getProcolorJs($htmlId)
{
return '<script type="text/javascript">ProColor.prototype.attachButton(\'' . $htmlId . '\', { imgPath:\'' . Mage::getBaseUrl('js') . 'herve/systemcolorpicker/procolor-1.0/' . 'img/procolor_win_\', showInField: true });</script>';
}
/**
* Prototype validation
*
* @return string
*/
protected function _addHexValidator()
{
return '<script type="text/javascript">Validation.add(\'validate-hex\', \'' . Mage::helper('systemcolorpicker')->__('Please enter a valid hex color code') . '\', function(v) {
return /^#(?:[0-9a-fA-F]{3}){1,2}$/.test(v);
});</script>';
}
}
?>
DOWNLOAD jQuery Color picker add on.
UNZIP the downloaded addon and copy the files into Magento root directory as mentioned below.
jQuery Addon File Magento RootDirectory
js/colorpicker.js js/colorpicker/colorpicker.js
js/eye.js js/colorpicker/eye.js
js/utils.js js/colorpicker/utils.js
js/layout.js js/colorpicker/layout.js
css/* js/colopicker/css/*
images/* js/colopicker/images/*
Now you will get the color picker as shown below
