Magento 2 : Add visual swatch uploader in custom UI form

magento.stackexchange https://magento.stackexchange.com/questions/294454

  •  18-03-2021
  •  | 
  •  

Question

There are visual swatch uploader available in store -> product -> Edit "color" attribute and Manage Swatch (Values of Your Attribute) like display in below image.

enter image description here

I want to apply same that uploader in my custom module's UI form. I found that code in this file. But, not getting output.

vendor/magento/module-swatches/view/adminhtml/templates/catalog/product/attribute/visual.phtml

How can I add in my UI form?

Any help would be appreciated !!

Was it helpful?

Solution

You have to add below line in your ui_component file

<field name="swatchvisual" component="Magento_Swatches/js/form/element/swatch-visual" template="Magento_Swatches/swatch-visual" formElement="select">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="source" xsi:type="string">category</item>
                <item name="uploadUrl" xsi:type="url" path="swatches/iframe/show"/>
                <item name="prefixName" xsi:type="string">swatchvisual.value</item>
                <item name="prefixElementName" xsi:type="string">option_</item>
            </item>
        </argument>
        <settings>
            <additionalClasses>
                <class name="swatches-visual-col">true</class>
            </additionalClasses>
            <label translate="true">Swatch</label>
        </settings>
</field>

copy

vendor/magento/module-swatches/view/adminhtml/web/js/form/element/swatch-visual.js

to your custom module and change in configureDataScope function.

and add these css in your layout file.

<head>
        <css src="Magento_Swatches::css/swatches.css"/>
        <css src="jquery/colorpicker/css/colorpicker.css"/>
</head>

UPDATE change ui xml like this.

<field name="swatchvisual" component="Magento_Swatches/js/form/element/swatch-visual" template="Vendor_Module/swatch-visual" formElement="select">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">category</item>
                    <item name="uploadUrl" xsi:type="url" path="swatches/iframe/show"/>
                    <item name="prefixName" xsi:type="string">swatchvisual.value</item>
                    <item name="prefixElementName" xsi:type="string">option_</item>
                </item>
            </argument>
            <settings>
                <additionalClasses>
                    <class name="swatches-visual-col">true</class>
                </additionalClasses>
                <label translate="true">Swatch</label>
            </settings>
</field>

replace template file to your template file with following content to fix design issue.

<div class="admin__field"
         visible="visible"
         css="$data.additionalClasses"
         attr="'data-index': index">
        <div class="admin__field-label" visible="$data.labelVisible">
            <label if="$data.label" attr="for: uid">
                <span translate="label" attr="'data-config-scope': $data.scopeLabel"/>
            </label>
        </div>
        <div class="admin__field-control"
             visible="visible"
             css="$data.additionalClasses">
            <input type="hidden" data-bind="
        attr: {
            name: inputName
        },
        value: value
    "/>
            <div attr="class: 'swatch_window ' + elementName" ko-style="backgroundColor: $data.value"></div>
            <div class="swatch_sub-menu_container">
                <div class="swatch_row position-relative">
                    <div class="swatch_row_name colorpicker_handler">
                        <p translate="'Choose a color'"></p>
                    </div>
                </div>
                <div class="swatch_row">
                    <div data-bind="
                 attr: {
                    class: 'swatch_row_name btn_choose_file_upload swatch_choose_file_option_' + elementName,
                    'data-class': 'swatch_choose_file_option_' + elementName
                 }
                 ">
                        <p translate="'Upload a file'"></p>
                    </div>
                </div>
                <div class="swatch_row">
                    <div class="swatch_row_name btn_remove_swatch">
                        <p translate="'Clear'"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

Hope this will help you

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top