Schedule a call with our team and discuss how can we, not only help you technically but help in increasing your ecommerce’s conversion rate.
Le’ts add a color picker to textbox through system.xml file located at
app\code\Vendor\Extension\etc\adminhtml
|
1 2 3 4 5 6 7 8 9 10 11 |
<system> <section> <group id="my_color_group" ...> <field id="my_color_option" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1"> <label>Background Color</label> <comment><![CDATA[Background color]]></comment> <frontend_model>Vendor\Extension\Block\Color</frontend_model> </field> </group> </section> </system> |
Now we have to create one Color.php file at below location under the hood of extension
app\code\Vendor\Extension\Block
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<?php namespace Vendor\Extension\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","jquery/colorpicker/js/colorpicker"], function ($) { $(document).ready(function () { var $el = $("#' . $element->getHtmlId() . '"); $el.css("backgroundColor", "'. $value .'"); // Attach the color picker $el.ColorPicker({ color: "'. $value .'", onChange: function (hsb, hex, rgb) { $el.css("backgroundColor", "#" + hex).val("#" + hex); } }); }); }); </script>'; return $html; } } |
We need to implement JavaScript color picker library to adminhtml_system_config_edit.xml file available at app\code\Vendor\Extension\view\adminhtml\layout
|
1 2 3 4 5 6 7 |
<?xml version="1.0" encoding="UTF-8"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd"> <head> <css src="jquery/colorpicker/css/colorpicker.css"/> <link src="jquery/colorpicker/js/colorpicker.js"/> </head> </page> |
create the event.xml on your module under the Vendor/Module/etc/event.xml and...
If you need a custom meta tag for a specific...
Generally, if you load font as preload, it will load...
Step 1: First you need to add di.xml in the...
Override the vendor/magento/module-sales/view/frontend/templates/email/items/order/default.phtml file on your theme and add the...
