PHP Magento Tips

How to Add color Picker in Magento Admin Configuration Page

Rate this posting:
{[['']]}

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.



Step 1: In your module’s system.xml, add the color picker field as:

<?xml version="1.0"?>
<config>
 <tabs>
  - - - - - - - 
 </tabs>
 <sections>
  <vijay_scrolltotop translate="label" module="vijay_scrolltotop">
   - - - - - -
   <groups>
    <frontend translate="label">
     - - - - -
     <fields>
      <color translate="label">
       <label>Color</label>
       <frontend_type>text</frontend_type>
       <frontend_model>vijay_scrolltotop/adminhtml_system_config_form_field_color</frontend_model>
       <sort_order>20</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-hex</validate>
       <comment>Specify the background color.</comment>
      </color> 
     </fields>
    </frontend>
   </groups>
  </vijay_scrolltotop>
 </sections>
</config>

Step 2: Create file in app/code/local/Vijay/ScrollToTop/Block/Adminhtml/System/Config/Form/Field/Color.php and add below code in it.

<?php
class Vijay_ScrollToTop_Block_Adminhtml_System_Config_Form_Field_Color extends Mage_Adminhtml_Block_System_Config_Form_Field
{
    protected function _getElementHtml(Varien_Data_Form_Element_Abstract $element)
    {
        $html = parent::_getElementHtml($element);
  
        if ( !Mage::registry('mColorPicker') ) {
            $html .= '
                <script type="text/javascript" src="'.$this->getJsUrl('vijayscrolltotop/jquery-1.8.2.min.js').'"></script>
                <script type="text/javascript" src="'.$this->getJsUrl('vijayscrolltotop/mColorPicker.min.js').'"></script>
                <script type="text/javascript">
                jQuery.noConflict();
                jQuery.fn.mColorPicker.init.replace = false;
                jQuery.fn.mColorPicker.init.enhancedSwatches = false;
                jQuery.fn.mColorPicker.init.allowTransparency = true;
                jQuery.fn.mColorPicker.init.showLogo = false;
                jQuery.fn.mColorPicker.defaults.imageFolder = "'.$this->getJsUrl('vijayscrolltotop/mColorPicker/').'";
                </script>
                ';
            Mage::register('mColorPicker', 1);
        }
  $html .= '
        <script type="text/javascript">
        jQuery(function($){
            $("#'.$element->getHtmlId().'").width("200px").attr("data-hex", true).mColorPicker({swatches: [
              "#9a1212",
              "#93ad2a",
              "#00ff00",
              "#00ffff",
              "#0000ff",
              "#ff00ff",
              "#ff0000",
              "#4c2b11",
              "#3b3b3b",
              "#000000"
            ]});
        });
        </script>
        ';
        return $html;
    }
}

Step 3: Create JS folder and add JS files to initialize colorpicker in admin.

Create js/vijayscrolltotop folder and add jquery-1.8.2.min.js and mColorPicker.min.js in it.

Also create js/vijayscrolltotop/mColorPicker folder and add color.png, grid.gif, meta100.png and picker.png images in it.

you can download whole files from https://github.com/meta100/mColorPicker
Tag : Magento
0 Comments On "How to Add color Picker in Magento Admin Configuration Page"

Back To Top