0

enter image description here

Please tell me how you can add a color picker as an attribute to the product form. I tried several options from the Internet, well, they did not work.

0

use this library and load that library in the product details page like

app/code/Vendor/YourModule/view/adminhtml/layout/catalog_product_edit.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
         <script src="Vendor_YourModule::js/jscolor.min.js"/>
    </head>
</page>

and on created attribute add frontend class like

biztech_color_picker jscolor {width:243, height:150, position:'buttom', borderColor:'#FFF', insetColor:'#FFF', backgroundColor:'#514943',hash:true}

this will convert it to the color picker

If this does not work you can simply modify the product_edit form using

ModifyMeta() method which is responsible to provide the ui data for building a form

you can replace your attribute with the ui colorpicker

create a file in

app/code/Vendor/YourModule/etc/adminhtml/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <virtualType name="Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Pool">
        <arguments>
            <argument name="modifiers" xsi:type="array">
                <item name="addColorPicker" xsi:type="array">
                    <item name="class" xsi:type="string">Vendor\YourModule\Ui\DataProvider\Product\Form\Modifier\ColorConfig</item>
                    <item name="sortOrder" xsi:type="number">100</item>
                </item>
            </argument>
        </arguments>
    </virtualType>
</config>

Now create class ColorPickerConfig.php add method you can refer from Here and replace your attribute config with the colorPicker of UI config.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.