The modifier is responsible for data addition and some manipulations with elements and UI-form components. There are 2 main methods that came from the modifier’s interface (they should always present):

We can add any data to our UI-form in the modifyData method or we can delete/modify the existing product data during the form creation. All the existing UI-form data will be displayed in the input value. Pay attention to the Sort Order of your modifier. A lot of data can be added to the following modifier.

We can add our UI components and elements in the modifyMeta method. In the example below we are going to add a simple modal window to the custom options fieldset with multiple elements.

Our modifier will be inherited from an abstract modifier for the Catalog_Product (vendor/magento/module-catalog/Ui/DataProvider/Product/Form/Modifier/AbstractModifier.php) module and will be located here: app/code/Vendor/Module/Ui/DataProvider/Product/Form/Modifier/CustomModal.php

Note! You can find the available UI components here: vendor/magento/module-ui/Component. It will be useful to look through the subfolders and see what the default Magento_UI module provides, before start utilizing it.

Now, it should be processed without any changes. Then, add the first UI-form element, a link, a modal window that should be called after hitting the link, and multiple fields to the modal window’s container.

When the product form is downloaded, Magento will collect all the modifiers and sort them in the chosen order. Then, the modifyData and modifyMeta methods will be called for each modifier. Our link (button) and a modal window will be added at the same moment. The only problem is to save this data because the default saving is used and duplicated in our window:

1

2

3

4

5

6

7

8

9

10

11

12

13

'buttons'=>[

[

'text'=>__('Save'),

'class'=>'action-primary',// additional class

'actions'=>[

[

'targetName'=>'index = product_form',// Element selector

'actionName'=>'save',// Save parent form (product)

],

'closeModal',// method name

],

],

],

and if the selected fields are not in the product, they won’t be saved. You should use an observer or create your own model for saving and sending data using ajax to override the default saving.

The modal window will look like that:

A button to open the window:

You can change its look from the link to the default button by modifying the line from:

‘displayAsLink’ => true,

to:

‘displayAsLink’ => false,

Then, the display will change in the following way:

The data from our modal window will be send in the following way during the product saving:

in the product saving controller (vendor/magento/module-catalog/Controller/Adminhtml/Product/Save.php):

If you still got questions, feel free to ask them in the comments below.

Yes, I guess you can try to do that at the theme (design) level. However, if you’ve got the necessity to do that, most likely, you’ll need an separate extension for that, as a lot of checkout processes will require the usage of Observer.

Unfortunately, I haven’t had any experience with implementing such a task. But as soon as I do, I’ll share my thoughts and observations in a new blog post.