There are visual swatch uploader available in store -> product -> Edit "color" attribute and Manage Swatch (Values of Your Attribute) like display in below image.
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 !!
asked Nov 4, 2019 at 6:13
Rohan Hapani
17.6k9 gold badges57 silver badges99 bronze badges
-
Do you want only this selector or whole functionality of Manage Swatch?Rakesh Varma– Rakesh Varma2019年11月04日 06:23:59 +00:00Commented Nov 4, 2019 at 6:23
-
Only that selector......Rohan Hapani– Rohan Hapani2019年11月04日 06:24:33 +00:00Commented Nov 4, 2019 at 6:24
-
check my updated answerRakesh Varma– Rakesh Varma2019年11月04日 12:45:37 +00:00Commented Nov 4, 2019 at 12:45
1 Answer 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
answered Nov 4, 2019 at 7:55
Rakesh Varma
2,25412 silver badges19 bronze badges
-
It's working !! You are great :) Thanks.Rohan Hapani– Rohan Hapani2019年11月04日 13:06:05 +00:00Commented Nov 4, 2019 at 13:06
-
Any Idea, how to add it using block approach in place of ui_component?amitshree– amitshree2021年06月12日 16:44:45 +00:00Commented Jun 12, 2021 at 16:44
default