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 etc\adminhtml\system.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>Scommerce\Gdpr\Block\Adminhtml\Config\Color</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 Scommerce\Gdpr\Block\Adminhtml\Config\Color
<?php /** * Copyright © 2019 Scommerce Mage. All rights reserved. * See COPYING.txt for license details. */ namespace Scommerce\Gdpr\Block\Adminhtml\Config; /** * Class Color * @package Scommerce\Gdpr\Block\Adminhtml\Config */ class Color extends \Magento\Config\Block\System\Config\Form\Field { /** * @param \Magento\Framework\Data\Form\Element\AbstractElement $element * @return string */ protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $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:View\Layout\etc\page_configuration.xsd"> <head> <css src="jquery\colorpicker\css\colorpicker.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.
Related Posts
