Recently I have found one solution to add color picker on system configuration options in Magento 2. Lets discuss in detail.<\/p>\n
In order to add color picker on system configuration options, we have to add one system field and require one Block file.<\/p>\n
Use below code to add system field.<\/p>\n
<field id=\"color\" translate=\"label\" type=\"text\" sortOrder=\"10\" showInDefault=\"1\" showInWebsite=\"1\" showInStore=\"1\">\r\n <label>Text Color<\/label>\r\n <frontend_model>Hiddentechies\\DigitalProduct\\Block\\Color<\/frontend_model>\r\n <\/field><\/pre>\nNow lets create Block file – Color.php<\/p>\n
<?php\r\n\r\nnamespace Hiddentechies\\DigitalProduct\\Block;\r\n\r\nuse Magento\\Framework\\Registry;\r\n\r\nclass Color extends \\Magento\\Config\\Block\\System\\Config\\Form\\Field {\r\n\r\n protected $_coreRegistry;\r\n\r\n public function __construct(\r\n \\Magento\\Backend\\Block\\Template\\Context $context, Registry $coreRegistry, array $data = []\r\n ) {\r\n $this->_coreRegistry = $coreRegistry;\r\n parent::__construct($context, $data);\r\n }\r\n\r\n protected function _getElementHtml(\\Magento\\Framework\\Data\\Form\\Element\\AbstractElement $element) {\r\n $base = $this->getBaseUrl();\r\n $html = $element->getElementHtml();\r\n $cpPath = $base . 'pub\/media\/js\/';\r\n if (!$this->_coreRegistry->registry('colorpicker_loaded')) {\r\n $html .= '<script type=\"text\/javascript\" src=\"' . $cpPath . 'jscolor.js\"><\/script><style type=\"text\/css\">input.jscolor { background-image: url(' . $cpPath . 'color.png) !important; background-position: calc(100% - 8px) center; background-repeat: no-repeat;} input.jscolor.disabled,input.jscolor[disabled] { pointer-events: none; }<\/style>';\r\n $this->_coreRegistry->registry('colorpicker_loaded', 1);\r\n }\r\n $html .= '<script type=\"text\/javascript\">\r\n var el = document.getElementById(\"' . $element->getHtmlId() . '\");\r\n el.className = el.className + \" jscolor\";\r\n <\/script>';\r\n return $html;\r\n }\r\n\r\n}<\/pre>\nLets discuss some terms used in this block.
\nHiddentechies<\/strong> \u2013 Vendor Name
\nDigitalProduct<\/strong>\u2013 Module Name
\ncolor.png<\/strong> \u2013 add color icon image at pub\/media\/js\/ directory
\njscolor.js<\/strong> – add color picker js at pub\/media\/js\/ directory<\/p>\nYou can download the color picker Js from below URL.
\nhttp:\/\/jscolor.com\/download\/<\/strong><\/p>\nThats it.<\/p>\n","protected":false},"excerpt":{"rendered":"
Recently I have found one solution to add color picker on system configuration options in Magento 2. Lets discuss in detail. In order to add color picker on system configuration options, we have to add one system field and require one Block file. Use below code to add system field. <field id=”color” translate=”label” type=”text” sortOrder=”10″… <\/p>\n