How To Add Color Picker In Magento 2

Today I will show you how to add color picker in system configuration. It will help users to change the frontend color quickly and conveniently. You can do this through a few steps.

Steps to Add Color Picker in Magento 2 System Configuration :

Step 1:

Add color picker to textbox through system.xml file located at

 

File: /app/code/Magepow/Custom/etc/adminhtml/system.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd"><system> <tab id="magepow" translate="label" sortOrder="10"> <label>Magepow</label> </tab> <section id="custom" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1"> <label>Magepow Custom</label> <tab>magepow</tab> <resource>Magepow_AllProducts::config</resource> <group id="color_group" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1"> <label>General Settings</label> <field id="color_field" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1"> <label>Background Color</label> <comment><![CDATA[Background color]]></comment> <frontend_model>Magepow\Custom\Block\Color</frontend_model> </field> </group> </section></system>

Step 2:

Create Color.php under /app/code/Magepow/Custom/Block

 

File: /app/code/Magepow/Custom/Block/Color.php

<?phpnamespace Magepow\Custom\Block;class Color extends \Magento\Config\Block\System\Config\Form\Field { public function __construct( \Magento\Backend\Block\Template\Context $context, array $data = [] ) { parent::__construct($context, $data); } protected function _getElementHtml( \Magento\Framework\Data\Form\Element\AbstractElement $element ) { $html = $element->getElementHtml(); $value = $element->getData('value'); $html .= '<script type="text/javascript"> require(["jquery"], function ($) { $(document).ready(function (e) { $("#' . $element->getHtmlId() . '").css("background-color","#' . $value . '"); $("#' . $element->getHtmlId() . '").colpick({ layout:"hex", submit:0, colorScheme:"dark", color: "#' . $value . '", onChange:function(hsb,hex,rgb,el,bySetColor) { $(el).css("background-color","#"+hex); if(!bySetColor) $(el).val(hex); } }).keyup(function(){ $(this).colpickSetColor(this.value); }); }); }); </script>'; return $html; }}

Step 3:

Now refresh Magento cache

php bin/magento cache:flush

 

Done. Hope this post helps you in some way.