3

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 !!

  • Do you want only this selector or whole functionality of Manage Swatch? – Rakesh Varma Nov 4 '19 at 6:23
  • Only that selector...... – Rohan Hapani Nov 4 '19 at 6:24
  • check my updated answer – Rakesh Varma Nov 4 '19 at 12:45
1

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

|improve this answer|||||
  • It's working !! You are great :) Thanks. – Rohan Hapani Nov 4 '19 at 13:06

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.