Magento 2: Add colour picker in admin system configuration

Magento 2 - Add colour picker in admin system configuration

Today we had a requirement on our GDPR module to allow administrators / website owners to choose the background and text colour of the cookie notification banner from Magento 2 admin panel configuration. This will allow them to select colour based on their website branding / colour scheme. It took us a while to crack this so we thought we should share with our Magento 2 developer.

Please see our step by step guide for getting colour picker as part of the system admin configuration

Step 1 – Add the following code snippet in etcadminhtmlsystem.xml

 <field id="cookie_background_color" translate="label comment" type="text" sortOrder="180" showInDefault="1" showInWebsite="1" showInStore="1"> <label>Cookie background color</label> <comment>Background color of cookie policy area</comment> <frontend_model>ScommerceGdprBlockAdminhtmlConfigColor</frontend_model> <depends> <field id="*/*/enable">1</field> <field id="*/*/enable_cookie">1</field> </depends> </field>

The important thing to remember in the above code snippet is frontend_model because this block class will be used to show colour picker in the configuration.

Step 2 – Create our frontend model block class ScommerceGdprBlockAdminhtmlConfigColor


<?php /** * Copyright © 2019 Scommerce Mage. All rights reserved. * See COPYING.txt for license details. */ namespace ScommerceGdprBlockAdminhtmlConfig; /** * Class Color * @package ScommerceGdprBlockAdminhtmlConfig */ class Color extends MagentoConfigBlockSystemConfigFormField { /** * @param MagentoFrameworkDataFormElementAbstractElement $element * @return string */ protected function _getElementHtml(MagentoFrameworkDataFormElementAbstractElement $element) { $html = $element->getElementHtml(); $value = $element->getData('value'); $html .= sprintf('<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20require(%5B%22jquery%22%2C%20%22jquery%2Fcolorpicker%2Fjs%2Fcolorpicker%22%5D%2C%20function%20(%24)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(function()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20%24el%20%3D%20%24(%22%23%25s%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24el.css(%22backgroundColor%22%2C%20%22%23%25s%22)%3B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20Attach%20the%20color%20picker%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24el.ColorPicker(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%22%25s%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onChange%3A%20function%20(hsb%2C%20hex%2C%20rgb)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24el.css(%22backgroundColor%22%2C%20%22%23%22%20%2B%20hex).val(hex)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />', $element->getHtmlId(), $value, $value); return $html; }
}

The above class will show colour picker system configuration in your Magento 2 custom module.

Step 3 – Create admin layout xml file /view/adminhtml/layout/adminhtml_system_config_edit.xml to include colour picker css in the head section of system configuration edit page


<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:ViewLayoutetcpage_configuration.xsd"> <head> <css src="jquerycolorpickercsscolorpicker.css"/> </head>
</page>

Hope this article helped you in some way. Please leave us your comment and let us know what do you think? Thanks.
 
 

Discover more from WHO WILL CARE eCommerce

Subscribe now to keep reading and get access to the full archive.

Continue reading